一、Mock.js入門
1． 什么是mock.js?
Mock.js （官網http://mockjs.com/）是一款模擬數據生成器，旨在幫助前端攻城獅獨立
于后端進行開發，幫助編寫單元測試。提供了以下模擬功能：
1,根據數據模板生成模擬數據
2,模擬 Ajax 請求，生成并返回模擬數據
3,基于 HTML 模板生成模擬數據
Mock.js 具有以下特點：
1.前后端分離,讓前端攻城師獨立于后端進行開發。
2.增加單元測試的真實性
3.通過隨機數據，模擬各種場景。
4.開發無侵入
5.不需要修改既有代碼，就可以攔截 Ajax 請求，返回模擬的響應數據。
6.用法簡單
7.符合直覺的接口
8.數據類型豐富
9.支持生成隨機的文本、數字、布爾值、日期、郵箱、鏈接、圖片、顏色等。
10.方便擴展
11.支持支持擴展更多數據類型，支持自定義函數和正則。
在進行前后端分離式的開發中，前端負責制作頁面和顯示數據，后端負責提供數據，前端通過后端提供的RESTFul規范的接口來獲取 JSON 格式的數據：
對于前端開發人員來說，必須要從服務器獲取數據，所以就只能等待后端開發好接口之后，前端才可以獲取數據，這會影響前端開發的效果。
聰明的前端開發人員就會想：如果前端可以自己模擬出數據，那么在開發時就不需要服務器提供的數據了。于是就出現了mockjs
2． Mock.js安裝
1）使用CDN
2）使用本地文件
下載Mock.js: https://github.com/nuysoft/Mock
導入到本地頁面使用：
引入：
<script src="js/mock-min.js"></script>
3． Mock.js入門案例
3.1． 模擬數據
需求：模擬一個用戶列表，用戶三個字段組件：自增ID、姓名
顯示效果如下：
{"list": [{"id": 1,"name": "測試"},{"id": 1,"name": "測試"},{"id": 1,"name": "測試"},{"id": 1,"name": "測試"},{"id": 1,"name": "測試"}]
}
Mock模擬代碼如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Mock入門案例</title><script src="js/vuejs-2.5.16.js"></script><script src="js/axios-0.18.0.js"></script><script src="js/mock-min.js"></script>
</head>
<body><div id="app1"></div>
</body>
<script>var data = Mock.mock({//list是一個數組，包含5個元素'list|5':[{'id':1,'name':'測試'}]})// 每一個層級比上一個多2個空格console.log(JSON.stringify(data,null,2 ))
</script>
</html>
測試結果：
Mock.js模擬數據成功。
3.2． 使用實例
使用axios向模擬數據的服務發送請求，獲取模擬數據在頁面進行展示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Mock入門案例</title><script src="js/vuejs-2.5.16.js"></script><script src="js/axios-0.18.0.js"></script><script src="js/mock-min.js"></script>
</head>
<body><div id="app"><ul><li v-for="u in users">id： {{u.id}}name：{{u.name}}</li></ul></div>
</body>
<script>var data = Mock.mock("/users","get",{//list是一個數組，包含5個元素'list|5':[{'id':1,'name':'測試'}]})const vm = new Vue({el:"#app",data:{users:[]},created:function(){//發送ajax請求axios.get("/users").then((res)=>{this.users = res.data.list;})}})
</script>
</html>
瀏覽器顯示效果如圖所示：
二、 Mock.js的語法規范
Mock.js 的語法規范包括兩部分：
1.數據模板定義規范（Data Template Definition，DTD）
2.數據占位符定義規范（Data Placeholder Definition，DPD）
1． 數據模板定義規范
數據模板中的每個屬性由 3 部分構成：屬性名、生成規則、屬性值
// 屬性名 name
// 生成規則 rule
// 屬性值 value
‘name|rule’: value
屬性名 和 生成規則 之間用豎線 | 分隔。
生成規則 是可選的。
生成規則 有 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
屬性值 中可以含有 @占位符。
屬性值 還指定了最終值的初始值和類型
例如：
var data = Mock.mock("/users","get",{//list是一個數組，包含5個元素'list|5':[{'id':1,'name':'測試'}]})
可見： list 是屬性名 中間使用|分隔，數字5是生成規則（表示生成5條數據），后面是json數據。
生成規則的含義需要依賴屬性值的類型才能確定。因此我們需要根據屬性的值類型來學習Mock.js的模板語法規范
1.1． 屬性值是字符串
1）‘name|count’: string**
通過重復 string 生成一個字符串，重復次數等于 count
<!DOCTYPE html>
<html lang="en">
<head<meta charset="UTF-8"><title>Mock入門案例</title><script src="js/vuejs-2.5.16.js"></script><script src="js/axios-0.18.0.js"></script><script src="js/mock-min.js"></script>
</head>
<body>
</body>
<script>let data = Mock.mock({//重復5次，生成一個具有5個對象的數組'list|5': [{'id': 1,'name':'測試',//重復11次組裝成一個字符串'phone|11':'1'}]
})
// 輸出結果
console.log(JSON.stringify(data,null,2))
</script>
</html>
//瀏覽器控制臺結果：
{"list": [{"id": 1,"name": "測試","phone": "11111111111"},{"id": 1,"name": "測試","phone": "11111111111"},{"id": 1,"name": "測試","phone": "11111111111"},{"id": 1,"name": "測試","phone": "11111111111"},{"id": 1,"name": "測試","phone": "11111111111"}]
}
2）‘name|min-max’: string
通過重復 string 生成一個字符串，重復次數大于等于 min，小于等于 max
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Mock</title><script src="js/vuejs-2.5.16.js"></script><script src="js/axios-0.18.0.js"></script><script src="js/mock-min.js"></script>
</head>
<body>
</body>
<script>let data = Mock.mock({'list|5': [{'id': 1,//測試這個詞語 重復隨機次數：最大9次，最小重復2次'name|2-9': '測試','phone|11': '1'}]})// 輸出結果console.log(JSON.stringify(data, null, 2))
</script>
</html>
顯示結果：
{"list": [{"id": 1,"name": "測試測試測試測試測試測試測試","phone": "11111111111"},{"id": 1,"name": "測試測試測試測試測試","phone": "11111111111"},{"id": 1,"name": "測試測試測試測試測試","phone": "11111111111"},{"id": 1,"name": "測試測試測試測試測試測試測試","phone": "11111111111"},{"id": 1,"name": "測試測試測試測試測試測試測試測試","phone": "11111111111"}]
}
可以發現：name屬性的值有長，有短，說明隨機重復設置成功。
1.2． 屬性值是數字
1）‘name|+1’: number
屬性值自動加 1，初始值為 number
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Mock</title><script src="js/vuejs-2.5.16.js"></script><script src="js/axios-0.18.0.js"></script><script src="js/mock-min.js"></script>
</head>
<body>
</body>
<script>let data = Mock.mock({'list|5': [{//屬性值自動加1,后面1是初始值'id|+1': 1,//測試這個詞語 重復隨機次數：最大9次，最小重復2次'name|2-9': '測試','phone|11': '1'}]})// 輸出結果console.log(JSON.stringify(data, null, 2))
</script>
</html>
瀏覽器顯示結果：
{"list": [{"id": 1,"name": "測試測試測試測試測試測試測試測試","phone": "11111111111"},{"id": 2,"name": "測試測試測試測試","phone": "11111111111"},{"id": 3,"name": "測試測試","phone": "11111111111"},{"id": 4,"name": "測試測試測試","phone": "11111111111"},{"id": 5,"name": "測試測試測試測試測試測試測試測試測試","phone": "11111111111"}]
}
可以發現：此時id的值是自動增長的。每次循環加1.
2）‘name|min-max’: number
生成一個大于等于 min、小于等于 max 的整數，屬性值 number 只是用來確定類型
示例如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Mock</title><script src="js/vuejs-2.5.16.js"></script><script src="js/axios-0.18.0.js"></script><script src="js/mock-min.js"></script>
</head>
<body>
</body>
<script>let data = Mock.mock({'list|5': [{//屬性值自動加1,后面1是初始值'id|+1': 1,//測試這個詞語 重復隨機次數：最大9次，最小重復2次'name|2-9': '測試','phone|11': '1',//生成200到1000以內隨機的整數'point|200-1000':0}]})// 輸出結果console.log(JSON.stringify(data, null, 2))
</script>
</html>
瀏覽器效果如下所示：
{"list": [{"id": 1,"name": "測試測試測試測試","phone": "11111111111","point": 689},{"id": 2,"name": "測試測試測試測試","phone": "11111111111","point": 519},{"id": 3,"name": "測試測試測試測試測試測試測試","phone": "11111111111","point": 604},{"id": 4,"name": "測試測試測試","phone": "11111111111","point": 797},{"id": 5,"name": "測試測試測試測試","phone": "11111111111","point": 348}]
}
3）‘name|min-max.dcount’: value
生成一個浮點數，整數部分大于等于 min、小于等于 max，小數部分為dcount位
示例如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Mock</title><script src="js/vuejs-2.5.16.js"></script><script src="js/axios-0.18.0.js"></script><script src="js/mock-min.js"></script>
</head>
<body>
</body>
<script>let data = Mock.mock({'list|5': [{//屬性值自動加1,后面1是初始值'id|+1': 1,//測試這個詞語 重復隨機次數：最大9次，最小重復2次'name|2-9': '測試','phone|11': '1',//生成200到1000以內隨機的整數'point|200-1000':0,//整數部分大于等于3000，小于等于8000，max小數部分保留2位的數據'money|3000-8000.2':0}]})// 輸出結果console.log(JSON.stringify(data, null, 2))
</script>
</html>
瀏覽器顯示如下圖所示：
{"list": [{"id": 1,"name": "測試測試測試測試","phone": "11111111111","point": 848,"money": 7080.35},{"id": 2,"name": "測試測試測試測試","phone": "11111111111","point": 530,"money": 4580.34},{"id": 3,"name": "測試測試測試測試測試","phone": "11111111111","point": 486,"money": 6253.33},{"id": 4,"name": "測試測試測試","phone": "11111111111","point": 627,"money": 7222.72},{"id": 5,"name": "測試測試測試測試","phone": "11111111111","point": 285,"money": 7821.81}]
}
4）‘name|min-max.dmin-dmax’: number
生成一個浮點數，整數部分大于等于 min、小于等于 max，小數部分保留 dmin 到
dmax 位。
示例如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Mock</title><script src="js/vuejs-2.5.16.js"></script><script src="js/axios-0.18.0.js"></script><script src="js/mock-min.js"></script>
</head>
<body>
</body>
<script>let data = Mock.mock({'list|5': [{//屬性值自動加1,后面1是初始值'id|+1': 1,//測試這個詞語 重復隨機次數：最大9次，最小重復2次'name|2-9': '測試','phone|11': '1',//生成200到1000以內隨機的整數'point|200-1000':0,//整數部分大于等于3000，小于等于8000，max小數部分保留2位的數據'money|3000-8000.2':0,//整數部分大于等于3000小于等于8000，小數隨機保留2到4位的小數'money2|1000-2000.2-4':0}]})// 輸出結果console.log(JSON.stringify(data, null, 2))
</script>
</html>
瀏覽器控制臺顯示效果如下所示：
{"list": [{"id": 1,"name": "測試測試測試測試測試測試測試測試","phone": "11111111111","point": 694,"money": 3317.13,"money2": 1986.514},{"id": 2,"name": "測試測試測試測試測試測試","phone": "11111111111","point": 770,"money": 3912.08,"money2": 1971.5343},{"id": 3,"name": "測試測試測試","phone": "11111111111","point": 386,"money": 6353.74,"money2": 1036.605},{"id": 4,"name": "測試測試測試測試測試","phone": "11111111111","point": 241,"money": 4918.78,"money2": 1951.792},{"id": 5,"name": "測試測試測試測試測試測試測試","phone": "11111111111","point": 426,"money": 3075.37,"money2": 1828.802}]
}
1.3． 屬性是布爾值
1）‘name|1’: Boolean
隨機生成一個布爾值，值為 true 的概率是 1/2，值為 false 的概率同樣是 1/2
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Mock</title><script src="js/vuejs-2.5.16.js"></script><script src="js/axios-0.18.0.js"></script><script src="js/mock-min.js"></script>
</head>
<body>
</body>
<script>let data = Mock.mock({'list|5': [{//屬性值自動加1,后面1是初始值'id|+1': 1,//測試這個詞語 重復隨機次數：最大9次，最小重復2次'name|2-9': '測試','phone|11': '1',//生成200到1000以內隨機的整數'point|200-1000':0,//生成整數部分大于等于3000，小于等于8000，max小數部分保留2位的數據'money|3000-8000.2':0,//整數部分大于等于3000小于等于8000，max小數部分隨機保留2到4位的小數'money2|1000-2000.2-4':0,//隨機生成布爾值，默認為ture,為true概率：1/2'status|1':true}]})// 輸出結果console.log(JSON.stringify(data, null, 2))
</script>
</html>
2）‘name|min-max’: value
隨機生成一個布爾值，值為 value 的概率是 min / (min + max)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Mock</title><script src="js/vuejs-2.5.16.js"></script><script src="js/axios-0.18.0.js"></script><script src="js/mock-min.js"></script>
</head>
<body>
</body>
<script>let data = Mock.mock({'list|5': [{//屬性值自動加1,后面1是初始值'id|+1': 1,//測試這個詞語 重復隨機次數：最大9次，最小重復2次'name|2-9': '測試','phone|11': '1',//生成200到1000以內隨機的整數'point|200-1000':0,//生成整數部分大于等于3000，小于等于8000，max小數部分保留2位的數據'money|3000-8000.2':0,//整數部分大于等于3000小于等于8000，max小數部分隨機保留2到4位的小數'money2|1000-2000.2-4':0,//隨機生成布爾值，默認為ture,為true概率：1/2'status|1':true,'default|1‐3':true}]})// 輸出結果console.log(JSON.stringify(data, null, 2))
</script>
</html>
1.4． 屬性值是Object
1）‘name|count’: object
從屬性值 object 中隨機選取 count 個屬性。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Mock</title><script src="js/vuejs-2.5.16.js"></script><script src="js/axios-0.18.0.js"></script><script src="js/mock-min.js"></script>
</head>
<body></body>
<script>let data = Mock.mock({'list|5': [{//屬性值自動加1,后面1是初始值'id|+1': 1,//測試這個詞語 重復隨機次數：最大9次，最小重復2次'name|2-9': '測試','phone|11': '1',//生成200到1000以內隨機的整數'point|200-1000':0,//生成整數部分大于等于3000，小于等于8000，max小數部分保留2位的數據'money|3000-8000.2':0,//整數部分大于等于3000小于等于8000，max小數部分隨機保留2到4位的小數'money2|1000-2000.2-4':0,//隨機生成布爾值，默認為ture,為true概率：1/2'status|1':true,'default|1‐3':true,//2的意思是從后面對象中隨機選取2個屬性進行展示'detail|2':{'id':1,'date':'2005‐01‐01','content':'記錄'}}]})// 輸出結果console.log(JSON.stringify(data, null, 2))
</script>
</html>
瀏覽器顯示結果：
{"list": [{"id": 1,"name": "測試測試測試測試測試測試測試測試","phone": "11111111111","point": 733,"money": 6534.66,"money2": 1930.35,"status": true,"default‐3": false,"detail": {"content": "記錄","id": 1}},{"id": 2,"name": "測試測試測試測試測試","phone": "11111111111","point": 918,"money": 6777.32,"money2": 1738.8219,"status": true,"default‐3": true,"detail": {"date": "2005‐01‐01","content": "記錄"}},{"id": 3,"name": "測試測試測試測試測試測試","phone": "11111111111","point": 415,"money": 5692.17,"money2": 1140.123,"status": true,"default‐3": true,"detail": {"date": "2005‐01‐01","id": 1}},{"id": 4,"name": "測試測試測試測試測試測試測試測試","phone": "11111111111","point": 495,"money": 5877.03,"money2": 1632.1647,"status": true,"default‐3": true,"detail": {"date": "2005‐01‐01","content": "記錄"}},{"id": 5,"name": "測試測試測試測試測試測試測試測試","phone": "11111111111","point": 229,"money": 6538.04,"money2": 1383.342,"status": true,"default‐3": false,"detail": {"date": "2005‐01‐01","content": "記錄"}}]
}
可以發現模擬生成的數據結果：是從對象中隨機選取得幾個數據。
2 ）‘name|min-max’: object
從屬性值 object中隨機選取 min到 max個屬性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Mock</title><script src="js/vuejs-2.5.16.js"></script><script src="js/axios-0.18.0.js"></script><script src="js/mock-min.js"></script>
</head>
<body>
</body>
<script>let data = Mock.mock({'list|5': [{//屬性值自動加1,后面1是初始值'id|+1': 1,//測試這個詞語 重復隨機次數：最大9次，最小重復2次'name|2-9': '測試','phone|11': '1',//生成200到1000以內隨機的整數'point|200-1000':0,//生成整數部分大于等于3000，小于等于8000，max小數部分保留2位的數據'money|3000-8000.2':0,//整數部分大于等于3000小于等于8000，max小數部分隨機保留2到4位的小數'money2|1000-2000.2-4':0,//隨機生成布爾值，默認為ture,為true概率：1/2'status|1':true,'default|1‐3':true,//2的意思是從后面對象中隨機選取2到3個屬性進行展示'detail|2-3':{'id':1,'date':'2005‐01‐01','content':'記錄'}}]})// 輸出結果console.log(JSON.stringify(data, null, 2))
</script>
</html>
1.5． 屬性值是數組
1）‘name|count’: array
通過重復屬性值 array 生成一個新數組，重復次數為 count
2）‘name|min-max’: array
通過重復屬性值 array 生成一個新數組，重復次數大于等于 min，小于等于 max。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Mock</title><script src="js/vuejs-2.5.16.js"></script><script src="js/axios-0.18.0.js"></script><script src="js/mock-min.js"></script>
</head>
<body>
</body>
<script>let data = Mock.mock({'list|2-6': [{//屬性值自動加1,后面1是初始值'id|+1': 1,//測試這個詞語 重復隨機次數：最大9次，最小重復2次'name|2-9': '測試','phone|11': '1',//生成200到1000以內隨機的整數'point|200-1000':0,//生成整數部分大于等于3000，小于等于8000，max小數部分保留2位的數據'money|3000-8000.2':0,//整數部分大于等于3000小于等于8000，max小數部分隨機保留2到4位的小數'money2|1000-2000.2-4':0,//隨機生成布爾值，默認為ture,為true概率：1/2'status|1':true,'default|1‐3':true,//2的意思是從后面對象中隨機選取2到3個屬性進行展示'detail|2-3':{'id':1,'date':'2005‐01‐01','content':'記錄'}}]})// 輸出結果console.log(JSON.stringify(data, null, 2))
</script>
</html>2． 數據占位符定義規范
Mock.Random 是一個工具類，用于生成各種隨機數據。Mock.Random 的方法在數據模板中稱為『占位符』.
書寫格式為: @占位符(參數 [參數])
內置方法列表：
| Type | Method |
|---|---|
| 基本類型 | boolean, natural, integer, float, character, string, range, date, time, datetime, now |
| 圖片 | image, dataImage |
| 顏色 | color |
| 文本 | paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle |
| 姓名 | first, last, name, cfirst, clast, cname |
| 網站 | url, domain, email, ip, tld |
| 地址 | area, region |
| 編號 | guid, id |
使用時只需要把值設置成 @方法名【內置列表名】 即可，比如，生成一個隨機的 Email：
2.1． 基本方法
可以生成隨機的基本數據類型
1，string 字符串
2，integer 整數
3，date 日期
示例如下所示：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Mock</title><script src="js/vuejs-2.5.16.js"></script><script src="js/axios-0.18.0.js"></script><script src="js/mock-min.js"></script>
</head>
<body>
</body>
<script>let data = Mock.mock({'list|10': [{'id|+1': 1,//生成隨機字符串作為名稱，string是內置方法'name':'@string',//生成隨機數字'point':'@integer',//隨機日期'birthday':'@date'}]})// 輸出結果console.log(JSON.stringify(data, null, 2))
</script>
</html>
瀏覽器運行顯示結果如下所示：
{"list": [{"id": 1,"name": "(mq","point": 5083791101873200,"birthday": "1977-07-13"},{"id": 2,"name": "isp@","point": 6599960830871660,"birthday": "1980-01-10"},{"id": 3,"name": "h5w%z","point": 5930212585321868,"birthday": "1986-02-09"},{"id": 4,"name": "4G!@","point": -2998846183626736,"birthday": "2005-11-15"},{"id": 5,"name": "FxRo","point": 1335300809353096,"birthday": "2007-05-15"},{"id": 6,"name": "sSpX","point": 4263721724318444,"birthday": "2008-07-05"},{"id": 7,"name": "3gyb3y","point": -7937459295974808,"birthday": "2009-07-29"},{"id": 8,"name": "$hHr9","point": -1902814810400284,"birthday": "1985-06-09},{"id": 9,"name": "s)Ib5Y","point": -4044267640262532,"birthday": "1975-12-22"},{"id": 10,"name": "mn0L","point": 5526227040106936,"birthday": "1974-02-03"}]
}
可以發現屬性值都是隨機生成的。
2.2． 圖像方法
內置方法image 隨機生成圖片地址
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Mock</title><script src="js/vuejs-2.5.16.js"></script><script src="js/axios-0.18.0.js"></script><script src="js/mock-min.js"></script>
</head>
<body>
</body>
<script>let data = Mock.mock({'list|3': [{'id|+1': 1,'name':'@string','point':'@integer','birthday':'@date','img':'@image'}]})// 輸出結果console.log(JSON.stringify(data, null, 2))
</script>
</html>
瀏覽器生成結果如下所示：
{"list": [{"id": 1,"name": "^XRWg","point": -4210258101944688,"birthday": "1970-11-13","img": "http://dummyimage.com/180x150"},{"id": 2,"name": "OGptm)z","point": -7325415739657424,"birthday": "1998-01-08","img": "http://dummyimage.com/250x250"},{"id": 3,"name": "nKFRq","point": 6928542938653648,"birthday": "1987-12-21","img": "http://dummyimage.com/250x250"}]
}
圖片隨機地址已經生成。
圖片設置的其他用法：
@image()
@image( size )
@image( size, background )
@image( size, background, text )
@image( size, background, foreground, text )
@image( size, background, foreground, format, text )
size：尺寸，格式為：‘寬x高’
background：背景色，格式為：#FFFFFF
text：圖片上顯示的文本
foreground：廣本顏色
format：圖片格式，可選值包括：png、gif、jpg。
@image()
// => “http://dummyimage.com/125x125”
@image(‘200x100’)
// => “http://dummyimage.com/200x100”
@image(‘200x100’, ‘#fb0a2a’)
// => “http://dummyimage.com/200x100/fb0a2a”
@image(‘200x100’, ‘#02adea’, ‘Hello’)
// => “http://dummyimage.com/200x100/02adea&text=Hello”
@image(‘200x100’, ‘#00405d’, ‘#FFF’, ‘Mock.js’)
// => “http://dummyimage.com/200x100/00405d/FFF&text=Mock.js”
@image(‘200x100’, ‘#ffcc33’, ‘#FFF’, ‘png’, ‘!’)
// => “http://dummyimage.com/200x100/ffcc33/FFF.png&text=!”
2.3． 文本方法
@title: 標題
@cword(100) :文本內容 參數為字數
代碼實例如下所示：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Mock</title><script src="js/vuejs-2.5.16.js"></script><script src="js/axios-0.18.0.js"></script><script src="js/mock-min.js"></script>
</head>
<body>
</body>
<script>let data = Mock.mock({'list|3': [{'id|+1': 1,'name':'@string','point':'@integer','birthday':'@date','img':'@image',//隨機標題'title':'@title',//隨機標題內容，字數為20'content':'@cword(20)'}]})// 輸出結果console.log(JSON.stringify(data, null, 2))
</script>
</html>
顯示結果：
{"list": [{"id": 1,"name": "eQw!Qks","point": 2809586035596492,"birthday": "1996-12-28","img": "http://dummyimage.com/336x280","title": "Dxmessvmjh Ykcqcqi Nncy Cwbhicpgj Smdmbbk Zwbsjrhww Qohelmygyx""content": "無深性命象院積少時到但共院太理音究維生學"},{"id": 2,"name": "RgS*","point": -1288728653110828,"birthday": "2005-01-12","img": "http://dummyimage.com/720x300","title": "Ussi Yngavtemlr Kryvkh","content": "好道立或易標花天外路位使身稱深作響向之們"},{"id": 3,"name": "e^o","point": 2829338975044496,"birthday": "1999-01-29","img": "http://dummyimage.com/120x600","title": "Woy Gswrz Hwmrxx","content": "產寫總必指農進和專許想式層人位心準適開習"}]
}
可以發現：
@title： 生成隨機的英文標題
@cword(字數)：生成隨機的中文標題
3）其他的文本方法
l 單個字符：
@character
l 英文單詞
@word
@word(length)
@word(min,max)
l 英文句子
@sentence
@sentence(len)
@sentence(min,max)
l 中文漢字
@cword
@cword(len)
@cword(min,max)
l 中文句子
@csentence
@csentence(len)
@csentence(min,max)
l 中文段落
@cparagraph
@cparagraph(len)
@cparagraph(min,max)
l 中文標題
@ctitle
@ctitle(len)
@ctitle(min,max)
2.4． 名稱方法
1）英文名生成
@first
名
@last
姓
@name
姓名
@name(middle)
middle：是否生成中間名字
@name()
// => “Larry Wilson”
@name(true) //true表示生成
// => “Helen Carol Martinez”
2）中文名
@cfirst
姓
@clast
名
@cname
@cname()
// => “袁軍”
如果需要生成中文名稱，需要在前面加上c字母做一標識。
@cname :中文名稱
@cfirst:中文姓氏
@last:英文姓氏
使用實例如下所示：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Mock</title><script src="js/vuejs-2.5.16.js"></script><script src="js/axios-0.18.0.js"></script><script src="js/mock-min.js"></script>
</head>
<body>
</body>
<script>let data = Mock.mock({'list|3': [{'id|+1': 1,//名'name':'@cname','ename':'@last','cfirst':'@cfirst','point':'@integer','birthday':'@date','img':'@image',//隨機標題'title':'@title',//隨機標題內容，字數為20'content':'@cword(20)'}]})// 輸出結果console.log(JSON.stringify(data, null, 2))
</script>
</html>
2.5． 網絡方法
可以生成url ip email等網絡相關信息
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Mock</title><script src="js/vuejs-2.5.16.js"></script><script src="js/axios-0.18.0.js"></script><script src="js/mock-min.js"></script>
</head>
<body>
</body>
<script>let data = Mock.mock({'list|3': [{'id|+1': 1,//名'name':'@cname','ename':'@last','cfirst':'@cfirst','point':'@integer','birthday':'@date','img':'@image',//隨機標題'title':'@title',//隨機標題內容，字數為20'content':'@cword(20)',//生成地址'url':"@url",//生成ip'ip':"@ip",//生成郵箱'email':"@email"}]})// 輸出結果console.log(JSON.stringify(data, null, 2))
</script>
</html>
生成結果如下所示：
{"list": [{"id": 1,"name": "江強","ename": "White","cfirst": "尹","point": 4877914021134976,"birthday": "1971-07-20","img": "http://dummyimage.com/160x600","title": "Zmbq Lqkt Bvmukqilyb Qbtsdrdn Rzjhyqc Fbzw","content": "門層對表產么高習原四王從區照派天即也就布","url": "news://wyqb.pa/fadm","ip": "41.185.151.157","email": "h.dghxxob@ioldag.yu"},{"id": 2,"name": "姚芳","ename": "Miller","cfirst": "鄭","point": 614768891928184,"birthday": "1999-10-27","img": "http://dummyimage.com/120x90","title": "Igaermo Muwcd Oxuy Phrbpiooq Pmccbcx Jqiniwn","content": "斷放活備者組不取平元數又技度研名于何越后","url": "news://segyvpfd.vc/gfpyvz","ip": "133.35.163.143","email": "u.xnes@isksci.tc"},{"id": 3,"name": "文霞","ename": "Williams","cfirst": "龔","point": 1051041620263212,"birthday": "2006-05-30","img": "http://dummyimage.com/125x125","title": "Ybmuoycm Jsvc Obb Jpydendf","content": "外素特不專現工卻因與發屬集身設本究且重傳","url": "nntp://oip.dz/wrqdpd","ip": "238.129.84.64","email": "e.djfbicgdc@kpvlyvhvt.gn"}]
}
隨機生成網絡地址，ip地址，郵箱地址：用法如下
//生成地址
‘url’:"@url"
//生成ip
‘ip’:"@ip",
//生成郵箱
‘email’:"@email"
2.6． 地址方法
1）生成中國大區：@region 區域 （華北……）
2）生成省份：@province
3）生成城市：@city @city(prefix)
//prefix：布爾值，是否生成所屬的省
@city()
// => “唐山市”
@city(true)
// => “福建省 漳州市”
4）生成縣：@county @county(prefix)
//prefix：布爾值，是否生成所屬省、市
@county()
// => “上杭縣”
@county(true)
// => “甘肅省 白銀市 會寧縣”
5）生成郵政編碼: @zip
6）生成身份證號 @ID
@ID()
// => “420000200710091854”
7）生成GUID字符串 @guid
@guid()
// => “662C63B4-FD43-66F4-3328-C54E3FF0D56E”
生成實例如下所示：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Mock</title><script src="js/vuejs-2.5.16.js"></script><script src="js/axios-0.18.0.js"></script><script src="js/mock-min.js"></script>
</head>
<body>
</body>
<script>let data = Mock.mock({'list|3': [{'id|+1': 1,//名'name':'@cname','ename':'@last','cfirst':'@cfirst','point':'@integer','birthday':'@date','img':'@image',//隨機標題'title':'@title',//隨機標題內容，字數為20'content':'@cword(20)',//生成地址'url':"@url",//生成ip'ip':"@ip",//生成郵箱'email':"@email",//生成區域'erea':'@region',//生成省，市'city':'@city(true)',//縣'contry':'@county(true)','id':'@ID','zip':'@zip','guid':'@guid'}]})// 輸出結果console.log(JSON.stringify(data, null, 2))
</script>
</html>瀏覽器輸出結果：
{"list": [{"id": 1,"name": "楊軍","ename": "Robinson","cfirst": "盧","point": 7707259653262132,"birthday": "2017-02-08","img": "http://dummyimage.com/336x280","title": "Lhefgmvoo Aocod Wlbql Dsdhwm Mqdaoaa Oknucn Urrcw","content": "到局這方多再律求認辦萬員置特目且戰持十省","url": "cid://vnthestwl.tp/ijdlnclh","ip": "37.75.137.193","email": "y.ddwhfbrgz@fglsuyufkb.mw","erea": "華中","city": "香港特別行政區 九龍","contry": "寧夏回族自治區 固原市 涇源縣","zip": "269948","guid": "8Bc7Cb4A-e114-53de-B815-9db9cD57faA1"},{"id": 2,"name": "何敏","ename": "Taylor","cfirst": "廖","point": 7537535106427220,"birthday": "1973-07-31","img": "http://dummyimage.com/240x400","title": "Ajwmx Nmdfubn Qjolmdslq Cduoktjva","content": "強用回裝近為為術白明養被隊治走鐵話格入他","url": "telnet://cwow.no/rslekzq","ip": "79.188.30.248","email": "h.bwul@lnxenhizew.mp","erea": "華東","city": "陜西省 咸陽市","contry": "西藏自治區 那曲地區 巴青縣","zip": "386548","guid": "87b8a66c-13B7-eCde-f31e-Ae3E91493AE0"},{"id": 3,"name": "葉娜","ename": "Garcia","cfirst": "姚","point": 7922600921770400,"birthday": "1972-04-01","img": "http://dummyimage.com/250x250","title": "Umumjnomv Aualxrhxs Dhbduggch Qcxv Uqjtmoytr","content": "里鐵還角深分非新了時小入層素幾立傳壓按和","url": "telnet://jyft.nz/rypdqqpm","ip": "131.162.164.166","email": "k.iddfzs@xdvm.io","erea": "華東","city": "四川省 宜賓市","contry": "香港特別行政區 九龍 黃大仙區","zip": "497267","guid": "01EBF61D-0Eef-01dd-B971-74aEF67fd53e"}]
}
三、 Mock.js案例
1． 需求分析
向Mock.js模擬好的書籍發送請求，展示用戶列表數據。
請求：/user/list
請求方式：get
2． 模擬數據
let data = Mock.mock('/user/list','get',{'list|3': [{'id|+1': 1,//名'name':'@cname','ename':'@last','cfirst':'@cfirst','point':'@integer','birthday':'@date','img':'@image',//隨機標題'title':'@title',//隨機標題內容，字數為20'content':'@cword(20)',//生成地址'url':"@url",//生成ip'ip':"@ip",//生成郵箱'email':"@email",//生成區域'erea':'@region',//生成省，市'city':'@city(true)',//縣'contry':'@county(true)','id':'@ID','zip':'@zip','guid':'@guid'}]})
3． 發送ajax請求
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Mock</title><script src="js/vuejs-2.5.16.js"></script><script src="js/axios-0.18.0.js"></script><script src="js/mock-min.js"></script>
</head>
<body><div id="app">
<table border="1px;" style="width: 600px;height: 60px;"><tr><td>編號</td><td>姓名</td><td>標題</td><td>地址</td></tr><tr v-for="(u,k) in users"><td>{{k+1}}</td><td>{{u.name}}</td><td>{{u.title}}</td><td>{{u.city}}</td></tr></table></div>
</body>
<script>let data = Mock.mock('/user/list','get',{'list|3': [{'id|+1': 1,//名'name':'@cname','ename':'@last','cfirst':'@cfirst','point':'@integer','birthday':'@date','img':'@image',//隨機標題'title':'@title',//隨機標題內容，字數為20'content':'@cword(20)',//生成地址'url':"@url",//生成ip'ip':"@ip",//生成郵箱'email':"@email",//生成區域'erea':'@region',//生成省，市'city':'@city(true)',//縣'contry':'@county(true)','id':'@ID','zip':'@zip','guid':'@guid'}]});new Vue({el:'#app',data:{users:[],},created:function(){//發送ajax請求axios.get('/user/list').then((res)=>{this.users = res.data.list;})}})
</script>
</html>
---------------------
作者：Armymans
來源：CSDN
原文：https://blog.csdn.net/qq_43652509/article/details/84029619
版權聲明：本文為作者原創文章，轉載請附上博文鏈接！
內容解析By：CSDN,CNBLOG博客文章一鍵轉載插件
