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>