mockjs学习 - 技术栈

1.前言

最近面试发现之前团队协同合作的项目没有mock数据难以向面试官直接展示，所以迟到得来速学一下mockjs。

参考视频：mockJs 妈妈再也不用担心我没有后端接口啦_哔哩哔哩_bilibili

一开始查阅了一些资料，先是看了下EasyMock，有点没搞懂是怎么用的

轻松模拟 (presstime.cn)

所以最后对比之下还是决定使用mockjs。

首先介绍一下mock数据的好处，除了前端可以在不依赖后端的情况下展示整个项目运行流程之外，还有很多其他好处。

官方给出的作用：

直观来说就是

1.前后端并行开发

2.前端独立运行

Mockjs官方文档：Mock.js (mockjs.com)

2.安装配置

javascript 复制代码

npm i mockjs

3.mock数据初体验

创建一个test.js文件

javascript 复制代码

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.数据模板定义规范

每个属性组成部分：属性名生成规则属性值

javascript 复制代码

"属性名|生成规则"：属性值

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️⃣数据占位符

占位符只是在属性值字符串中占个位置，并不出现在最终的属性值中。

javascript 复制代码

@占位符
@占位符(参数 [, 参数])

占位符引用的是 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数据！