mockjs可以模拟数据，可以使我们更快的得到较为真实的数据，且可以拦截axios的接口调用，让我们的代码实现了调用接口的逻辑且得到模拟的数据，保存业务完整度。
使用步骤：
1、安装
npm i mockjs2、配置 src/mock/index.js
? ? ? ? 这里的setup是配置，跟vue3的setup不一样。
import Mock from 'mockjs'
// mock的配置
Mock.setup({
// 随机延时200-300毫秒，模拟网络延时
timeout: '500-1000'
})3、在?src/main.js中使用
import './mock'4、 模拟接口，拦截请求
? ? ? ? 拦截请求后的三个参数
// 拦截请求，
// 第一个参数：url，使用正则去匹配
// 第二个参数：请求方式
// 第三个参数： 生成数据的函数????????生成随机数据
// 单个数据
Mock.mock('@integer(0,7)')
// 对象数据
Mock.mock({
id: '@id',
name: '@ctitle(2,4)'
})例一：随机生成简单的数组对象数据
比如拦截 接口路径为 /my/test的接口路径，生成5个对象，里面的数据为随机的id和name。如果想要生成随机的英文名字，则要去掉@cname前面的c。这里的c代表生成中文
import Mock from 'mockjs'
// 拦截接口 /my/test
// 1. 接口地址路径规则，需要匹配到它
// 2. 请求方式
// 3. 返回数据（函数返回数据）
Mock.mock(/\/my\/test/, 'get', () => {
// 随机数据逻辑 目标：5条数据 [{id:'',name:''},...]
const arr = []
for (let i = 0; i < 5; i++) {
// arr.push(Mock.mock('@id'))
arr.push(Mock.mock({
id: '@id',
name: '@cname'
}))
}
return { msg: '获取数据成功', result: arr }
})????????当我们调用这个接口时生成的mock数据如下 ：
?????????例二：获取分页数据，前端传递每页多少数据，根据传递的数据Mock对应的数据条数返回给前端。
? ? ? ? 1、因为mock会拦截axios的接口调用。所以我们可以从config里面取出url，然后通过？把url分成两部分，后面的部分就是我们携带的参数部分。打印的结果如下，分别为页码，每页显示的数量和商品类型。后端根据pageSize去生成对应的数据条数。
page=1&pageSize=4&collectType=1? ? ? ? 2、这个时候我们就要取到?queryString 里面的pageSize。所以我们要先把queryString转化为对象的形式。
此时我们可以用node内置的包qs。他是不用
下载的，因为当webpack打包时，它会将项目中运用到的nodejs内置的包也打包进来。作为内置资源的一部分。
获取url里面的数据的方法也可以查看我的另一篇文章，不需要借助依赖
https://blog.csdn.net/m0_45219210/article/details/123377690?spm=1001.2014.3001.5502
用法：（1）先引入qs（2）通过qs.parse()方法去解析queryString。
下图是解析前和解析后的数据样式：
?3、解析的结果为queryObject ，如上图。此时我们可通过queryObject.pageSize去拿到需要mock的数据个数，显然我们的结果都字符串类型，我们可以通过js字符串的隐式转化将其转化为数字类型。即在前面添加+号。然后通过for循环将往数组里面追加（push）mock的数据。从代码可见生成了id，name，desc（描述），price（价格）和picture（图片）。其中图片mock生成的图片比较丑。这里是一个url后面随机生成了一个1到9的整型数据，因为这个是后台的图片url。1到8分别代表9张不同的图片。最后把结果返回出去。
import Mock from 'mockjs'
import qs from 'qs'
// 基本配置
Mock.setup({
// 随机延时200-300毫秒，模拟网络延时
timeout: '200-300'
})
// 模拟 我的收藏
Mock.mock(/\/member\/collect/, 'get', config => {
const queryString = config.url.split('?')[1]
const queryObject = qs.parse(queryString)
const items = []
for (let i = 0; i < +queryObject.pageSize; i++) {
items.push(Mock.mock({
id: '@id',
name: '@ctitle(10,20)',
desc: '@ctitle(4,10)',
price: '@float(100,200,2,2)',
// http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_7.jpg
picture: `http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_${Mock.mock('@integer(1,8)')}.jpg`
}))
}
return {
msg: '获取收藏商品成功',
result: {
counts: 35,
pageSize: +queryObject.pageSize,
page: +queryObject.page,
items
}
}
})生成是数据如下 。前端调用/member/collect时就会被mock拦截，然后得到下图所示的数据。前端通过data.result.items拿到数据去渲染。
此时我们就完成了mock数据的全部过程，当后端接口实现时。我们可以 注掉上图第三步
src/main.js文件里面引入mock的那一行代码，就会将请求发往后端。这个时候如果数据正常。我们前端的业务就已经完成了。不需要更改其他代码。
