mockjs简介和应用

一、说明

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