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

81 阅读 0 评论 54 点赞

我是靠谱客的博主幽默哈密瓜，这篇文章主要介绍vue 学习（2）http请求及代理设置，现在分享给大家，希望可以做个参考。

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

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

复制代码

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
<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文件

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 命令安装

复制代码

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

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

复制代码

1
2
3
4
5
6
7
8
9
proxyTable: {
      '/api': {
        target: 'http://v.juhe.cn',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

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

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