参考文献 https://github.com/nuysoft/Mock/wiki
mock.js 的用处
- 前后端分离 :让前端攻城师独立于后端进行开发。
- 增加单元测试的真实性 :通过随机数据,模拟各种场景。
- 开发无侵入 :不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。
- 用法简单 :符合直觉的接口。
- 数据类型丰富 :支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
- 方便扩展 :支持支持扩展更多数据类型,支持自定义函数和正则。
mock.js 语法
Mock.js 的语法规范包括两部分:
- 数据模板定义规范(Data Template Definition,DTD)
- 数据占位符定义规范(Data Placeholder Definition,DPD)
数据模板定义规范 DTD
数据模板中的每个属性由 3 部分构成:** 属性名、生成规则、属性值:**
// 属性名 name
// 生成规则 rule
// 属性值 value
'name|rule': value
Mock.Random
方法
Mock.Random 提供的完整方法(占位符)如下:
** Type ** | ** Method** |
---|---|
Basic | boolean, natural, integer, float, character, string, range, date, time, datetime, now |
Image | image, dataImage |
Color | color |
Text | paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle |
Name | first, last, name, cfirst, clast, cname |
Web | url, domain, email, ip, tld |
Address | area, region |
Helper | capitalize, upper, lower, pick, shuffle |
Miscellaneous | guid, id |
安装
npm install mockjs -S
引入mockjs
在src文件夹新建一个文件 mock.js
// 引入mockjs
const Mock = require('mockjs');
// 获取 mock.Random 对象
const Random = Mock.Random;
main.js
// 引入mockjs
require('./mock.js')
模拟get、post请求
// 引入mockjs
const Mock = require('mockjs');
// 获取 mock.Random 对象
const Random = Mock.Random;
// mock一组数据
const data1 = function () {
let articles = [];
for (let i = 0; i < 3; i++) {
let newArticleObject = {
timestamp: Random.id(), // 指示生成的id字符串
shop: Random.cword(5, 10), // Random.cword() 指示生成的长度5到10个字的文字
image: Random.image('454x340', 'Demo'), //Random.image(size,text )生成一张图片
result: Random.cword(3, 8) // Random.cword()指示生成的长度3到8个字的文字
}
articles.push(newArticleObject);
}
return {
result: articles
}
}
// 输出结果
// Mock.mock( url, post/get , 返回的数据)
//get请求
Mock.mock('/result', 'get', data1);
//有参数的get请求
Mock.mock(RegExp('/result/' + '.*'), 'get', data1);
//post请求
Mock.mock('/result', /\.json/, 'post',data1 )