[JavaScript知识库]Vue中 使用mock模拟数据

开发阶段,为了提高效率,需要提前Mock减少代码冗余,灵活插拔减少沟通,减少接口联调时间

1.编辑器安装JSON5扩展,(采用json5格式来让json格式可以存在注释)

2.新建mock文件夹?/userInfo.json5?文件 mock数据

3.在mock文件夹下,新建 index.js? ?引入刚刚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数据');
})
}

4.vue.config.js中添加配置

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

5..vue文件下 发送ajax请求测试数据

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

5.扩充:移除MOCK

.env.development 文件中

MOCK=false

完善mock\index.js

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));
        });
    }
}