mock大法好，让前端从项目中更加的独立，mock的基本使用和介绍

mock的使用场景

当前端工程师需要独立于后端并行开发时,后端接口还没有完成,那么前端怎么获取数据？

这时可以考虑前端搭建web server自己模拟假数据,这里我们选第三方库mockjs用来生成随机数据,拦截 Ajax 请求。

下面是mockjs具有的特点

场景1.在vue项目中使用mock.js

步骤1. 搭建测试项目

步骤1.1 创建项目

命令:

vue create mock-demo

步骤1.2 安装依赖

命令:

# 使用axios发送ajax
cnpm install axios --save
# 使用mockjs产生随机数据
cnpm install mockjs --save-dev
# 使用json5解决json文件,无法添加注释问题
cnpm install json5 --save-dev

截图:

步骤2.学习mockjs

新建mock文件夹,新建testMockjs.js
mockjs语法定义

const Mock = require('mockjs');//mockjs 导入依赖模块
var id = Mock.mock('@id')//得到随机的id,字符串
console.log(Mock.mock('@id'), typeof id)

var obj = Mock.mock({
   
    id: "@id()",//得到随机的id,对象
    username: "@cname()",//随机生成中文名字
    date: "@date()",//随机生成日期
    avatar: "@image('200x200','red','#fff','avatar')",//生成图片,参数:size, background, foreground, text
    description: "@paragraph()",//描述
    ip: "@ip()",//IP地址
    email: "@email()"//email
})
console.log(obj)

步骤3.学习json5

json文件,中如果说存在注释文件和编辑器都会报错,我们采用json5格式来让json格式可以存在注释

报错截图:

步骤3.1 编辑器安装json5扩展

步骤3.2 引入json5库来解析json5格式

在mock文件夹下,新建testJSON5.js

const fs = require('fs');
const path = require('path');
const JSON5 = require('json5');
//读取json文件
function getJsonFile(filePath) {
   
    //读取指定json文件
    var json = fs.readFileSync(path.resolve(__dirname,filePath), 'utf-8');
    //解析并返回
    return JSON5.parse(json);
}
var json = getJsonFile('./userInfo.json5');
console.log('json', json)

步骤4.mock和vue-cli结合

步骤4.1 新建index.js

在mock文件夹下,新建index.js

const fs = require('fs');
const path = require('path');
const Mock = require('mockjs');//mockjs 导入依赖模块
const JSON5 = require('json5');
//读取json文件
function<