什么是mockjs
- 前后端分離（讓前端攻城師獨立于后端進行開發）
- 增加單元測驗的真實性（通過隨機資料，模擬各種場景）
- 開發無侵入（不需要修改既有代碼，就可以攔截 Ajax 請求，回傳模擬的回應資料）
- 用法簡單（符合直覺的介面）
- 資料型別豐富（支持生成隨機的文本、數字、布林值、日期、郵箱、鏈接、圖片、顏色等）
- 方便擴展（支持支持擴展更多資料型別，支持自定義函式和正則）
安裝
npm install mockjs
使用 Mock
var Mock = require('mockjs')
var data = https://blog.csdn.net/weixin_45820444/article/details/Mock.mock({
// 屬性 list 的值是一個陣列，其中含有 1 到 10 個元素'list|1-10': [{
// 屬性 id 是一個自增數，起始值為 1，每次增 1
'id|+1': 1
}]
})
// 輸出結果
console.log(JSON.stringify(data, null, 4))
Bower
安裝
npm install -g bower
bower install --save mockjs< script type=“text/javascript” src="https://blog.csdn.net/weixin_45820444/article/details/bower_components/mockjs/dist/mock.js">< /script>
RequireJS (AMD)
配置 Mock 路徑
require.config({
paths: {
mock: 'http://mockjs.com/dist/mock'
}
})
// 加載 Mock
require(['mock'], function(Mock){
// 使用 Mock
var data = https://blog.csdn.net/weixin_45820444/article/details/Mock.mock({'list|1-10': [{
'id|+1': 1
}]
})
// 輸出結果
document.body.innerHTML +=
'<pre>' +
JSON.stringify(data, null, 4) +
'</pre>'
})
// ==>
{
"list": [
{
"id": 1
},
{
"id": 2
},
{
"id": 3
}
]
}
Sea.js (CMD)
因為 Sea.js 社區尚未提供 webpack 插件，所以 Mock.js 暫不完整支持通過 Sea.js 加載，
一種變通的方式是，依然通過 Sea.js 配置和加載 Mock.js，然后訪問全域變數 Mock，
配置 Mock 路徑
seajs.config({
alias: {
mock: 'http://mockjs.com/dist/mock.js'
}
})
// 加載 Mock
seajs.use('mock', function(__PLACEHOLDER) {
// 使用 Mock（全域變數）
var data = https://blog.csdn.net/weixin_45820444/article/details/Mock.mock({'list|1-10': [{
'id|+1': 1
}]
});
document.body.innerHTML +=
'<pre>' +
JSON.stringify(data, null, 4) +
'</pre>'
})
Random CLI
全域安裝
$ npm install mockjs -g
執行
$ random url
=> http://rmcpx.org/funzwc
幫助
random -h
Mock.js 最初的靈感來自 Elijah Manor 的博文 ocking Introduction，
語法參考了 mennovanslooten/mockJSON，
隨機資料參考了 victorquinn/chancejs，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/4829.html
標籤：其他
上一篇：CSS基礎知識第三篇
下一篇：【CSS3】常用的選擇器