Vue3项目 --- Mock.js模拟数据测试

1. npm 安装Mock.js

npm install mockjs

2. Main.js中引入Mock

import Mock from 'mockjs'
require('./mock')
createApp(App).use(Mock).mount('#app')

3. 在src目录下新建一个 mock目录并创建index.js文件，用来配置mock

// 配置 mock 文件
// 首先引入Mock
const Mock = require('mockjs');// 设置拦截ajax请求的相应时间
Mock.setup({timeout: '200-600'
});let configArray = [];// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/);
files.keys().forEach((key) => {if (key === './index.js') return;configArray = configArray.concat(files(key).default);
});// 注册所有的mock服务
configArray.forEach((item) => {for (let [path, target] of Object.entries(item)) {let protocol = path.split('|');Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);}
});

4. 在mock目录下在创建一个js文件，我取名为article.js，用来配置自己在项目所需要的模拟数据

let articleList = {code: 200,msg: 'success',data: { //数据total: 100, //模拟数据的页数，分页功能。 100条'rows|8': [{ //模拟每页有多少条数据。 每页8条。id: '@guid', //每页数据都是有id的。 随机生成数据. @是占位符,随机生成后不会重复。title: '@ctitle',  //前缀加 c 的意思为随机生成中文，否则是英文author: "@cname",  'job | 1': ['Web前端','Java工程师','架构工程师','数据库管理员'] // | 意思为在数组里随机抽取一个}]}
};
export default {'get|/article/list': articleList
}

5. 如果需要少量数据数据时，可以换种写法，比如

let articleList = [{id: 1,title: 'df',author: 'df',job: 'Web前端'
},{id: 2,title: 'fd',author: 'fd',job: 'Java工程师'
}]export default {'get|/article/List':  option => {return {code: 200,msg: 'success',data: articleList};}

6. 也可以使用template返回

let articleList = {code: 200,msg: 'success',data: [{id: 1,title: 'zs',author: '23',job: '前端工程师'},{id: 2,name: 'ww',age: '24',job: '后端工程师'}]
};
let demoList2 = [{id: 1,name: 'zs',age: '23',job: '前端工程师'
},{id: 2,name: 'ww',age: '24',job: '后端工程师'
}];
export default {'get|/article/List': articleList,// 也可以这样写// 官方解释为：记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。'get|/article/List': (option) => {// 可以在这个地方对demoList2进行一系列操作，例如增删改// option 指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性return {code: 200,msg: 'success',data: articleList};}
}