學(xué)習(xí)目的
? ? ? ? ①開(kāi)發(fā)時(shí)返咱，后端還沒(méi)完成數(shù)據(jù)輸出钥庇，前端只好寫(xiě)靜態(tài)模擬數(shù)據(jù)。數(shù)據(jù)牽制與后端咖摹，前端頁(yè)面無(wú)法很好的展示评姨，效果不好展示，尤其是 使用 vue 的 v-for? 或者 react 循環(huán)數(shù)據(jù) 的時(shí)候萤晴，各種不方便参咙。
? ? ? ? ② 前后端聯(lián)調(diào)的時(shí)候，出現(xiàn)問(wèn)題要各處找硫眯，如果前端先把 模擬接口蕴侧、 模擬數(shù)據(jù) 都處理好，到了聯(lián)調(diào)的時(shí)候 两入，出現(xiàn)問(wèn)題净宵，只要是按照約定的 數(shù)據(jù)格式 來(lái)規(guī)定 mock，那么前端的問(wèn)題就會(huì)小一點(diǎn)裹纳，就不用依賴(lài)后端择葡，使得 前端工程師 獨(dú)立于 后端進(jìn)行開(kāi)發(fā)，更加自由剃氧。?
? ? ? ? ③ 特殊的格式敏储，例如? IP, 隨機(jī)數(shù)，圖片朋鞍，地址已添，需要去收集，尤其是前端使用圖片的時(shí)候滥酥，要到處去 下載圖片更舞，非常麻煩。
? ? ? ? 使用mock.js 就能 解決這些問(wèn)題坎吻，而且它的優(yōu)點(diǎn)不僅于此：
????????1缆蝉、前后端分離
????????????讓前端工程師獨(dú)立于后端進(jìn)行開(kāi)發(fā)。
????????2瘦真、增加單元測(cè)試的真實(shí)性
????????????通過(guò)隨機(jī)數(shù)據(jù)刊头，模擬各種場(chǎng)景。
????????3原杂、開(kāi)發(fā)無(wú)侵入
????????????不需要修改既有代碼弦讽，就可以攔截Ajax請(qǐng)求膀哲，返回模擬的響應(yīng)數(shù)據(jù)某宪。
????????4兴喂、用法簡(jiǎn)單
????????????符合直覺(jué)的接口焚志。
????????5、數(shù)據(jù)類(lèi)型豐富
????????????支持生成隨機(jī)的文本壶谒、數(shù)字汗菜、布爾值挑社、日期、郵箱菌瘪、鏈接俏扩、圖片斗这、顏色等。
????????6、方便擴(kuò)展
????????????支持支持?jǐn)U展更多數(shù)據(jù)類(lèi)型钮莲，支持自定義函數(shù)和正則崔拥。
? ? ? ? 7、在已有接口文檔的情況下拆魏，我們可以直接按照接口文檔來(lái)開(kāi)發(fā)，將相應(yīng)的字段寫(xiě)好拥峦，在接口完成之后卖子，只需要改變url地址即可。
? ? ? ? 所以 學(xué)習(xí) Mock.js 玄柠，就可以 更加自由羽利， 獨(dú)立 于后端 開(kāi)發(fā) 前端刊懈。
Mock.js 介紹
? ???Mock.js 是一款模擬數(shù)據(jù)生成器，旨在幫助前端攻城師獨(dú)立于后端進(jìn)行開(kāi)發(fā)当宴，幫助編寫(xiě)單元測(cè)試
? ??提供了以下模擬功能：
? ? ? ? ① 根據(jù) 數(shù)據(jù)模板 生成模擬數(shù)據(jù)
????????② 模擬 Ajax 請(qǐng)求户矢，生成并返回模擬數(shù)據(jù)
? ? ? ? ③ 基于 HTML 模板生成模擬數(shù)據(jù)
? ? ? ? 安裝??npm install mockjs
Mock.js 語(yǔ)法?
????Mock.js 的語(yǔ)法規(guī)范包括 兩部分：
? ? ? ? ①?數(shù)據(jù)模板定義規(guī)范? DTD
? ??????????數(shù)據(jù)模板中的每個(gè)屬性由 3 部分構(gòu)成：屬性名殉疼、生成規(guī)則瓢娜、屬性值：
? ??????????屬性名??和?生成規(guī)則??之間用豎線(xiàn)?|?分隔。
? ??????????生成規(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
? ??????????屬性名 name? ? 生成規(guī)則 rule? ? 屬性值 value
????????????'name|rule':value
? ? ? ? ? ? -------屬性值是字符串?String
? ??????????'name|min-max': 'value'? ? ? ?// 通過(guò)重復(fù) 'value' 生成一個(gè) 字符串虏劲，重復(fù)次數(shù)大于等于 min柒巫，小于等于 max谷丸。
? ??????????'name|count': 'value'? ? ? ? ? ? //? 通過(guò)重復(fù) 'value' 生成一個(gè) 字符串刨疼，重復(fù)次數(shù)等于 count鹅龄。
? ? ? ? ? ? -------屬性值是數(shù)字?Number
? ? ? ? ? ? ?????'name|+1': number
????????????????屬性值自動(dòng)加 1扮休，初始值為?number贱案。
????????????????'name|min-max': number
????????????????生成一個(gè)大于等于?min宝踪、小于等于?max?的整數(shù)，屬性值?number?只是用來(lái)確定類(lèi)型秕重。
????????????????'name|min-max.dmin-dmax': number
????????????????生成一個(gè)浮點(diǎn)數(shù)溶耘，整數(shù)部分大于等于?min服鹅、小于等于?max，小數(shù)部分保留?dmin?到?dmax位庐扫。
? ??????????????例子：'height|100-120.2-5':110.24, 生成一個(gè)浮點(diǎn)數(shù),整數(shù)部分大于等于 100仗哨、小于等于 120厌漂，小數(shù)部分保留 2 到 5?位
? ? ? ? ? ? -------屬性值是布爾型?Boolean
? ??????????????'name|1': boolean
????????????????隨機(jī)生成一個(gè)布爾值，值為 true 的概率是 1/2富纸，值為 false 的概率同樣是 1/2胜嗓。
????????????????'name|min-max': value
????????????????隨機(jī)生成一個(gè)布爾值钩乍，值為?value?的概率是?min / (min + max)寥粹，值為?!value?的概率是?max / (min + max)。
? ??????????-------屬性值是對(duì)象?Object
? ??????????????'name|count': object
????????????????從屬性值?object?中隨機(jī)選取?count?個(gè)屬性媚狰。
????????????????'name|min-max': object
????????????????從屬性值?object?中隨機(jī)選取?min?到?max?個(gè)屬性阔拳。
? ??????????-------屬性值是數(shù)組?Array
? ??????????????'name|1': array
????????????????從屬性值?array?中隨機(jī)選取 1 個(gè)元素，作為最終值辨宠。
????????????????'name|+1': array
????????????????從屬性值?array?中順序選取 1 個(gè)元素嗤形，作為最終值弧圆。
????????????????'name|min-max': array
????????????????通過(guò)重復(fù)屬性值?array?生成一個(gè)新數(shù)組，重復(fù)次數(shù)大于等于?min霹期，小于等于?max历造。
????????????????'name|count': array
????????????????通過(guò)重復(fù)屬性值?array?生成一個(gè)新數(shù)組勿锅，重復(fù)次數(shù)為?count。
? ??????????-------屬性值是函數(shù)?Function
? ??????????????'name': function
????????????????執(zhí)行函數(shù)?function垮刹，取其返回值作為最終的屬性值荒典，函數(shù)的上下文為屬性?'name'?所在的對(duì)象吞鸭。
? ??????????-------屬性值是正則表達(dá)式?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"}
?? ?? ? ②?數(shù)據(jù)占位符定義規(guī)范? DPD
? ??????占位符 只是在屬性值字符串中占個(gè)位置遮咖，并不出現(xiàn)在最終的屬性值中御吞。
? ??????????????占位符?的格式為：
????????????????@占位符
????????????????@占位符(參數(shù) [, 參數(shù)])
? ??????????????用 @ 來(lái)標(biāo)識(shí)其后的字符串是 占位符。
????????????????占位符 引用的是 Mock.Random 中的方法挟裂。
? ? ? ? ? ? ?Mock.Random 是一個(gè)工具類(lèi)揍诽，用于生成各種隨機(jī)數(shù)據(jù)。
? ??????????Mock.Random 的方法在數(shù)據(jù)模板中稱(chēng)為『占位符』渠啤，書(shū)寫(xiě)格式為?@占位符(參數(shù) [, 參數(shù)])?埃篓。
? ? ? ? ? ? 基本
? ? ? ? ? ? @boolean( min?, max?, current? )?返回一個(gè)隨機(jī)的布爾值根资。
? ? ? ? ? ? min?指示參數(shù) current 出現(xiàn)的概率 ,概率計(jì)算公式為?min / (min + max)玄帕。
? ? ? ? ? ? max??指示參數(shù) current 的相反值?!current?出現(xiàn)的概率
? ??????????current??可選值為布爾值?true?或?false
? ??????????@boolean(1,9,true)? ? ?1/10 的概率出現(xiàn) true
? ? ? ? ? ? @natural( min?, max? )? 返回一個(gè)隨機(jī)的自然數(shù)（大于等于 0 的整數(shù)）參數(shù)表示最小值和最大值
? ? ? ? ? ? @integer( min?, max? ) 返回一個(gè)隨機(jī)的整數(shù)
? ? ? ? ? ? @float( min?, max?, dmin?, dmax? )?返回一個(gè)隨機(jī)的浮點(diǎn)數(shù)
? ? ? ? ? ? @character( pool? )?返回一個(gè)隨機(jī)字符? pool?表示字符池，將從中選擇一個(gè)字符返回
? ? ? ? ? ? @string( pool?, min?, max? )??返回一個(gè)隨機(jī)字符串
? ? ? ? ? ? @range( start?, stop, step? )??返回一個(gè)整型數(shù)組? stop?必選? ?數(shù)組中整數(shù)的結(jié)束值（不包含在返回值中）
? ? ? ? ? ? @range(10)? ?//=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
? ? ? ? ? ? @id??隨機(jī)生成一個(gè) 18 位身份證
? ??????????圖片
????????????@image(size, background, foreground, format, text )? 圖片大小委刘，背景色锡移，圖片前景色漆际，圖片格式，圖片上文字
? ? ? ? ? ? ?生成一個(gè)隨機(jī)的圖片地址? ?;? 例如 @image('200x100','#ffcc33','#FFF','png','!')? ??
? ? ? ? ? ? @dataImage( size, text )??圖片大小施符，圖片上文字? ?//生成一段隨機(jī)的 Base64 圖片編碼
? ? ? ? ? ? 顏色
? ? ? ? ? ? @color?隨機(jī)生成一個(gè)有吸引力的顏色
? ? ? ? ? ? 文字
? ? ? ? ? ? @paragraph( [ min,max])? 隨機(jī)生成一段文本擂找。參數(shù)指示文本中 句子?的個(gè)數(shù)
? ? ? ? ? ? @cparagraph( [ min,max] )?? 隨機(jī)生成一段?中文?文本贯涎。
? ? ? ? ? ? @sentence( [ min,max] )??隨機(jī)生成一個(gè)句子，第一個(gè)單詞的首字母大寫(xiě)
? ? ? ? ? ? @csentence( [ min,max] )?隨機(jī)生成一段 中文 文本欢唾。
? ? ? ? ? ? @word??隨機(jī)生成一個(gè)單詞
? ? ? ? ? ? @cword( pool?, min?, max? )? 隨機(jī)生成一個(gè)?漢字粉捻。
? ??????????pool? 可選。 漢字字符串祟霍。表示漢字字符池沸呐，將從中選擇一個(gè) 漢字字符返回呢燥。
? ? ? ? ? ? @title( min?, max? )?隨機(jī)生成一句標(biāo)題，其中每個(gè)單詞的首字母大寫(xiě)呼渣。
? ? ? ? ? ? @ctitle( min?, max? )?隨機(jī)生成一句中文標(biāo)題寞埠。
? ? ? ? ? ? 姓名
? ? ? ? ? ? @first? //英文名? @last? //英文姓 @name //英文姓名
? ??????????@cfirst? //中文名? @clast? //中文姓?@cname //中文姓名
? ? ? ? ? ? 網(wǎng)址
? ? ? ? ? ? @url( protocol?, host? )? ?//隨機(jī)生成一個(gè) URL(協(xié)議仁连，URL 域名和端口號(hào)）? @email? //郵件地址? @ip? ?@tld? ?頂級(jí)域名 @domain //域名
? ? ? ? ? ? @protocol? //URL 協(xié)議
? ? ? ? ? ? 地區(qū)
? ? ? ? ? ? @region? @province @city @county @zip
? ? ? ? ? ? //隨機(jī)生成 中國(guó)的?大區(qū) 、适苟臁（或直轄市患朱、自治區(qū)扰魂、特別行政區(qū)）、? 市姐直、縣蒋畜、郵政編碼（六位數(shù)字）
????????????通過(guò) Mock.Random.extend() 來(lái)擴(kuò)展自定義占位符。
????????????????占位符 也可以引用 數(shù)據(jù)模板 中的屬性愿棋。
????????????????占位符 會(huì)優(yōu)先引用 數(shù)據(jù)模板 中的屬性糠雨。
Mock.mock( )
? ??????Mock.mock( [ rurl ] ,? [ rtype ], template|function( options ) )
? ??????rurl
????????可選甘邀。
? ? ? ? ? ? ?表示需要攔截的 URL垮庐，可以是 URL 字符串或 URL 正則。例如?/\/domain\/list\.json/逗抑、'/domian/list.json'寒亥。
????????rtype
? ? ? ? 可選护盈。
????????????表示需要攔截的 Ajax 請(qǐng)求類(lèi)型。例如?GET紊服、POST胸竞、PUT、DELETE?等煎饼。
? ??????template
????????可選校赤。
????????表示數(shù)據(jù)模板，可以是對(duì)象或字符串沾乘。例如?{ 'data|1-10':[{}] }浑测、'@EMAIL'歪玲。
? ??????function(options)
????????可選滥崩。
????????表示用于生成響應(yīng)數(shù)據(jù)的函數(shù)钙皮。
? ??????options
????????指向本次請(qǐng)求的 Ajax 選項(xiàng)集募强，含有?url、type?和?body?三個(gè)屬性，參見(jiàn)?XMLHttpRequest 規(guī)范逐抑。
? ??????Mock.mock( template )? ? ? ? ? ? ? ?// 根據(jù)數(shù)據(jù)模板生成模擬數(shù)據(jù)。
????????Mock.mock( rurl, template )? ? ? //記錄數(shù)據(jù)模板进每。當(dāng)攔截到匹配?rurl?的 Ajax 請(qǐng)求時(shí)命斧，將根據(jù)數(shù)據(jù)模板?template?生成模擬數(shù)據(jù)，并作為響應(yīng)數(shù)據(jù)返回贤徒。
? ??????Mock.mock( rurl, function( options ) )? ? ? ? ?//記錄用于生成響應(yīng)數(shù)據(jù)的函數(shù)接奈。當(dāng)攔截到匹配?rurl?的 Ajax 請(qǐng)求時(shí)通孽，函數(shù)?function(options)?將被執(zhí)行，并把執(zhí)行結(jié)果作為響應(yīng)數(shù)據(jù)返回互捌。
? ??????Mock.mock( rurl, rtype, template )? ?// 記錄數(shù)據(jù)模板行剂。當(dāng)攔截到匹配?rurl?和?rtype?的 Ajax 請(qǐng)求時(shí)，將根據(jù)數(shù)據(jù)模板?template?生成模擬數(shù)據(jù)巢价，并作為響應(yīng)數(shù)據(jù)返回
? ??????Mock.mock( rurl, rtype, function( options ) )? ?//記錄用于生成響應(yīng)數(shù)據(jù)的函數(shù)壤躲。當(dāng)攔截到匹配?rurl?和?rtype?的 Ajax 請(qǐng)求時(shí)，函數(shù)?function(options)?將被執(zhí)行凌唬，并把執(zhí)行結(jié)果作為響應(yīng)數(shù)據(jù)返回漏麦。
? ? ? ? Node 使用 Mock.js
? ? ? ? ? ? ? ? 以后想數(shù)據(jù)就不用那么麻煩了撕贞。
Easy Mock
? ??Easy Mock?網(wǎng)站地址
????Easy Mock是比較好用的一個(gè)圖形化的網(wǎng)站， 可以使用它來(lái)模擬Mock數(shù)據(jù)秧均。
? ? 直接請(qǐng)求他提供的接口就可以了
