用JSON-server模仿REST API(二) 动态数据

2019年8月30日 166次阅读 来源: 烈日神巫

上一篇演示了怎样装置并运转 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” 如许让人望而却步的名字，关于用户的
岁数，性别，籍贯，也应该有比较合理的数据展现。

为何挑选mockjs《用JSON-server模仿REST API(二) 动态数据》

数据天生器有许多，比较着名的有 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')
  =>  见下图

《用JSON-server模仿REST API(二) 动态数据》

虽然 mockj s能够模仿的数据不如 faker 那么多，然则因为其对中文的优越支撑，而且运用了位于国内的
随机图片提供商，显然是更适合国情的挑选。

mockjs用法示例

请先用15分钟浏览 mockjs官方文档

装置mockjs

在 /mock 目录下装置

npm install mockjs --save

Mock.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 ： 示例代码

    原文作者：烈日神巫
    原文地址: https://segmentfault.com/a/1190000005793320
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