Vue中如何使用mock模拟数据

const fs = require('fs');
const path = require('path');
const Mock = require('mockjs');//mockjs 导入依赖模块
const JSON5 = require('json5');
//读取json文件
function getJsonFile(filePath) {
    //读取指定json文件
    let json = fs.readFileSync(path.resolve(__dirname,filePath), 'utf-8');
    //解析并返回
    return JSON5.parse(json);
}
 
//返回一个函数
module.exports = function(app){
    //监听http请求
    app.get('/user/userinfo', function (rep, res) {
        //每次响应请求时读取mock data的json文件
        //getJsonFile方法定义了如何读取json文件并解析成数据对象
        let json = getJsonFile('./userInfo.json5'); // mock数据
        //将json传入 Mock.mock 方法中，生成的数据返回给浏览器
        res.json(Mock.mock(json));
    });
    app.post('/...mock的url',(req,res)=>{
    let json = getJsonFile('./...mock的json5数据');
})
}

module.exports = {
    devServer: {
        before: require('./mock/index.js')//引入mock/index.js
    }
}

import axios from 'axios'
export default {   
	  mounted() {
	    axios.get('/user/userinfo')
	    .then(res => {
	      console.log(res)
	    })
	    .catch(err => {
	      console.error(err); 
	    })
	  }
	} 

MOCK=false

module.exports = function(app){
    if(process.env.MOCK == 'true'){
        //监听http请求
        app.get('/user/userinfo', function (rep, res) {
            //每次响应请求时读取mock data的json文件
            //getJsonFile方法定义了如何读取json文件并解析成数据对象
            let json = getJsonFile('./userInfo.json5');
            //将json传入 Mock.mock 方法中，生成的数据返回给浏览器
            res.json(Mock.mock(json));
        });
    }
} 

const Mock = require('mockjs');
 
//格式： Mock.mock( url, post/get , 返回的数据)；
Mock.mock('/index/foodlist', 'get', require('./json/foodlist.json'));
 
Mock.mock('/index/foodlist2', 'post', require('./json/foodlist2.json'));

{
    "code": 200,
    "list": [
        {
            "imgSrc": "https://timgsa.baidu.com/timg?C2880.jpg%3Fmode%3Ddownload",
            "name": "老弄堂1",
            "term": "起送￥15 免配送费"
        },
        {
            "imgSrc": "https://timgsa.baidu.com/timg?2C2880.jpg%3Fmode%3Ddownload",
            "name": "老弄堂2",
            "term": "起送￥15 免配送费"
        }
    ]
}

import Vue from 'vue';
import App from './App';
import router from './router';
 
require('./mock'); //引入mock数据，关闭则注释该行
 
Vue.config.productionTip = false;
 
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});

axios.get('/user/userInfo')
.then(function(res){
  console.log(res);
})
.catch(function(err){
  console.log(err);
});

// 模拟请求本地mock数据（不基于插件）
    this.$http.get('/api/foods.json').then(function(res){
      let list = res.data.list;
      console.log(list);
      that.businessList = res.data.list;
    })

const http = require('http');
// url模块用于处理与解析 前端传给后台的URL，适用于get请求（不适用于post请求），详情参见文档
const urlLib = require('url');
 
http.createServer(function(req, res){
    let urlObj = urlLib.parse(req.url, true);  // 注意：这里的第二个参数一定要设置为：true, query才能解析为对象形式,可以更加方便地获取key:value
    let url = urlObj.pathname;
    let get = urlObj.query;
    console.log(url);
    // 模拟的mock数据
    let data = {
        "code": 200,
        "list": [
            {
                "imgSrc": "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1126716551,3134048915&fm=26&gp=0.jpg",
                "name": "老弄堂1",
                "term": "起送￥15 免配送费"
            },
            {
                "imgSrc": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582134004436&di=eee2d024a136e950daa694f56ea78a2d&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F12%2F05%2F56db465e153a5d808b54501846e88dca.jpg",
                "name": "老弄堂2",
                "term": "起送￥15 免配送费"
            }
        ]
    }
 
    // console.log(get.user);
    if(url === "/food") {  // 美食列表接口
        res.write(JSON.stringify(data));
    }
    res.end();
}).listen(9000); 

// 模拟请求本地node服务
    this.$http.get('/api/food').then(function(res){
      let list = res.data.list;
      console.log(list);
      that.businessList = res.data.list;
    })