- A+
所属分类：Web前端
Mock.js的简单使用
简述
Mock.js 是一款 模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。
功能
- 根据数据模板生成模拟数据。
- 模拟 Ajax 请求，生成并返回模拟数据。
- 基于 HTML 模板生成模拟数据。
使用场景
- 开发期间前端非常依赖后端的接口，总会苦苦等待后端接口出来才能继续开发。
- 开发纯前端并具备CURD功能的demo项目。
- ...
好处
- 只要前后端约定好数据结构，前端便可不受后端开发进度影响。
- 可拦截ajax请求，模拟返回数据，后期无须再修改ajax请求参数。
- 配置简单，拿来即用。
- ...
Vue项目中使用
安装
npm install --save-dev mockjs 引入
为了方便后期维护，建议将Mock.js单独配置
// main.js ... 省略Vue的引用 import './mock/mock.js' 配置
方式一：直接使用
// helloWorld.vue import Mock from 'mockjs' ... let data = Mock.mock({ 'list|1-10': [{ 'id|+1': 1 }] }) console.log(JSON.stringify(data)) 方式二：拦截ajax请求
文件路径: /src/mock/mock.js
// mock.js // 引入mockjs import Mock from 'mockjs' //延时200-600毫秒请求到数据 Mock.setup({ // timeout: '300', // 延时300ms timeout: '200-600' }) // 配置请求路径 const url = { tableDataOne: 'mock/mode1/tableDataOne' } // 配置请求拦截 Mock.mock(url.tableDataOne, { "data": { "mtime": "@datetime", // 随机生成日期时间 "score|1-800": 800, // 随机生成1-800的数字 "rank|1-100": 100, // 随机生成1-100的数字 "stars|1-5": 5, // 随机生成1-5的数字 "nickname": "@cname" // 随机生成中文名字 } }) // 拦截URL可以使用正则 Mock.mock(//mock/mode1/, { ... }) /* Mock获取请求参数 */ // GET url传参，必须使用正则，否则无法匹配 // axios.get(`/mock/mode1/get?name=123`) Mock.mock(//mock/mode1/get/, option => { console.log(option) // { "url": "/mock/mode1/get?name=123", "type": "GET", "body": null } ... }) // POST body传参 // axios.post('/mock/model/post', { name: 11 }) Mock.mock(//mock/mode1/post/, option => { console.log(option) // { "url": "/mock/mode1/post", "type": "POST", "body": "{name: 11}" } // 这里返回模拟数据时需要返回Mock对象，直接返回会原封不动输出，不会触发Mock语法 return Mock.mock({ msg: 'successful', outData: { "name": "@cname" // 随机生成中文名字 } }) } 语法规范
网上很多，很详细，我就不重复赘述了
