vue2.0 获取从http接口中获取数据，组件开发，路由配置

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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37

解决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’即可
        }
      }
    },

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

配置router

new Router({
  mode:'history',
  base:__dirname,
  routes: [
   {
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/admins',
      name: 'admins',
      component: admins
    }
  ]
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

加载组件

import admins from '@/components/HelloWorld'
export default {
  name: 'App',
  data () {
    return {
      Msg: "there is nonthing",
      seen:false
    }
  },
  componets:{
    HelloWorld
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

心得：vue相当于 和可以自定义html中的标签 和 属性。 
在开发过程中，首先容易出现的是标点符号问题，其次是缺少引用的js，或者组件。 
感觉看视频中的写法和网络上流传的写法有些地方差别很大，特别是调用http接口获取数据，还是参考网上使用axios解决跨域问题，比较好，此外，官网视频中使用的是在create里面发请求获取数据，但是会报错，使用mounted不会报错。当然使用npm进行管理的话，首先要了解一下整个项目的目录结构。了解完之后再进行开发，才会避免摸不着头脑的情况