vue中使用Mock

mock是当前端工程师搭建好了页面只差数据，但是后端还没完成接口开发时候使用的前端虚拟数据

mock的特性

前后端分离

增加单元测试的真实性（通过随机数据，模拟各种场景）

简单实用（符合真实的接口）

数据类型丰富（支持生成的文字，字符串，日期，邮箱，boolean，颜色，图片等）

方便扩展（支持自定义类型函数）

Mock.js地址

搭建Vue项目

vue create mock-demo

项目搭建完毕之后开始安装依赖文件

使用axios发送ajax请求
npm install axios --save

使用mock产生随机数据
npn install mockjs --save-dev

使用json5解决不能加注释的问题
npm install json5 --save-dev

简单测试

在项目中创建mock文件夹并新建文件test.js

const Mock = require("mockjs")
let id =Mock.mock("@id")
console.log(id)
let obj = Mock.mock({
    
    
    id:"@id()",	//随机id
    username:"@cname()",	//随机用户名
    date:"@date()",	//随机日期
    avatar:"@image('200x200','red','#fff','avatar')",		//随机头像
    description:"@paragraph()",		随机描述
    ip:"@ip()"	//随机ip地址
    email:"@email()"	//随机邮箱
})
console.log(obj)

终端输出 node test进行测试（非热更新方式）
node热更新插件为nodemon

yarn add nodemon / npm install -g nodemon

使用方式

nodemon index

配置JSON5

在vscode中安装json5扩展插件

然后创建.json5为后缀的文件，将上面用作测试的mock代码复制进来，就不会报语法错误了

mock配置

首先在mock文件夹中新建userinfo.JSON5文件来定义mock的数据

{
    
    
    id:"@id()",
    username:"@cname()",
    date:"@date()",
    avatar:"@image('200x200','red','#fff','avatar')",
    description:"@paragraph()",
    ip:"@ip()",
    email:"@email()"
}

在全局创建.env.development文件

注意事项：当要调用后台接口时，可以设置为false，从而关闭mock

MOCK = true

在mock文件中新建index.js文件

const fs = require('fs');
const path = require('path');
const Mock = require('mockjs');
const JSON5 = require('json5');

// 读取json文件
function getJsonFile(filePath) {
    
    
  var json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8');
  return JSON5.parse(json);
}

module.exports = function (app) {
    
    
    // 监听http请求
  if (process.env.MOCK == "true") {
    
    
    app.get('/user/userinfo', function (rep, res) {
    
    
      // getJsonFile方法定义了读取json文件
      var json = getJsonFile('./userinfo.json5');
      // 将json传入Mock.mock方法中，生成的数据返回浏览器
      res.json(Mock.mock(json));
    })
  }
}

在全局创建vue.config.js，使用mock数据

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

在组件中使用mock数据

 mounted() {
    
    
    axios
      .get("/user/userinfo")
      .then((res) => {
    
    
        console.log(res);
      })
      .catch((err) => {
    
    
        console.log(err);
      });
  },

输出结果