1.前言
最近面试发现之前团队协同合作的项目没有mock数据难以向面试官直接展示，所以迟到得来速学一下mockjs。
参考视频：mockJs 妈妈再也不用担心我没有后端接口啦_哔哩哔哩_bilibili
一开始查阅了一些资料，先是看了下EasyMock，有点没搞懂是怎么用的
轻松模拟 (presstime.cn)
所以最后对比之下还是决定使用mockjs。
首先介绍一下mock数据的好处，除了前端可以在不依赖后端的情况下展示整个项目运行流程之外，还有很多其他好处。
官方给出的作用：
直观来说就是
1.前后端并行开发
2.前端独立运行
Mockjs官方文档：Mock.js (mockjs.com)
2.安装配置
npm i mockjs3.mock数据初体验
创建一个test.js文件
const { mock } = require("mockjs");
let data = mock({
"data": "@cname()",
"age": "@integer(1,100)",
"addr": "@city(true)",
"email": "@email(qq.com)",
})
console.log(data)打开终端，运行node .\test.js命令
4.数据模板定义规范
每个属性组成部分：属性名 生成规则 属性值
”属性名|生成规则“：属性值1️⃣七种生成规则
'name|min-max': value'name|count': value'name|min-max.dmin-dmax': value'name|min-max.dcount': value'name|count.dmin-dmax': value'name|count.dcount': value'name|+step': value
-
属性名 和 生成规则 之间用竖线
|分隔。 -
生成规则 是可选的。
-
生成规则 的 含义 需要依赖 属性值的类型 才能确定。
-
属性值 中可以含有
@占位符。 -
属性值 还指定了最终值的初始值和类型。
具体示例可以看官方文档。Mock.js (mockjs.com)
2️⃣数据占位符
占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。
@占位符
@占位符(参数 [, 参数])占位符 引用的是 Mock.Random 中的方法,可以直接导进去。
ctrl+点击random可以查看具体实现方法
5. 拦截axios请求
拦截axios请求之后，实际响应的数据是mock里面的数据，mock拦截请求的原理加单理解就是把原生的XHR重写了，变成自己的。
所以在开启mock之后，被拦截的请求是没有真实发送出去的，在网络请求中是看不到的。
几种拦截写法
1️⃣完整匹配
2️⃣methos
3️⃣正则
4️⃣函数模式
5️⃣代理增删查改
6.在实际项目中使用
基本目录结构
mock相关文件
可以按照接口模块，分开定义对应的mock数据文件
注意填入正确的拦截路径。
main文件全局配置
只需要在main.js中引入mock文件夹的index文件就可以了
只需要注释掉main.js中对mockjs文件的导入，就可以使用真正的后端接口，开启就是使用mock地址。
还可以再灵活一点，把mock/index的入口变成函数，开启mock就调用做个函数，不开启就不调用。
成功拦截axios并返回mock数据！
