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(mén)教程》、《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-08JavaScript實(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-11layui-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-01JS實(shí)現(xiàn)數(shù)組刪除指定元素功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)數(shù)組刪除指定元素功能,涉及javascript數(shù)組遍歷、排序、判斷等相關(guān)操作技巧,需要的朋友可以參考下2019-06-06JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記(二十一) JavaScript中的XML
雖然XML和DOM已經(jīng)變成Web開(kāi)發(fā)的重要組成部分,但目前僅IE跟Mozilla支持客戶端的XML處理2012-09-09JavaScript面試開(kāi)發(fā)常用的知識(shí)點(diǎn)總結(jié)
這篇文章主要為大家詳細(xì)總結(jié)了JavaScript面試開(kāi)發(fā)常用的知識(shí)點(diǎn),感興趣的小伙伴們可以參考一下2016-08-08