在vue-cli中如何通过axios获取本地自己创建的模拟数据

1.创建一个test.json文件，名称自己写,位置我是放在vue的index首页的

{
	"datalist":[
		{
			"name": "xiaoming",
			"age": 20,
			"city": "深圳",
			"number": 1
		},
		{
			"name": "xiaohong",
			"age": 22,
			"city": "东莞",
			"number": 2
		},
		{
			"name": "siz",
			"age": 21,
			"city": "中山",
			"number": 3
		},
		{
			"name": "qiz",
			"age": 25,
			"city": "佛山",
			"number": 5
		}
	],
	"teacher": [
		{
			"name": "qiz",
			"age": 45,
			"class": "xinguan1163",
			"number": 5
		},
		{
			"name": "riz",
			"age": 35,
			"class": "xinguan1163",
			"number": 5
		}
	]
}

2.需要安装express 如果没有安装,使用npm install express
3.在build/webpack.dev.conf.js文件下配置

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

然后下拉找到devServer，在devServer里面添加以下代码。

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

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/datalist",{
      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){

    })