vue 学习（2）http请求及代理设置

1、初始化项目（之前博客介绍）

2、在components下新建组件NewsList.vue，api地址中key值在聚合数据网站申请

<template>
  <div class="hi">
    <table>
      <tr v-for="n in news" :key='n.uniquekey'>
        <td >{{n.title }}</td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
  data () {
    return {
      title: '新闻列表页',
      news: []
    }
  },
  mounted () {
    this.$http.get('api/toutiao/index?type=top&key=').then((response) => {
      console.info(response.body.result.stat)
      this.news = response.body.result.data
    }, (response) => {
      console.error(response)
    })
  }
}

</script>
<style>
.hi {
  color: red;
  font-size: 20px;
}
</style>

3、修改router下index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import News from '@/components/NewsList'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/news',
      name: 'News',
      component: News
    }
  ]
})

4、修改main.js,引入VueResource，加入http请求支持，如果没有安装执行npm install --save vue-resource 命令安装

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

5、设置代理，修改config/index.js

proxyTable: {
      '/api': {
        target: 'http://v.juhe.cn',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

6.访问http://localhost:8080/#/news即可

转载于:https://my.oschina.net/u/3645487/blog/3039111