溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
vue 2.0 從接口中獲取數據
<template>
<div id="admins">
<h2>I am a title.</h2>
<a> written by {{ author }} </a>
<div v-for="admin in users">
{{admin.name}}<br>{{admin.password}}
</div>
</div>
</template>
<script type="text/javascript">
import axios from 'axios'
export default {
name: 'admins',
data () {
return {
author: "there is nonthing",
users:[]
}
},
mounted(){
this.getAdminList()
},
methods:{
getAdminList(){
var vm=this;
axios.get('/api/admins')
.then(function(response){
vm.users=response.data
})
}
}
}
</script>
<style>
</style>
解決axios發起http請求遇到跨域的問題
修改 config/index.js
proxyTable: {
'/api': {
target: 'http://127.0.0.1:8080',//設置你調用的接口域名和端口號 別忘了加http
changeOrigin: true,
pathRewrite: {
'^/api': ''//這里理解成用‘/api'代替target里面的地址，后面組件中我們掉接口時直接用api代替 比如我要調用'http://40.00.100.100:3002/user/add'，直接寫‘/api/user/add'即可
}
}
},
配置router
new Router({
mode:'history',
base:__dirname,
routes: [
{
path: '/HelloWorld',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/admins',
name: 'admins',
component: admins
}
]
})
加載組件
import admins from '@/components/HelloWorld'
export default {
name: 'App',
data () {
return {
Msg: "there is nonthing",
seen:false
}
},
componets:{
HelloWorld
}
}
心得：vue相當于 和可以自定義html中的標簽 和 屬性。
在開發過程中，首先容易出現的是標點符號問題，其次是缺少引用的js，或者組件。
感覺看視頻中的寫法和網絡上流傳的寫法有些地方差別很大，特別是調用http接口獲取數據，還是參考網上使用axios解決跨域問題，比較好，此外，官網視頻中使用的是在create里面發請求獲取數據，但是會報錯，使用mounted不會報錯。當然使用npm進行管理的話，首先要了解一下整個項目的目錄結構。了解完之后再進行開發，才會避免摸不著頭腦的情況
以上這篇vue2.0 獲取從http接口中獲取數據,組件開發,路由配置方式就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
