一、说明
mock.js 是一款模拟数据生成器，帮助前端人员独立于后端进行开发，帮助编写单元测试， 前后端合作期间，后端人员需给到需开发的接口名称、返回的数据格式，前端人员根据这些数据格式，编写mock，可直接用于开发，编写页面交互。
二、主要功能：
根据数据模板生成模拟数据 拦截真实的ajax请求，并模拟Ajax请求，生成并返回模拟数据 基于HTMML模板生成模拟数据
三、安装&使用
- 新项目安装使用，需要按1-3整个流程
- 项目使用，可直接看以下两个子流程 1、引用模块的mock数据 （2.1） 2、编写生成模拟数据的用例 （3.3）
1、配置环境变量，仅开发环境才使用
npm install mockjs --save-dev
// config/dev.env.js 文件
module.exports = merge(prodEnv, {
Mock: true
})
// config/prod.env.js 文件
module.exports = merge(prodEnv, {
Mock: false
})
2、mock使用
注意：项目已经做配置，只需要看
// main.js 文件： 引入写入的mock文件夹
process.env.Mock && require('./api/mock')
// src/api/mock/index.js 文件（参考seller）
// 1、引用不同模块的mock数据
const itemPresale = require('./itemPresale/index')
// 2、统一配置mock
Mock.setup({
timeout: '200-600'
})
// 3、根据模块是否开启数据模拟，使用Mock.mock(),生成模拟数据
for (const i of mocks) {
if (!i.open) {
continue
}
console.log(Mock)
Mock.mock(new RegExp(i.url), i.type, XHRExpressReq(i.response))
}
3、生成模拟数据的用例
- 可参考:项目中的src/api/mock/itemPresale/index.js
五、Mock.js 的语法规范
官方文档：http://mockjs.com/0.1/ Mock.js 的语法规范包括两部分：
数据模板定义（Data Temaplte Definition，DTD） 数据占位符定义（Data Placeholder Definition，DPD）
1、数据模板，由3部分构成
'name|rule':value
name：属性名
rule ：生成规则
vaule：属性值
- 属性名 和 生成规则 之间用 | 分隔。
- 生成规则 是可选的。
- 生成规则 有 7 种格式：
'name|min-max': value
'name|count': value
'name|min-max.dmin-dmax': value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
'name|+step': value
- 生成规则 的 含义 需要依赖 属性值 才能确定。
- 属性值 中可以含有 @占位符。
- 属性值 还指定了最终值的初始值和类型。
2、数据占位符定义
占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。占位符 的格式为：
@占位符
@占位符(参数 [, 参数])
- 用 @ 来标识其后的字符串是 占位符。
- 占位符 引用的是 Mock.Random 中的方法。
- 通过 Mock.Random.extend() 来扩展自定义占位符。
- 占位符 也可以引用 数据模板 中的属性。
- 占位符 会优先引用 数据模板 中的属性。
六、Mock.Random工具类
用于生成各种随机数据 常用格式
var random = Mock.Random
Randmon.ctitle(3, 10) // 嘻哈分大
Mock.mock('@ctitle(3, 10)') // 嘻哈分大
Mock.mock({ name: '@ctitle(3, 10)'}) // { name: '嘻哈分大' }
常用基础数据模板
1、Boolean
Random.boolean(min, max, cur)
Random.boolean(1, 9, true) // 返回true的概率为90%
2、String
Random.character(pool) // 返回随机的一个字符
Random.string(pool, min, max) // 返回随机字符串
Random.title(len) // 随机生成一句标题
Random.ctitle(len) // 随机生成一句中文标题
Random.url() // 瑞吉生成一个URL
Random.area() // 随机生成一个（中国）大区
Random.region() // 随机生成一个（中国）省（或直辖市、自治区、特别行政区）
Random.id() // 随机生成一个 18 位身份证。
3、Number
Random.natural(min, max) // 返回一个随机的自然数（大于等于 0 的整数）。
Random.integer(min, max) // 返回一个随机的整数
Random.float(min, max, dmin, dmax) // 返回一个随机的浮点数
eg. Random.float(60, 100, 0, 2) // 返回：85.63
Array
Random.range(start, stop, step) // 返回一个整形的数组
eg. Random.range(1, 10, 2) // 返回 [1, 3, 5, 7, 9]
Date
Random.date(format) // 返回一个随机的日期字符串(yyyy-MM-dd)
Random.time(format) // 返回一个随机的时间字符串(HH:mm:ss)
Random.datetime(format) // 返回一个随机的日期和时间字符串 (yyyy-MM-dd HH:mm:ss)
Random.image(size, background, foreground, format, text) // 生成一个随机的图片地址
eg. Random.image() // 返回：http://dummyimage.com/125x125
数据模拟
// 实例
let data = {
'skuList|1-3': [{ //
id: '@increment',
presale_config_id: '3',
item_id: '@integer(1, 1000)',
sku_id: '@integer(1, 1000)',
presale_price: '@float(1, 1000, 0, 2)',
presale_cost_price: '@float(1, 1000, 0, 2)',
init_stock_num: '@integer(1, 1000)',
stock_num: '@integer(1, 1000)',
sale_num: '@integer(1, 1000)',
org_cost_price: '@float(1, 1000, 0, 2)',
org_price: '@float(1, 1000, 0, 2)',
properties: '@ctitle(3, 10)',
total_people_num: '@integer(1, 1000)',
total_trade_num: '@integer(1, 1000)',
total_amount: '@float(1, 1000, 0, 2)',
total_cost_price: '@float(1, 1000, 0, 2)'
}]
}
六、后期优化
1、对传递的参数解码，并使用post中的参数，对原始数据过滤 2、mock-service 可用于局部热加载
官方文档：http://mockjs.com/0.1/#mock
官方github：https://github.com/nuysoft/Mock/wiki
网友评论