axios调取本地mock数据 以及实现跨域（node代理）

需要与后台进行数据交互  这里使用本地json数据来模仿后台数据交互流程 我们使用了mock数据（模拟后台数据）

作为前端经常需要模拟后台数据，我们称之为mock。mock 的真正意义在于简化测试环境。假如你现在要测试一个dao，但是你有不想构建数据库环境就可以用mock模拟数据库的返回结果。

 

进入正题：

一，在vuejs 2.0版本 在配置文件webpack.dev.conf.js进行本地数据访问，在const portfinder = require(‘portfinder’)后添加

//app.use是express“调用中间件的方法”。所谓“中间件（middleware），就是处理HTTP请求的函数，用来完成各种特定的任务，比如检查用户是否登录、分析数据、以及其他在需要最终将数据发送给用户之前完成的任务。”。这是阮一峰文章的原话。
//简而言之，app.use() 里面使用的参数，主要是函数。但这个使用，并不是函数调用，而是使能的意思。当用户在浏览器发出请求的时候，这部分函数才会启用，进行过滤、处理。

 

二，devServer,在里面添加

 

三，本地data.json数据放在根目录下与index.js同级,执行npm run dev,输入  localhost:8080/api/seller测试是否成功

返回的数据格式化工具推荐google 的jsonview插件

 

四，结合axios使用

 

 

 nodejs代理

同样的我们新建一个Node.vue的模板和/node的路由

    {
      path: '/node',
      name: 'Node',
      component: Node
    }

index.js 完整代码

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Curl from '@/components/Curl'
import Node from '@/components/Node'
import VueResource from 'vue-resource'

Vue.use(Router)
Vue.use(VueResource)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/curl',
      name: 'Curl',
      component: Curl
    },
    {
      path: '/node',
      name: 'Node',
      component: Node
    }
  ]
})

设置代理

打开config/index.js
修改proxyTable: {}部分
修改为

    proxyTable: {
      '/api': {
        target: 'http://music.163.com/api',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }

第一行的'/api'指的是虚拟路径
target指的是目标地址，也就是实际api的地址
pathRewrite规则重写

然后在代码页面修改一下请求地址

  mounted: function () {
    this.$http.get('/api/playlist/detail?id=19723756', {}, {
      headers: {

      },
      emulateJSON: true
    }).then(function (res) {
      this.musics = res.data.result.tracks
      console.log(this.musics)
    }, function (error) {
      console.log(error)
    })
  }

/api/playlist/detail?id=19723756上面的这个地址其实就等于http://localhost:8080/api+/playlist/detail?id=19723756

注意这里一定要重启一下node，因为你修改了node的配置一定要重启才能生效

在命令符窗口ctrl + c
然后重新执行cnpm run dev
这时候，命令窗口会提示

[HPM] Proxy created: /api  ->  http://music.163.com/api
[HPM] Proxy rewrite rule created: "^/api" ~> ""
> Starting dev server...

说明代理成功

然后访问http://localhost:8080/#/node

就能看到效果了
完整代码 src\components\Node.vue

<template>
  <div class="curl">
    <h1>{{ msg }}</h1>
    <h2>{{ author }}</h2>
    <ul v-for="music in musics">
      <li>
        {{ music.name }}
      </li><br>
      <li>
        <img :src="music.album.picUrl" style="width:200px;">
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'curl',
  data () {
    return {
      msg: 'vue调用网易云接口',
      author: '泥猴啊',
      musics: []
    }
  },
  mounted: function () {
    this.$http.get('/api/playlist/detail?id=19723756', {}, {
      headers: {

      },
      emulateJSON: true
    }).then(function (res) {
      this.musics = res.data.result.tracks
      console.log(this.musics)
    }, function (error) {
      console.log(error)
    })
  }
}
</script>