用api请求数据渲染vue

api 中的get post 直接用vue-resource ；

在main.js 文件中

import VueResource from 'vue-resource';
Vue.use(VueResource);

2.在vue 的页面请求数据

 

<template>
  <div>
    <h1 class="logo"> Api Test</h1>
    <ul class="list">
      <li v-for="list in lists" v-text="list.name"></li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      lists:[{'id':'001','name':'test',"description":'test'},{'id':'001','name':'test',"description":'test'}]
    }
  },
  created () {
    this.get_data()
  },
  methods: {
    get_data: function() {
      var v = this;
     this.$http.get('http://127.0.0.1:3000/api',{
             emulateJSON:true//一定要写上这句话
         }).then(function(res){
         //alert(res.body[5].name);
             v.lists = res.body;

         },function(res){
             alert(res.status);
});
    },
  },
}
</script>

就是这么简单

可能会涉及到跨域的问题

在config下的index.js 文件设置以下

 

 

    proxyTable: {
     '/api': {
       target: 'http://127.0.0.1:3000/api',
       changeOrigin: true,
       pathRewrite: {
         '^/api': ''
       }
     }
    },

　　在后端设置以下允许跨域

 

//设置跨域访问
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});