學(xué)習(xí)目的
? ? ? ? ①開發(fā)時，后端還沒完成數(shù)據(jù)輸出，前端只好寫靜態(tài)模擬數(shù)據(jù)。數(shù)據(jù)牽制與后端，前端頁面無法很好的展示，效果不好展示，尤其是 使用 vue 的 v-for? 或者 react 循環(huán)數(shù)據(jù) 的時候，各種不方便。
? ? ? ? ② 前后端聯(lián)調(diào)的時候，出現(xiàn)問題要各處找，如果前端先把 模擬接口、 模擬數(shù)據(jù) 都處理好，到了聯(lián)調(diào)的時候 ，出現(xiàn)問題，只要是按照約定的 數(shù)據(jù)格式 來規(guī)定 mock，那么前端的問題就會小一點，就不用依賴后端，使得 前端工程師 獨立于 后端進行開發(fā)，更加自由。?
? ? ? ? ③ 特殊的格式，例如? IP, 隨機數(shù)，圖片，地址，需要去收集，尤其是前端使用圖片的時候，要到處去 下載圖片，非常麻煩。
? ? ? ? 使用mock.js 就能 解決這些問題，而且它的優(yōu)點不僅于此：
????????1、前后端分離
????????????讓前端工程師獨立于后端進行開發(fā)。
????????2、增加單元測試的真實性
????????????通過隨機數(shù)據(jù)，模擬各種場景。
????????3、開發(fā)無侵入
????????????不需要修改既有代碼，就可以攔截Ajax請求，返回模擬的響應(yīng)數(shù)據(jù)。
????????4、用法簡單
????????????符合直覺的接口。
????????5、數(shù)據(jù)類型豐富
????????????支持生成隨機的文本、數(shù)字、布爾值、日期、郵箱、鏈接、圖片、顏色等。
????????6、方便擴展
????????????支持支持擴展更多數(shù)據(jù)類型，支持自定義函數(shù)和正則。
? ? ? ? 7、在已有接口文檔的情況下，我們可以直接按照接口文檔來開發(fā)，將相應(yīng)的字段寫好，在接口完成之后，只需要改變url地址即可。
? ? ? ? 所以 學(xué)習(xí) Mock.js ，就可以 更加自由， 獨立 于后端 開發(fā) 前端。
Mock.js 介紹
? ???Mock.js 是一款模擬數(shù)據(jù)生成器，旨在幫助前端攻城師獨立于后端進行開發(fā)，幫助編寫單元測試
? ??提供了以下模擬功能：
? ? ? ? ① 根據(jù) 數(shù)據(jù)模板 生成模擬數(shù)據(jù)
????????② 模擬 Ajax 請求，生成并返回模擬數(shù)據(jù)
? ? ? ? ③ 基于 HTML 模板生成模擬數(shù)據(jù)
? ? ? ? 安裝??npm install mockjs
Mock.js 語法?
????Mock.js 的語法規(guī)范包括 兩部分：
? ? ? ? ①?數(shù)據(jù)模板定義規(guī)范? DTD
? ??????????數(shù)據(jù)模板中的每個屬性由 3 部分構(gòu)成：屬性名、生成規(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
? ??????????屬性名 name? ? 生成規(guī)則 rule? ? 屬性值 value
????????????'name|rule':value
? ? ? ? ? ? -------屬性值是字符串?String
? ??????????'name|min-max': 'value'? ? ? ?// 通過重復(fù) 'value' 生成一個 字符串，重復(fù)次數(shù)大于等于 min，小于等于 max。
? ??????????'name|count': 'value'? ? ? ? ? ? //? 通過重復(fù) 'value' 生成一個 字符串，重復(fù)次數(shù)等于 count。
? ? ? ? ? ? -------屬性值是數(shù)字?Number
? ? ? ? ? ? ?????'name|+1': number
????????????????屬性值自動加 1，初始值為?number。
????????????????'name|min-max': number
????????????????生成一個大于等于?min、小于等于?max?的整數(shù)，屬性值?number?只是用來確定類型。
????????????????'name|min-max.dmin-dmax': number
????????????????生成一個浮點數(shù)，整數(shù)部分大于等于?min、小于等于?max，小數(shù)部分保留?dmin?到?dmax位。
? ??????????????例子：'height|100-120.2-5':110.24, 生成一個浮點數(shù),整數(shù)部分大于等于 100、小于等于 120，小數(shù)部分保留 2 到 5?位
? ? ? ? ? ? -------屬性值是布爾型?Boolean
? ??????????????'name|1': boolean
????????????????隨機生成一個布爾值，值為 true 的概率是 1/2，值為 false 的概率同樣是 1/2。
????????????????'name|min-max': value
????????????????隨機生成一個布爾值，值為?value?的概率是?min / (min + max)，值為?!value?的概率是?max / (min + max)。
? ??????????-------屬性值是對象?Object
? ??????????????'name|count': object
????????????????從屬性值?object?中隨機選取?count?個屬性。
????????????????'name|min-max': object
????????????????從屬性值?object?中隨機選取?min?到?max?個屬性。
? ??????????-------屬性值是數(shù)組?Array
? ??????????????'name|1': array
????????????????從屬性值?array?中隨機選取 1 個元素，作為最終值。
????????????????'name|+1': array
????????????????從屬性值?array?中順序選取 1 個元素，作為最終值。
????????????????'name|min-max': array
????????????????通過重復(fù)屬性值?array?生成一個新數(shù)組，重復(fù)次數(shù)大于等于?min，小于等于?max。
????????????????'name|count': array
????????????????通過重復(fù)屬性值?array?生成一個新數(shù)組，重復(fù)次數(shù)為?count。
? ??????????-------屬性值是函數(shù)?Function
? ??????????????'name': function
????????????????執(zhí)行函數(shù)?function，取其返回值作為最終的屬性值，函數(shù)的上下文為屬性?'name'?所在的對象。
? ??????????-------屬性值是正則表達式?RegExp
? ??????????????根據(jù)正則表達式?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
? ??????占位符 只是在屬性值字符串中占個位置，并不出現(xiàn)在最終的屬性值中。
? ??????????????占位符?的格式為：
????????????????@占位符
????????????????@占位符(參數(shù) [, 參數(shù)])
? ??????????????用 @ 來標識其后的字符串是 占位符。
????????????????占位符 引用的是 Mock.Random 中的方法。
? ? ? ? ? ? ?Mock.Random 是一個工具類，用于生成各種隨機數(shù)據(jù)。
? ??????????Mock.Random 的方法在數(shù)據(jù)模板中稱為『占位符』，書寫格式為?@占位符(參數(shù) [, 參數(shù)])?。
? ? ? ? ? ? 基本
? ? ? ? ? ? @boolean( min?, max?, current? )?返回一個隨機的布爾值。
? ? ? ? ? ? min?指示參數(shù) current 出現(xiàn)的概率 ,概率計算公式為?min / (min + max)。
? ? ? ? ? ? max??指示參數(shù) current 的相反值?!current?出現(xiàn)的概率
? ??????????current??可選值為布爾值?true?或?false
? ??????????@boolean(1,9,true)? ? ?1/10 的概率出現(xiàn) true
? ? ? ? ? ? @natural( min?, max? )? 返回一個隨機的自然數(shù)（大于等于 0 的整數(shù)）參數(shù)表示最小值和最大值
? ? ? ? ? ? @integer( min?, max? ) 返回一個隨機的整數(shù)
? ? ? ? ? ? @float( min?, max?, dmin?, dmax? )?返回一個隨機的浮點數(shù)
? ? ? ? ? ? @character( pool? )?返回一個隨機字符? pool?表示字符池，將從中選擇一個字符返回
? ? ? ? ? ? @string( pool?, min?, max? )??返回一個隨機字符串
? ? ? ? ? ? @range( start?, stop, step? )??返回一個整型數(shù)組? stop?必選? ?數(shù)組中整數(shù)的結(jié)束值（不包含在返回值中）
? ? ? ? ? ? @range(10)? ?//=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
? ? ? ? ? ? @id??隨機生成一個 18 位身份證
? ??????????圖片
????????????@image(size, background, foreground, format, text )? 圖片大小，背景色，圖片前景色，圖片格式，圖片上文字
? ? ? ? ? ? ?生成一個隨機的圖片地址? ?;? 例如 @image('200x100','#ffcc33','#FFF','png','!')? ??
? ? ? ? ? ? @dataImage( size, text )??圖片大小，圖片上文字? ?//生成一段隨機的 Base64 圖片編碼
? ? ? ? ? ? 顏色
? ? ? ? ? ? @color?隨機生成一個有吸引力的顏色
? ? ? ? ? ? 文字
? ? ? ? ? ? @paragraph( [ min,max])? 隨機生成一段文本。參數(shù)指示文本中 句子?的個數(shù)
? ? ? ? ? ? @cparagraph( [ min,max] )?? 隨機生成一段?中文?文本。
? ? ? ? ? ? @sentence( [ min,max] )??隨機生成一個句子，第一個單詞的首字母大寫
? ? ? ? ? ? @csentence( [ min,max] )?隨機生成一段 中文 文本。
? ? ? ? ? ? @word??隨機生成一個單詞
? ? ? ? ? ? @cword( pool?, min?, max? )? 隨機生成一個?漢字。
? ??????????pool? 可選。 漢字字符串。表示漢字字符池，將從中選擇一個 漢字字符返回。
? ? ? ? ? ? @title( min?, max? )?隨機生成一句標題，其中每個單詞的首字母大寫。
? ? ? ? ? ? @ctitle( min?, max? )?隨機生成一句中文標題。
? ? ? ? ? ? 姓名
? ? ? ? ? ? @first? //英文名? @last? //英文姓 @name //英文姓名
? ??????????@cfirst? //中文名? @clast? //中文姓?@cname //中文姓名
? ? ? ? ? ? 網(wǎng)址
? ? ? ? ? ? @url( protocol?, host? )? ?//隨機生成一個 URL(協(xié)議，URL 域名和端口號）? @email? //郵件地址? @ip? ?@tld? ?頂級域名 @domain //域名
? ? ? ? ? ? @protocol? //URL 協(xié)議
? ? ? ? ? ? 地區(qū)
? ? ? ? ? ? @region? @province @city @county @zip
? ? ? ? ? ? //隨機生成 中國的?大區(qū) 、?。ɑ蛑陛犑?、自治區(qū)、特別行政區(qū)）、? 市、縣、郵政編碼（六位數(shù)字）
????????????通過 Mock.Random.extend() 來擴展自定義占位符。
????????????????占位符 也可以引用 數(shù)據(jù)模板 中的屬性。
????????????????占位符 會優(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 請求類型。例如?GET、POST、PUT、DELETE?等。
? ??????template
????????可選。
????????表示數(shù)據(jù)模板，可以是對象或字符串。例如?{ 'data|1-10':[{}] }、'@EMAIL'。
? ??????function(options)
????????可選。
????????表示用于生成響應(yīng)數(shù)據(jù)的函數(shù)。
? ??????options
????????指向本次請求的 Ajax 選項集，含有?url、type?和?body?三個屬性，參見?XMLHttpRequest 規(guī)范。
? ??????Mock.mock( template )? ? ? ? ? ? ? ?// 根據(jù)數(shù)據(jù)模板生成模擬數(shù)據(jù)。
????????Mock.mock( rurl, template )? ? ? //記錄數(shù)據(jù)模板。當攔截到匹配?rurl?的 Ajax 請求時，將根據(jù)數(shù)據(jù)模板?template?生成模擬數(shù)據(jù)，并作為響應(yīng)數(shù)據(jù)返回。
? ??????Mock.mock( rurl, function( options ) )? ? ? ? ?//記錄用于生成響應(yīng)數(shù)據(jù)的函數(shù)。當攔截到匹配?rurl?的 Ajax 請求時，函數(shù)?function(options)?將被執(zhí)行，并把執(zhí)行結(jié)果作為響應(yīng)數(shù)據(jù)返回。
? ??????Mock.mock( rurl, rtype, template )? ?// 記錄數(shù)據(jù)模板。當攔截到匹配?rurl?和?rtype?的 Ajax 請求時，將根據(jù)數(shù)據(jù)模板?template?生成模擬數(shù)據(jù)，并作為響應(yīng)數(shù)據(jù)返回
? ??????Mock.mock( rurl, rtype, function( options ) )? ?//記錄用于生成響應(yīng)數(shù)據(jù)的函數(shù)。當攔截到匹配?rurl?和?rtype?的 Ajax 請求時，函數(shù)?function(options)?將被執(zhí)行，并把執(zhí)行結(jié)果作為響應(yīng)數(shù)據(jù)返回。
? ? ? ? Node 使用 Mock.js
? ? ? ? ? ? ? ? 以后想數(shù)據(jù)就不用那么麻煩了。
Easy Mock
? ??Easy Mock?網(wǎng)站地址
????Easy Mock是比較好用的一個圖形化的網(wǎng)站， 可以使用它來模擬Mock數(shù)據(jù)。
? ? 直接請求他提供的接口就可以了
