一纲辽、mockjs介紹

官網(wǎng)
https://github.com/nuysoft/Mock/wiki/Getting-Started

一、為什么使用mockjs

在做開發(fā)時(shí)您觉,當(dāng)后端的接口還未完成拙寡,前端為了不影響工作效率,手動(dòng)模擬后端接口琳水,

1.我們可以使用json文件來(lái)模擬后臺(tái)數(shù)據(jù)肆糕,但比較局限般堆,無(wú)法模擬數(shù)據(jù)的增刪改查
2.使用json-server模擬,但不能隨機(jī)生成所需數(shù)據(jù)
3.使用mockjs模擬后端接口诚啃,可隨機(jī)生成所需數(shù)據(jù)淮摔,可模擬對(duì)數(shù)據(jù)的增刪改查

二、mock優(yōu)點(diǎn)

1.前后端分離始赎,
2.可隨機(jī)生成大量的數(shù)據(jù)
3.用法簡(jiǎn)單
4.數(shù)據(jù)類型豐富
5.可擴(kuò)展數(shù)據(jù)類型
6.在已有接口文檔的情況下和橙,我們可以直接按照接口文檔來(lái)開發(fā),將相應(yīng)的字段寫好造垛,在接口完成 之后魔招,只需要改變url地址即可。

三五辽、mock使用

npm install mockjs --save-dev
// 引入 Mock
var Mock = require('mockjs')

// 定義數(shù)據(jù)類型
var data = Mock.mock({
  // 20條數(shù)據(jù)
  "data|20": [{
    // 商品種類
    "goodsClass": "女裝",
    // 商品Id
    "goodsId|+1": 1,
    //商品名稱
    "goodsName": "@ctitle(10)",
    //商品地址
    "goodsAddress": "@county(true)",
    //商品等級(jí)評(píng)價(jià)★
    "goodsStar|1-5": "★",
    //商品圖片
    "goodsImg": "@Image('100x100','@color','小甜甜')",
    //商品售價(jià)
    "goodsSale|30-500": 30

  }]
})
// 輸出結(jié)果隨機(jī)生成的數(shù)據(jù)(node index.js)
 console.log(data);

四办斑、mockjs的數(shù)據(jù)類型 及 語(yǔ)法規(guī)范

1、Mock.Random

Mock.Random是一個(gè)工具類奔脐,用于生成各種隨機(jī)數(shù)據(jù)俄周。
Mock.Random 的方法在數(shù)據(jù)模板中稱為『占位符』,書寫格式為 @占位符(參數(shù) [, 參數(shù)])

2Mock.Random 提供的完整方法(占位符)如下

類型 方法
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

3.定義數(shù)據(jù)類型髓迎,詳情見(jiàn)官方文檔

// 引入 Mock
var Mock = require('mockjs')

// 定義數(shù)據(jù)類型
var data = Mock.mock({
  // 20條數(shù)據(jù)
  "data|3": [{
    // 商品種類
    "goodsClass": "女裝",
    // 商品Id
    "goodsId|+1": 1,
    //商品名稱
    "goodsName": "@ctitle(10)",
    //商品地址
    "goodsAddress": "@county(true)",
    //商品等級(jí)評(píng)價(jià)★
    "goodsStar|1-5": "★",
    //商品圖片
    "goodsImg": "@Image('100x100','@color','小甜甜')",
    //商品售價(jià)
    "goodsSale|30-500": 30,

    // 郵箱:
    "email": "@email",
    // 顏色
    "color": "@color",

    // name
    "name": "@name",

    //img,參數(shù)1:背景色峦朗,參2:前景色,參3:圖片的格式排龄,默認(rèn)png波势,參4:圖片上的文字

    "img": "@image('100*100','@color')",
    //英文文本(句子)參1:句子的個(gè)數(shù),參2:句子的最小個(gè)數(shù)  參3:句子的最大個(gè)數(shù)橄维,沒(méi)有參1時(shí)尺铣,參2參3才會(huì)生效
    "Etext":"@paragraph(1,1,3)",

    //中文文本(句子)參1:句子的個(gè)數(shù),參2:句子的最小個(gè)數(shù)  參3:句子的最大個(gè)數(shù)争舞,沒(méi)有參1時(shí)凛忿,參2參3才會(huì)生效
    "Ctext":"@cparagraph(1,1,3)",

    //中國(guó)大區(qū)
    "cregion":"@region",
    // 省
    "cprovince":"@province",
    //市
    "ccity":"@city",
    //省 + 市
    "ss":"@city(true)",
    //縣
    "country":"@county",
    //省市縣
    "countrysx":"@county(true)",
    //郵政編碼
    "code":"@zip"

  }]
})

// 輸出結(jié)果
// console.log(data);

4.mockjs語(yǔ)法規(guī)范

數(shù)據(jù)模板中的每個(gè)屬性由 3 部分構(gòu)成:屬性名、生成規(guī)則竞川、屬性值:
// 屬性名   name
// 生成規(guī)則 rule
// 屬性值   value
'name|rule': value

