摘要:上一篇演示了如何安裝并運行在這里將使用第三方庫讓模擬的數據更加豐滿和實用。使用動態數據上一篇演示時,使用了作為數據載體,雖然方便,但是如果需要大量的數據,則顯得力不從心。
上一篇演示了如何安裝并運行 json server , 在這里將使用第三方庫讓模擬的數據更加豐滿和實用。
使用動態數據上一篇演示時,使用了 db.json 作為數據載體,雖然方便,但是如果需要大量的數據,則顯得力不從心。
幸好 json server 可以通過js動態生成json格式數據,官方例子為生成1000組user數據:
# /mock/db.js module.exports = function() { var data = { users: [] } // Create 1000 users for (var i = 0; i < 1000; i++) { data.users.push({ id: i, name: "user" + i }) } return data }
/mock 下運行
json-server db.js -p 3003
我們訪問 http://localhost:3003/news/ 看到的數據是
[ {"id": 0,"name": "user0"}, {"id": 1,"name": "user1"}, {"id": 2,"name": "user2"}, {"id": 3,"name": "user3"}, ... {"id": 999,"name": "user999"} ]
但是在開發環境中,name 這個屬性應該是諸如 “李鐵蛋”, “張艷華” 或者是 “Brenda Thomas”,
“Daniel Wilson” 這樣接地氣的名字,而不是 “user0”, “user1” 這樣讓人望而生畏的名字,對于用戶的
年齡,性別,籍貫,也應該有比較合理的數據展示。
數據生成器有很多,比較出名的有 faker ,chance ,mockjs 等,其中最為強大的非 faker 莫屬,不但擁有幾乎全部常用的數據格式,而且還有中英德法等多種語言的數據。但是在實際測試中發現,faker 對中文數據的支持還是以西方文字為基礎,并不能很好的模擬中文,例如:
let faker = require("faker"); faker.locale = "zh_CN"; console.log(faker.address.city()); => 南 羅 console.log(faker.address.streetName()); => 陳 橋 console.log(faker.company.companyName()); => 靜琪 - 越澤 console.log(faker.date.month()); => May console.log(faker.internet.email()); => 87@yahoo.com console.log(faker.phone.phoneNumber()); => 922-61957652
這些看起來有些怪異的中文格式,多半是不能用于國內的數據模擬的,我們再看看 mockjs 的表現:
let Mock = require("mockjs"); let Random = Mock.Random; console.log(Random.city()); => 珠海市 console.log(Random.cname()); => 韓桂英 console.log(Random.date()); => 2007-08-05 console.log(Mock.mock({ => {stars: "★★★★★"} "stars|1-10": "★" })); Random.image("200x100", "#4A7BF7", "hello") => 見下圖
雖然 mockj s可以模擬的數據不如 faker 那么多,但是由于其對中文的良好支持,并且使用了位于國內的
隨機圖片提供商,顯然是更適合國情的選擇。
請先用15分鐘閱讀 mockjs官方文檔
安裝mockjs在 /mock 目錄下安裝
npm install mockjs --saveMock.mock
我知道有些人不會去認真的閱讀官方文檔,所以在此摘抄一些官方文檔中的例子作為示范:
// repeat 方法(部分) Mock.mock({ "string|5": "★" => "string": "★★★★★" "string|1-10": "★" => "string": "★★" "number|1-100": 100 => "number": 85 "number|1-100.2": 100 => "number": 25.69 })Mock.Random
我知道有些人不會去認真的閱讀官方文檔,所以在此摘抄一些官方文檔中的例子作為示范:
// random 方法(部分) Random.integer(60, 100) => 78 Random.float(60, 100) => 89.565475 Random.range(60, 100) => [60,61,62,...,99] Random.date() => "2018-12-28" Random.image("200x100","#396") => "http://dummyimage.com/200x100/396" Random.color() => "#79d8f2" (默認使用hex顏色) Random.county(true) => "浙江省 舟山市 岱山縣"為什么不在瀏覽器中使用mockjs
通過閱讀 mockjs 的官方文檔可以發現,它其實是作為一個獨立的 mock server 存在的,就算沒有json server,一樣可以反饋數據,但是由于以下一些缺點,讓我只能把它作為一個數據構造器來使用:
不能跨域使用
與某些框架中的路由處理邏輯沖突
無法定義復雜的數據結構,比如下面的數據結構,images 將會是字符串 [object object], 而非預想中的數組:
Mock.mock({ "list|1-10": [ "id|+1": 1, "images": [1,2,3] ] })
無法自定義較為復雜的路由
示例下面是一個使用 mockjs 構造的比較復雜的數據格式,對象是一個新聞列表,其中有100條新聞,每條新聞有對應的id,標題,內容,簡介,標簽,瀏覽量,和一個圖片數組:
# /mock/db.js let Mock = require("mockjs"); let Random = Mock.Random; module.exports = function() { var data = { news: [] }; var images = [1,2,3].map(x=>Random.image("200x100", Random.color(), Random.word(2,6))); for (var i = 0; i < 100; i++) { var content = Random.cparagraph(0,10); data.news.push({ id: i, title: Random.cword(8,20), desc: content.substr(0,40), tag: Random.cword(2,6), views: Random.integer(100,5000), images: images.slice(0,Random.integer(1,3)) }) } return data }
/mock 下運行
json-server db.js -p 3003
訪問 http://localhost:3003/news 看到的數據是:
[ { "id": 0, "title": "元小總小把清保住影辦歷戰資和總由", "desc": "共先定制向向圓適者定書她規置斗平相。要廣確但教金更前三響角面等以白。眼查何參提適", "tag": "值集空", "views": 3810, "images": [ "http://dummyimage.com/200x100/79f2a5&text=別角置", "http://dummyimage.com/200x100/f28279&text=收面幾容受取", "http://dummyimage.com/200x100/7993f2&text=做件" ] }, { "id": 1, "title": "物器許條對越復術", "desc": "方江周是府整頭書生權部部條。始克識史但給又約同段十子按者感律備。關長廠平難山從合", "tag": "分七眼術保", "views": 4673, "images": [ "http://dummyimage.com/200x100/79f2a5&text=別角置" ] }, { "id": 2, "title": "但學卻連質法計性想般最", "desc": "以群親它天即資幾行位具回同務度。場養驗快但部光天火金時內我。任提教毛辦結論感看還", "tag": "響六", "views": 4131, "images": [ "http://dummyimage.com/200x100/79f2a5&text=別角置", "http://dummyimage.com/200x100/f28279&text=收面幾容受取", "http://dummyimage.com/200x100/7993f2&text=做件" ] }, ... { "id": 99, "title": "則群起然線部其深我位價業紅候院", "desc": "為高值務須西生型住斷況里聽。志置開用她你然始查她響元還。照員給門次府此據它后支越", "tag": "何你", "views": 2952, "images": [ "http://dummyimage.com/200x100/79f2a5&text=別角置" ] } ]參考資料
json-server源碼 : json-server
mockjs源碼 : mockjs
demo : 示例代碼
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/79762.html
摘要:一什么是架構即的縮寫,我們把他翻譯為表述性狀態傳遞,是博士在年他的博士論文中提出來的一種軟件架構風格。是個無狀態的協議,所以狀態就保存在服務器端。只要少量的數據就可使用,支持和。同時支持,同時提供一系列的查詢方法如。 一、什么是RESTful架構? REST即Representational State Transfer的縮寫,我們把他翻譯為表述性狀態傳遞,是Roy Fielding博...
摘要:今天發現了一個神器在他的幫助下可以在很短的時間內搭建一個然后就可以讓前端在不依賴后端的情況下進行開發啦關于什么是設計指南阮一峰簡單來說,是一個模塊,運行服務器,你可以指定一個文件作為的數據源。更多屬性可以查看這里好啦,基本就是這樣啦, 今天發現了一個神器——json-server!在他的幫助下可以在很短的時間內搭建一個Rest API, 然后就可以讓前端在不依賴后端的情況下進行開發啦!...
摘要:曹縣宣布昨日晚間登日成功長江流域首次發現海豚支持黨中央決定抄寫黨章勢在必行為了方便,再創建一個文件,寫入然后使用到目錄下執行命令,如果成功會出現你的電腦中文件夾所在目錄的路徑如果不成功請檢查文件的格式是否正確。 在開發過程中,前后端不論是否分離,接口多半是滯后于頁面開發的。所以建立一個REST風格的API接口,給前端頁面提供虛擬的數據,是非常有必要的。 對比過多種mock工具后,我最終...
摘要:前面演示了如何安裝并運行和使用第三方庫真實化模擬數據下面將展開更多的配置項和數據操作。示例數據源元小總小把清保住影辦歷戰資和總由共先定制向向圓適者定書她規置斗平相。 前面演示了如何安裝并運行 json server , 和使用第三方庫真實化模擬數據 , 下面將展開更多的配置項和數據操作。 配置項 在安裝好json server之后,通過 json-server -h 可以看到如下配置項...
摘要:官方地址使用可全局安裝,也可針對項目安裝。可用開啟服務。數據文件格式如下讓讀書點燃夢想地點濱江星耀城讓讀書點燃夢想地點濱江星耀城仿京東購物車仿京東購物車修改里面的命令。 在前端開發中,如果后端接口還沒有提供,前端拿不到數據,可能就沒法繼續寫一些交互行為的代碼。這一問題可通過json-server來很好地解決。本文主要講如何將json-server和webpack進行整合,基于vue-w...
閱讀 3098·2023-04-26 01:58
閱讀 951·2021-11-24 09:38
閱讀 3285·2021-09-03 10:29
閱讀 713·2021-08-21 14:10
閱讀 1488·2019-08-30 15:44
閱讀 3085·2019-08-30 14:10
閱讀 3211·2019-08-29 16:32
閱讀 1476·2019-08-29 12:48