Mock.js的简单使用

Mock.js的简单使用

简述

Mock.js 是一款 模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。

功能

1. 根据数据模板生成模拟数据。
2. 模拟 Ajax 请求，生成并返回模拟数据。
3. 基于 HTML 模板生成模拟数据。

使用场景

1. 开发期间前端非常依赖后端的接口，总会苦苦等待后端接口出来才能继续开发。
2. 开发纯前端并具备CURD功能的demo项目。
3. ...

好处

1. 只要前后端约定好数据结构，前端便可不受后端开发进度影响。
2. 可拦截ajax请求，模拟返回数据，后期无须再修改ajax请求参数。
3. 配置简单，拿来即用。
4. ...

演示

Mockjs 模拟数据 demo

---

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" // 随机生成中文名字
    }
  })
}

语法规范

网上很多，很详细，我就不重复赘述了

Mock.js官方文档

mock.js语法规范 | 清汤饺子-简书