【vue】在vue-cli2下用axios模拟请求本地数据

前请提要：
在未与后台进行交互时，前端先自行对接口进行测试是很有必要的。那么，要如何来模拟数据请求呢？如何请求本地的json文件呢？接下来将会详细说明。

1. 创建一个json文件（存放位置自行选择，这里我选择放在全局目录下）——db.json。

{
	"student":[
		{
			"name": "Liz",
			"age": 20,
			"class": "xinguan1163",
			"number": 1
		},
		{
			"name": "aiz",
			"age": 22,
			"class": "xinguan1163",
			"number": 2
		},
		{
			"name": "siz",
			"age": 21,
			"class": "xinguan1163",
			"number": 3
		},
		{
			"name": "qiz",
			"age": 25,
			"class": "xinguan1163",
			"number": 5
		}
	],
	"teacher": [
		{
			"name": "qiz",
			"age": 45,
			"class": "xinguan1163",
			"number": 5
		},
		{
			"name": "riz",
			"age": 35,
			"class": "xinguan1163",
			"number": 5
		}
	]
}

2. 若未安装express需要先安装，npm install express（在安装express的过程中报了错，后面通过删除node_modules文件夹，再以管理员身份运行cmd/git bash，输入命令npm install得到解决）

3. 在build/webpack.dev.conf.js文件下配置（以前是在dev-server.js下配置）。

const express = require('express')                         //1.
const app = express()                                     //2.请求sever
var appData = require('../db.json')                  //3.加载本地数据文件
   var student = appData.student
   var teacher = appData.teacher
var apiRoutes = express.Router()                          //4.
app.use('/api',apiRoutes)                                  //5.通过路由请求数据   

然后下拉找到devServer，在其中添加以下代码。

    before(app) {
      app.get('/api/student', (req, res) => {
       res.json({
         errno: 0,
         data: student
       })//接口返回json数据，上面配置的数据appData就赋值给data请求后调用
      })
      app.post('/api/teacher', (req, res) => {
       res.json({
         errno: 0,
         data: teacher
       })
      })
    }

（这里之所以有get/post之分，是为了分别模拟两种请求）

4. 安装axios。npm install axios --save

5. 在src/main.js中，导入axios。

import axios from 'axios'

Vue.prototype.$axios = axios

1. 在App.vue文件中

//get请求
this.$axios.get("/api/student",{
      params: {
        id: 123
      }
    })
    .then(res=>{
      console.log(res.data);
    }).catch(function(error){
      console.log("error init."+error)
    })
    
//post请求
    this.$axios.post("/api/teacher",{
      userId: "888"
    },{
      headers: {
        token: "tom"
      }
    }).then(res => {
      console.log(res.data);
    }).catch(function(error){

    })

7. npm run dev在浏览器中查看运行结果。