一剩岳、說(shuō)明

mock.js 是一款模擬數(shù)據(jù)生成器，幫助前端人員獨(dú)立于后端進(jìn)行開發(fā)反粥，幫助編寫單元測(cè)試卢肃， 前后端合作期間，后端人員需給到需開發(fā)的接口名稱才顿、返回的數(shù)據(jù)格式莫湘，前端人員根據(jù)這些數(shù)據(jù)格式，編寫mock郑气，可直接用于開發(fā)幅垮，編寫頁(yè)面交互。

二尾组、主要功能：

根據(jù)數(shù)據(jù)模板生成模擬數(shù)據(jù) 攔截真實(shí)的ajax請(qǐng)求忙芒，并模擬Ajax請(qǐng)求，生成并返回模擬數(shù)據(jù) 基于HTMML模板生成模擬數(shù)據(jù)

三讳侨、安裝&使用

• 新項(xiàng)目安裝使用呵萨，需要按1-3整個(gè)流程
• 項(xiàng)目使用，可直接看以下兩個(gè)子流程 1跨跨、引用模塊的mock數(shù)據(jù) （2.1） 2潮峦、編寫生成模擬數(shù)據(jù)的用例 （3.3）

1囱皿、配置環(huán)境變量，僅開發(fā)環(huán)境才使用

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使用

注意：項(xiàng)目已經(jīng)做配置嘱腥，只需要看

// main.js 文件： 引入寫入的mock文件夾
process.env.Mock && require('./api/mock')

// src/api/mock/index.js 文件（參考seller）
// 1、引用不同模塊的mock數(shù)據(jù)
const itemPresale = require('./itemPresale/index')

// 2拘悦、統(tǒng)一配置mock
    Mock.setup({
        timeout: '200-600'
    })
// 3齿兔、根據(jù)模塊是否開啟數(shù)據(jù)模擬，使用Mock.mock(),生成模擬數(shù)據(jù)
    for (const i of mocks) {
      if (!i.open) {
        continue
      }
      console.log(Mock)
      Mock.mock(new RegExp(i.url), i.type, XHRExpressReq(i.response))
    }

3础米、生成模擬數(shù)據(jù)的用例

• 可參考:項(xiàng)目中的src/api/mock/itemPresale/index.js

五分苇、Mock.js 的語(yǔ)法規(guī)范

官方文檔：http://mockjs.com/0.1/ Mock.js 的語(yǔ)法規(guī)范包括兩部分：

數(shù)據(jù)模板定義（Data Temaplte Definition，DTD） 數(shù)據(jù)占位符定義（Data Placeholder Definition屁桑，DPD）

1组砚、數(shù)據(jù)模板，由3部分構(gòu)成

    'name|rule':value
    name：屬性名
    rule ：生成規(guī)則
    vaule：屬性值

• 屬性名 和 生成規(guī)則 之間用 | 分隔掏颊。
• 生成規(guī)則 是可選的糟红。
• 生成規(guī)則 有 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

• 生成規(guī)則 的 含義 需要依賴 屬性值 才能確定。
• 屬性值 中可以含有 @占位符乌叶。
• 屬性值 還指定了最終值的初始值和類型盆偿。

2、數(shù)據(jù)占位符定義

占位符 只是在屬性值字符串中占個(gè)位置准浴，并不出現(xiàn)在最終的屬性值中事扭。占位符 的格式為：

@占位符
@占位符(參數(shù) [, 參數(shù)])

• 用 @ 來(lái)標(biāo)識(shí)其后的字符串是 占位符。
• 占位符 引用的是 Mock.Random 中的方法乐横。
• 通過(guò) Mock.Random.extend() 來(lái)擴(kuò)展自定義占位符求橄。
• 占位符 也可以引用 數(shù)據(jù)模板 中的屬性。
• 占位符 會(huì)優(yōu)先引用 數(shù)據(jù)模板 中的屬性葡公。

六罐农、Mock.Random工具類

用于生成各種隨機(jī)數(shù)據(jù) 常用格式

var random = Mock.Random
Randmon.ctitle(3, 10)  // 嘻哈分大
Mock.mock('@ctitle(3, 10)')  // 嘻哈分大
Mock.mock({ name: '@ctitle(3, 10)'})  // { name: '嘻哈分大' }

常用基礎(chǔ)數(shù)據(jù)模板

1、Boolean
    Random.boolean(min, max, cur)
    Random.boolean(1, 9, true) // 返回true的概率為90%

2催什、String
    Random.character(pool) // 返回隨機(jī)的一個(gè)字符
    Random.string(pool, min, max) // 返回隨機(jī)字符串
    Random.title(len) // 隨機(jī)生成一句標(biāo)題
    Random.ctitle(len) // 隨機(jī)生成一句中文標(biāo)題
    Random.url() // 瑞吉生成一個(gè)URL
    Random.area() // 隨機(jī)生成一個(gè)（中國(guó)）大區(qū)
    Random.region() // 隨機(jī)生成一個(gè)（中國(guó)）屎鳌（或直轄市、自治區(qū)蒲凶、特別行政區(qū)）
    Random.id() // 隨機(jī)生成一個(gè) 18 位身份證气筋。

3、Number
    Random.natural(min, max) // 返回一個(gè)隨機(jī)的自然數(shù)（大于等于 0 的整數(shù)）旋圆。
    Random.integer(min, max) // 返回一個(gè)隨機(jī)的整數(shù)

    Random.float(min, max, dmin, dmax) // 返回一個(gè)隨機(jī)的浮點(diǎn)數(shù)
    eg. Random.float(60, 100, 0, 2) // 返回：85.63

Array
    Random.range(start, stop, step) // 返回一個(gè)整形的數(shù)組
    eg. Random.range(1, 10, 2) // 返回 [1, 3, 5, 7, 9]

Date
    Random.date(format) // 返回一個(gè)隨機(jī)的日期字符串(yyyy-MM-dd)
    Random.time(format) // 返回一個(gè)隨機(jī)的時(shí)間字符串(HH:mm:ss)
    Random.datetime(format) // 返回一個(gè)隨機(jī)的日期和時(shí)間字符串 (yyyy-MM-dd HH:mm:ss)
    Random.image(size, background, foreground, format, text) // 生成一個(gè)隨機(jī)的圖片地址 
    eg. Random.image() // 返回：http://dummyimage.com/125x125

數(shù)據(jù)模擬

// 實(shí)例
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)'
    }]
}

六宠默、后期優(yōu)化

1、對(duì)傳遞的參數(shù)解碼灵巧，并使用post中的參數(shù)搀矫，對(duì)原始數(shù)據(jù)過(guò)濾 2或南、mock-service 可用于局部熱加載

官方文檔：http://mockjs.com/0.1/#mock
官方github：https://github.com/nuysoft/Mock/wiki