注意:
屬性名 和 生成規(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
//屬性值自動(dòng)加 1委乌,初始值為 `number` 'name|+step': value    

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

1. 屬性值是字符串 String

  1. 'name|min-max': string

    通過(guò)重復(fù) string 生成一個(gè)字符串戈咳,重復(fù)次數(shù)大于等于 min,小于等于 max

  2. 'name|count': string

    通過(guò)重復(fù) string 生成一個(gè)字符串著蛙,重復(fù)次數(shù)等于 count删铃。

2. 屬性值是數(shù)字 Number

  1. 'name|+1': number

    屬性值自動(dòng)加 1,初始值為 number册踩。

  2. 'name|min-max': number

    生成一個(gè)大于等于 min泳姐、小于等于 max 的整數(shù),屬性值 number 只是用來(lái)確定類型暂吉。

  3. 'name|min-max.dmin-dmax': number

    生成一個(gè)浮點(diǎn)數(shù)胖秒,整數(shù)部分大于等于 min、小于等于 max慕的,小數(shù)部分保留 dmindmax 位阎肝。

3. 屬性值是布爾型 Boolean

  1. 'name|1': boolean

    隨機(jī)生成一個(gè)布爾值,值為 true 的概率是 1/2肮街,值為 false 的概率同樣是 1/2风题。

  2. 'name|min-max': value

    隨機(jī)生成一個(gè)布爾值,值為 value 的概率是 min / (min + max)嫉父,值為 !value 的概率是 max / (min + max)沛硅。

4. 屬性值是對(duì)象 Object

  1. 'name|count': object

    從屬性值 object 中隨機(jī)選取 count 個(gè)屬性。

  2. 'name|min-max': object

    從屬性值 object 中隨機(jī)選取 minmax 個(gè)屬性绕辖。

5. 屬性值是數(shù)組 Array

  1. 'name|1': array

    從屬性值 array 中隨機(jī)選取 1 個(gè)元素摇肌,作為最終值。

  2. 'name|+1': array

    從屬性值 array 中順序選取 1 個(gè)元素仪际,作為最終值围小。

  3. 'name|min-max': array

    通過(guò)重復(fù)屬性值 array 生成一個(gè)新數(shù)組,重復(fù)次數(shù)大于等于 min树碱,小于等于 max肯适。

  4. 'name|count': array

    通過(guò)重復(fù)屬性值 array 生成一個(gè)新數(shù)組,重復(fù)次數(shù)為 count成榜。

6. 屬性值是函數(shù) Function

  1. 'name': function

    執(zhí)行函數(shù) function框舔,取其返回值作為最終的屬性值,函數(shù)的上下文為屬性 'name' 所在的對(duì)象赎婚。

7. 屬性值是正則表達(dá)式 RegExp

  1. 'name': regexp

    根據(jù)正則表達(dá)式 regexp 反向生成可以匹配它的字符串雨饺。用于生成自定義格式的字符串。

    Mock.mock({
        'regexp1': /[a-z][A-Z][0-9]/,
        'regexp2': /\w\W\s\S\d\D/,
        'regexp3': /\d{5,10}/
    })
    // =>
    {
        "regexp1": "pJ7",
        "regexp2": "F)\fp1G",
        "regexp3": "561659409"
    }
    

四惑淳、 Mock.setup()

Mock.setup( settings )

配置攔截 Ajax 請(qǐng)求時(shí)的行為。支持的配置項(xiàng)有:timeout
指定被攔截的 Ajax 請(qǐng)求的響應(yīng)時(shí)間饺窿,單位是毫秒歧焦。
值可以是正整數(shù),例如 400,表示 400 毫秒 后才會(huì)返回響應(yīng)內(nèi)容绢馍;
也可以是橫杠 '-' 風(fēng)格的字符串向瓷,例如 '200-600',表示響應(yīng)時(shí)間介于 200 和 600 毫秒之間舰涌。默認(rèn)值是'10-100'猖任。

  Mock.setup({
    timeout: 400
})
Mock.setup({
    timeout: '200-600'
})
目前,接口 Mock.setup( settings ) 僅用于配置 Ajax 請(qǐng)求瓷耙,將來(lái)可能用于配置 Mock 的其他行為朱躺。

五、Mock.Random 擴(kuò)展方法

// 引入 Mock
var Mock = require('mockjs')

var random = Mock.Random;

//擴(kuò)展數(shù)據(jù)模板
random.extend({
  type: function (index:number) {
    const types = ['products', 'industryApp', 'solution', 'experts'];
    return this.pick(types[index])
  }
});

// 定義數(shù)據(jù)類型
const  menuSource:Array<any> = [];
 menuSource[0] = Mock.mock({
  "type": "@type(0)",
   'data|3-4':[{
     'id|+1': 1,
     name: "@ctitle( 4,6)",
     "childs|5-10": [{
       'id|+1': 1,
       name: "@ctitle(4,6)",
     }]
   }]
});
// 輸出結(jié)果
 console.log(data);

六搁痛、mockjs獲取前端傳遞的數(shù)據(jù)

axios({
      method: "get",
      url: "/getGoods",
      data: {
        id:2
      }
    }).then(data => {
      //成功的回調(diào)函數(shù)长搀,返回的是增加的數(shù)據(jù)
      console.log(data.data.data);
      this.url = data.data.data[0].goodsImg
    });
  }

  Mock.mock("/getGoods", "get", (config) => {
  console.log(config);
  return data;
})

###mockjs可以通過(guò)option.body獲取前端傳遞的數(shù)據(jù)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市鸡典,隨后出現(xiàn)的幾起案子源请,更是在濱河造成了極大的恐慌,老刑警劉巖彻况,帶你破解...
    沈念sama閱讀 221,406評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件谁尸,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡纽甘,警方通過(guò)查閱死者的電腦和手機(jī)良蛮,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,395評(píng)論 3 398
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)贷腕,“玉大人背镇,你說(shuō)我怎么就攤上這事≡笊眩” “怎么了瞒斩?”我有些...
    開封第一講書人閱讀 167,815評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)涮总。 經(jīng)常有香客問(wèn)我胸囱,道長(zhǎng),這世上最難降的妖魔是什么瀑梗? 我笑而不...
    開封第一講書人閱讀 59,537評(píng)論 1 296
  • 正文 為了忘掉前任烹笔,我火速辦了婚禮,結(jié)果婚禮上抛丽,老公的妹妹穿的比我還像新娘谤职。我一直安慰自己,他們只是感情好亿鲜,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,536評(píng)論 6 397
  • 文/花漫 我一把揭開白布允蜈。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪饶套。 梳的紋絲不亂的頭發(fā)上漩蟆,一...
    開封第一講書人閱讀 52,184評(píng)論 1 308
  • 那天,我揣著相機(jī)與錄音妓蛮,去河邊找鬼怠李。 笑死,一個(gè)胖子當(dāng)著我的面吹牛蛤克,可吹牛的內(nèi)容都是我干的捺癞。 我是一名探鬼主播,決...
    沈念sama閱讀 40,776評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼咖耘,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼翘簇!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起儿倒,我...
    開封第一講書人閱讀 39,668評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤版保,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后夫否,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體彻犁,經(jīng)...
    沈念sama閱讀 46,212評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,299評(píng)論 3 340
  • 正文 我和宋清朗相戀三年凰慈,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了汞幢。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,438評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡微谓,死狀恐怖森篷,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情豺型,我是刑警寧澤仲智,帶...
    沈念sama閱讀 36,128評(píng)論 5 349
  • 正文 年R本政府宣布,位于F島的核電站姻氨,受9級(jí)特大地震影響钓辆,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜肴焊,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,807評(píng)論 3 333
  • 文/蒙蒙 一前联、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧娶眷,春花似錦似嗤、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,279評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)壳咕。三九已至,卻和暖如春顽馋,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背幌羞。 一陣腳步聲響...
    開封第一講書人閱讀 33,395評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工寸谜, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人属桦。 一個(gè)月前我還...
    沈念sama閱讀 48,827評(píng)論 3 376
  • 正文 我出身青樓熊痴,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親聂宾。 傳聞我的和親對(duì)象是個(gè)殘疾皇子果善,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,446評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容

  • 學(xué)習(xí)目的 ①開發(fā)時(shí),后端還沒(méi)完成數(shù)據(jù)輸出系谐,前端只好寫靜態(tài)模擬數(shù)據(jù)巾陕。數(shù)據(jù)牽制與后端,前端頁(yè)面無(wú)法很好的展示纪他,...
    _1633_閱讀 4,566評(píng)論 0 24
  • 前端開發(fā)過(guò)程中免不了出現(xiàn)等接口的情況鄙煤,而靜態(tài) JSON 不足以體現(xiàn)前端高大上的逼格,是時(shí)候拿出 mock.js 了...
    MrWelson閱讀 1,786評(píng)論 0 0
  • 國(guó)家電網(wǎng)公司企業(yè)標(biāo)準(zhǔn)(Q/GDW)- 面向?qū)ο蟮挠秒娦畔?shù)據(jù)交換協(xié)議 - 報(bào)批稿:20170802 前言: 排版 ...
    庭說(shuō)閱讀 11,004評(píng)論 6 13
  • 在開發(fā)過(guò)程中茶袒,有很多的ajax請(qǐng)求梯刚,前后端分離開發(fā)你肯定遇到這樣的問(wèn)題,后臺(tái)給你的接口文檔薪寓,你需要在本地模擬數(shù)據(jù)返...
    清湯餃子閱讀 120,596評(píng)論 6 77
  • 安裝Mock 語(yǔ)法規(guī)范 數(shù)據(jù)模板 數(shù)據(jù)模板中的每個(gè)屬性由 3 部分構(gòu)成:屬性名亡资、生成規(guī)則、屬性值:生成規(guī)則 有 7...
    _花閱讀 2,622評(píng)論 0 1