mock.js實現(xiàn)模擬生成假數(shù)據(jù)功能示例
更新時間：2019年01月15日 11:42:32 作者：唐宋元明清.
這篇文章主要介紹了mock.js實現(xiàn)模擬生成假數(shù)據(jù)功能,結(jié)合實例形式分析了mock.js插件生成模擬數(shù)據(jù)的相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了mock.js實現(xiàn)模擬生成假數(shù)據(jù)功能。分享給大家供大家參考，具體如下：
mock使用方法很簡單, 下面是簡單的用法, 詳細的用法可以看官方文檔, 寫的很清楚, 下面的代碼直接拷貝到本地html文件, 雙擊打開即可生成你想要的數(shù)據(jù)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>MockJS-demo</title>
<script type="text/javascript" src="http://mockjs.com/bower_components/mockjs/dist/mock.js"></script>
</head>
<body>
<script>
var Random = Mock.Random;
var data = Mock.mock({
'list|4': [{
'id|+1': 1,
'number|1-10': 7,
// 英文姓名
'name' :'@name',
// 顏色
'color': '@color',
// 英文標題
'title': '@title',
// 鏈接
'url': '@url("http")',
// 郵箱
'email': '@email',
// 圖片
'image': Random.image('200x200', '#50B347', '#FFF', 'Mock.js'),
// 時間
'date': '@date("yyyy-MM-dd HH:mm:ss")',
'date2': '@dateTime',
// 漢字
'ctitle': '@ctitle(8)',
// 漢字姓名
'canme': '@cname()',
// 地址
'cadd': '@province' + '@city' + '@county',
// 手機號
'phone': /^1[385][1-9]\d{8}/
}]
});
console.log(JSON.stringify(data, null, 4))
</script>
</body>
</html>
這里使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試運行上述代碼，可得如下運行結(jié)果：
更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
您可能感興趣的文章:
- 使用mock.js隨機數(shù)據(jù)和使用express輸出json接口的實現(xiàn)方法
- vue+mockjs模擬數(shù)據(jù)實現(xiàn)前后端分離開發(fā)的實例代碼
- Node.js服務(wù)器環(huán)境下使用Mock.js攔截AJAX請求的教程
- vue-cli項目中使用Mockjs詳解
- vue+vuecli+webpack中使用mockjs模擬后端數(shù)據(jù)的示例
- Vue+Mock.js模擬登錄和表格的增刪改查功能
- Node.js測試中的Mock文件系統(tǒng)詳解
- kmock javascript 單元測試代碼
- express+mockjs實現(xiàn)模擬后臺數(shù)據(jù)發(fā)送功能
- vue+axios+mock.js環(huán)境搭建的方法步驟
- mockjs+vue頁面直接展示數(shù)據(jù)的方法
相關(guān)文章
這篇文章主要介紹了JS如何實現(xiàn)距離上次刷新已過多少秒,需要的朋友可以參考下2014-05-05
用最少的代碼,做最多的事情. getElementsByTagName的簡寫方法.2010-06-06
極致之美——百行代碼實現(xiàn)全新智能語言...2007-03-03
這篇文章主要介紹了與iframe進行跨域交互的解決方案,本文通過實例代碼給大家講解的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要為大家介紹了JavaScript的定時器 ，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章介紹了JavaScript獲取字符串實際長度(包含中英文)的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了JS實現(xiàn)的仿淘寶交易倒計時效果,涉及JavaScript針對時間與日期的動態(tài)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
javascript實現(xiàn)對話框功能警告（alert 消息對話框）確認（confirm 消息對話框）
這篇文章主要介紹了javascript：警告（alert 消息對話框），確認（confirm 消息對話框）的實現(xiàn)代碼，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
在工控機觸摸屏中,通過瀏覽器web端進行表單輸入,當聚焦表單輸入框并不會出現(xiàn)虛擬鍵盤進行輸入,本文介紹將給大家介紹如何通過js調(diào)用工控機(Windows)虛擬鍵盤,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2024-01-01
JS 滾動事件window.onscroll與position：fixed寫兼容IE6的回到頂部組件
這篇文章主要介紹了JS 滾動事件window.onscroll與position：fixed寫兼容IE6的回到頂部組件的相關(guān)資料,需要的朋友可以參考下2016-10-10