ok，我們需要的mock終于來了，開心嗎？我反正很開心，因為之前我不會，現在由我分享，哈哈哈，不多說，next ## mock是啥玩意？ * 生成隨機數據，攔截 Ajax 請求 ## 為什么需要mock這玩意？ >前端的頁面編寫速度要快于后臺的接口編寫速率，為了減小聯調時間，把重要的流程走完，之后之間換一個接口，進行小范圍的修改即可，之前的時候，我們也是用假的數據，json文件的形式，這種數據假的不能再假，太不靈活了，而且還需要切換url。后來，前端工程師終于受不了，自己編寫了mock，攔截客戶端的ajax請求，直接給自己傳數據。 ---》你看，用戶量還行吧  ## 安裝mock * 如果是寫原生頁面，直接在bootcdn找 ``` https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock.js ``` * 如果是組件開發或其他直接可以下載插件 ``` npm install mockjs --save-dev ``` ~~~ // 第一步：引入mockjs import Mock from 'mockjs' //第二步，引入全局的main.js中 import './assets/js/mock' //第三步 制作mockjs模擬數據 Mock.mock('/userList',{ "userList|10":[ ????????{ "id":"@id", "name":"@name(true)", //英文名，中文是cname first是名，last是姓 "age":"@integer(20,30)", "image":"@image(100x100,red,Mark)", "email":"@email", "birthday":"@date", "city":"@city(true)", "gender":"@integer(0,1)", "image":"@image(100x100,#232323,Mark)" ????????} ??? ] ????}) Mark：如果我們看不懂@XX表示啥意思，別急，后面會講到，如果你很著急， 我現在先給你show一下，進入mockjs的原生代碼，走起 // 第四步：使用此接口數據 getUserList(){ this.$axios.get( '/userList' ) .then(response => { console.log(response) }) .catch(error => { }) } ~~~ * 如果是post的方法怎么辦？ 見下圖 This 編寫的接口數據  This is調用的數據  ## Mock 設置延時請求事件 >不設置延時很有可能遇到坑，這里需要留意，因為真實的請求是需要時間的，mock不設置延時則是馬上拿到數據返回，這兩個情況不同可能導致在接口聯調時出現問題。所以最好要先設置延時請求到數據。為了更加的模擬這個操作，所以可以手動設置延時。 ``` //延時400s請求到數據 Mock.setup({ timeout: 400 }) //延時200-600毫秒請求到數據 Mock.setup({ timeout: '200-600' }) ``` ## Mock.random >很多的人說，我需要自己設置根據具體的情況設置數據，行，滿足你，Math.radom來了。當然它有自己的語法，一起了解一下。Mock.Random 是一個工具類，用于生成各種隨機數據。Mock.Random 的方法在數據模板中稱為『占位符』，書寫格式為`@占位符(參數 [, 參數])`。 * Mock.Random 提供的完整方法（占位符）如下： | Type | Method | | --- | --- | | 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 | * 如果上面的屬性還是滿足不了你的話，你可以直接去自己寫，然后就可以為之所用了。更詳細內容請參考[github of mock](https://github.com/nuysoft/Mock/wiki) 、 ## Mock語法規則 ### 1\. 屬性值是字符串 **String** 1. `"name|min-max": string` 通過重復 `string` 生成一個字符串，重復次數大于等于 `min`，小于等于 `max`。 2. `"name|count": string` 通過重復 `string` 生成一個字符串，重復次數等于 `count`。 ### 2\. 屬性值是數字 **Number** 1. `"name|+1" number` 屬性值自動加 1，初始值為 `number` 2. `"name|min-max": number` 生成一個大于等于 `min`、小于等于 `max` 的整數，屬性值 `number` 只是用來確定類型。 3. ` "name|min-max.dmin-dmax": number` 生成一個浮點數，整數部分大于等于 `min`、小于等于 `max`，小數部分保留 `dmin` 到 `dmax` 位。 ``` Mock.mock({ 'number1|1-100.1-10': 1, 'number2|123.1-10': 1, 'number3|123.3': 1, 'number4|123.10': 1.123 }) // => { "number1": 12.92, "number2": 123.51, "number3": 123.777, "number4": 123.1231091814 } ``` ##### 3\. 屬性值是布爾型 **Boolean** 1. `"name|1": boolean` 隨機生成一個布爾值，值為 true 的概率是 1/2，值為 false 的概率同樣是 1/2。 2. `"name|min-max": value` 隨機生成一個布爾值，值為 `value` 的概率是 `min / (min + max)`，值為 `!value` 的概率是 `max / (min + max)`。 #### 4\. 屬性值是對象 **Object** 1. `"name|count": object` 從屬性值 `object` 中隨機選取 `count` 個屬性。 2. `"name|min-max" object` 從屬性值 `object` 中隨機選取 `min` 到 `max` 個屬性。 ### 5\. 屬性值是數組 **Array** 1. `"name|1": array` 從屬性值 `array` 中隨機選取 1 個元素，作為最終值。 2. `"name|+1": array` 從屬性值 `array` 中順序選取 1 個元素，作為最終值。 3. `"name|min-max" array` 通過重復屬性值 `array` 生成一個新數組，重復次數大于等于 `min`，小于等于 `max`。 4. `"ame|count": array` 通過重復屬性值 `array` 生成一個新數組，重復次數為 `count`。 ### 6\. 屬性值是函數 **Function** 1. `"name": function` 執行函數 `function`，取其`return`返回值作為最終的屬性值，函數的上下文為屬性 `name` 所在的對象。 ### 7\. 屬性值是正則表達式 **RegExp** 1. `"name": regexp` 根據正則表達式 `regexp` 反向生成可以匹配它的字符串。用于生成自定義格式的字符串。 ``` Mock.mock({ "regexp1": /[a-z][A-Z][0-9]/, "egexp2": /\w\W\s\S\d\D/, "egexp3": /\d{5,10}/ }) // => { "regexp1": "pJ7", "regexp2": "F)\fp1G", "regexp3": "561659409" } 注意：次出也可以使用'',不受影響，建議雙引號 ``` ## Mock.valid() * Mock.valid( template, data ) 校驗真實數據`data`是否與數據模板`template`匹配。 ### 參數一： template 必選。 表示數據模板，可以是對象或字符串。例如`{ 'list|1-10':[{}] }`、`'@EMAIL'`。 ### 參數二 ：data 必選。 表示真實數據。 ``` var template = { name: 'value1' } var data = { name: 'value2' } Mock.valid(template, data) // => [ { "path": [ "data", "name" ], "type": "value", "actual": "value2", "expected": "value1", "action": "equal to", "message": "[VALUE] Expect ROOT.name'value is equal to value1, but is value2" } ] ``` ## Mock.toJSONSchema( template ) 把 Mock.js 風格的數據模板`template`轉換成[JSON Schema](http://json-schema.org/)。 ### template 必選。 表示數據模板，可以是對象或字符串。例如`{ 'list|1-10':[{}] }`、`'@EMAIL'`。 ``` var template = { 'list|1-10': [{}] } Mock.toJSONSchema(template) // => { "name": undefined, "path": ["ROOT"], "type": "object", "template": { "list|1-10": [{}] }, "rule": {}, "properties": [{ "name": "list", "path": ["ROOT", "list"], "type": "array", "template": [{}], "rule": { "parameters": ["list|1-10", "list", null, "1-10", null], "range": ["1-10", "1", "10"], "min": 1, "max": 10, "count": 6, "decimal": undefined, "dmin": undefined, "dmax": undefined, "dcount": undefined }, "items": [{ "name": 0, "path": ["data", "list", 0], "type": "object", "template": {}, "rule": {}, "properties": [] }] }] } ```