vue2.0 獲取從http接口中獲取數據,組件開發(fā),路由配置方式

更新時間：2019年11月04日 16:38:20 作者：ShowMeTheCode21

今天小編就為大家分享一篇vue2.0 獲取從http接口中獲取數據,組件開發(fā),路由配置方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

vue 2.0 從接口中獲取數據

<template>
 <div id="admins">
  <h1>I am a title.</h1>
  <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發(fā)起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中的標簽和屬性。

在開發(fā)過程中，首先容易出現的是標點符號問題，其次是缺少引用的js，或者組件。

感覺看視頻中的寫法和網絡上流傳的寫法有些地方差別很大，特別是調用http接口獲取數據，還是參考網上使用axios解決跨域問題，比較好，此外，官網視頻中使用的是在create里面發(fā)請求獲取數據，但是會報錯，使用mounted不會報錯。當然使用npm進行管理的話，首先要了解一下整個項目的目錄結構。了解完之后再進行開發(fā)，才會避免摸不著頭腦的情況

以上這篇vue2.0 獲取從http接口中獲取數據,組件開發(fā),路由配置方式就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: