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