mock.js實(shí)現(xiàn)模擬生成假數(shù)據(jù)功能示例
本文實(shí)例講述了mock.js實(shí)現(xiàn)模擬生成假數(shù)據(jù)功能。分享給大家供大家參考,具體如下:
mock使用方法很簡(jiǎn)單, 下面是簡(jiǎn)單的用法, 詳細(xì)的用法可以看官方文檔, 寫(xiě)的很清楚, 下面的代碼直接拷貝到本地html文件, 雙擊打開(kāi)即可生成你想要的數(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',
// 英文標(biāo)題
'title': '@title',
// 鏈接
'url': '@url("http")',
// 郵箱
'email': '@email',
// 圖片
'image': Random.image('200x200', '#50B347', '#FFF', 'Mock.js'),
// 時(shí)間
'date': '@date("yyyy-MM-dd HH:mm:ss")',
'date2': '@dateTime',
// 漢字
'ctitle': '@ctitle(8)',
// 漢字姓名
'canme': '@cname()',
// 地址
'cadd': '@province' + '@city' + '@county',
// 手機(jī)號(hào)
'phone': /^1[385][1-9]\d{8}/
}]
});
console.log(JSON.stringify(data, null, 4))
</script>
</body>
</html>
這里使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試運(yùn)行上述代碼,可得如下運(yùn)行結(jié)果:

更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- 使用mock.js隨機(jī)數(shù)據(jù)和使用express輸出json接口的實(shí)現(xiàn)方法
- vue+mockjs模擬數(shù)據(jù)實(shí)現(xiàn)前后端分離開(kāi)發(fā)的實(shí)例代碼
- Node.js服務(wù)器環(huán)境下使用Mock.js攔截AJAX請(qǐng)求的教程
- vue-cli項(xiàng)目中使用Mockjs詳解
- vue+vuecli+webpack中使用mockjs模擬后端數(shù)據(jù)的示例
- Vue+Mock.js模擬登錄和表格的增刪改查功能
- Node.js測(cè)試中的Mock文件系統(tǒng)詳解
- kmock javascript 單元測(cè)試代碼
- express+mockjs實(shí)現(xiàn)模擬后臺(tái)數(shù)據(jù)發(fā)送功能
- vue+axios+mock.js環(huán)境搭建的方法步驟
- mockjs+vue頁(yè)面直接展示數(shù)據(jù)的方法
相關(guān)文章
js實(shí)現(xiàn)使用鼠標(biāo)拖拽切換圖片的方法
這篇文章主要介紹了js實(shí)現(xiàn)使用鼠標(biāo)拖拽切換圖片的方法,涉及javascript操作圖片實(shí)現(xiàn)輪播效果的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05
關(guān)于JavaScript數(shù)組你所不知道的3件事
這篇文章主要為大家詳細(xì)介紹了關(guān)于JavaScript數(shù)組三個(gè)并不那么常見(jiàn)的功能,你所不知道的事情,感興趣的小伙伴們可以參考一下2016-08-08
JavaScript實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的幾種常用方式
這篇文章主要介紹了JavaScript實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的幾種常用方式,結(jié)合實(shí)例形式對(duì)比分析了JavaScript頁(yè)面跳轉(zhuǎn)的常見(jiàn)實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
layui-select動(dòng)態(tài)選中值的例子
今天小編就為大家分享一篇layui-select動(dòng)態(tài)選中值的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
一些在TypeScript上費(fèi)過(guò)時(shí)間的地方總結(jié)
這篇文章主要給大家介紹了關(guān)于一些在ts上費(fèi)過(guò)時(shí)間的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-11-11
登陸成功后自動(dòng)計(jì)算秒數(shù)執(zhí)行跳轉(zhuǎn)
本文實(shí)現(xiàn)的是這樣的一個(gè)功能登陸成功后自動(dòng)查秒跳轉(zhuǎn),具體示例如下,不了解的朋友可以學(xué)習(xí)下哦2014-01-01
JS實(shí)現(xiàn)數(shù)組刪除指定元素功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)數(shù)組刪除指定元素功能,涉及javascript數(shù)組遍歷、排序、判斷等相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記(二十一) JavaScript中的XML
雖然XML和DOM已經(jīng)變成Web開(kāi)發(fā)的重要組成部分,但目前僅IE跟Mozilla支持客戶端的XML處理2012-09-09
JavaScript面試開(kāi)發(fā)常用的知識(shí)點(diǎn)總結(jié)
這篇文章主要為大家詳細(xì)總結(jié)了JavaScript面試開(kāi)發(fā)常用的知識(shí)點(diǎn),感興趣的小伙伴們可以參考一下2016-08-08

