JSON-server和mock.js
mock文件夹下 db.json db.js
json-sever使用 安装:npm install json-server -g
/mock 目录下执行json-server db.json -p 3003
mock.js使用 安装:npm install mockjs -g

/mock 下运行,db.js是文件名,3003是端口号 json-server db.js -p 3003

原文链接 https://segmentfault.com/a/1190000012170435#articleHeader2

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

数据生成器有很多,比较出名的有 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 那么多,但是由于其对中文的良好支持,并且使用了位于国内的
随机图片提供商,显然是更适合国情的选择。

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=别角置"
]
}]

json-server 和mock.js生成大量json数据的更多相关文章

  1. MOCK.JS 生成随机数据,拦截 Ajax 请求

    mock.js 的用处 前后端分离 :让前端攻城师独立于后端进行开发. 增加单元测试的真实性 :通过随机数据,模拟各种场景. 开发无侵入 :不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响 ...

  2. vue-cli+mock.js+axios模拟前后台数据交互

    最近工作不是很忙,自己做了一个vue的移动端的小项目,涉及到后台数据的时候,网上查阅了一些资料,因为是自己写的项目没有后台只能自己模拟数据,刚开始就自己写了一些静态数据后来觉得尽量模拟真实的比较好些, ...

  3. asp.net中json格式化及在js中解析json

    类: public class UploadDocumentItem { public UploadDocumentItem() { } public string DocMuid { get; se ...

  4. 【json/regex】将简单对象生成的json文进行内部排序后再输出

    有这样一个实体类: package com.hy; public class Emp { private int id; private int age; private String name; p ...

  5. 利用js生成读取页面数据并导出为excel

    //核心,js部分 */var navs = new Vue({ el: '#navs', data: { navs: [] }, ready: function () { this.$http.ge ...

  6. 使用node.js + json-server + mock.js 搭建本地开发mock数据服务

    在开发过程中,前后端不论是否分离,接口多半是滞后于页面开发的.所以建立一个REST风格的API接口,给前端页面提供虚拟的数据,是非常有必要的.对比过多种mock工具后,我最终选择了使用 json se ...

  7. 让前端攻城师独立于后端进行开发: Mock.js

    一.Mock.js是什么? 目前的大部分公司的项目都是采用的前后端分离, 后端接口的开发和前端人员是同时进行的. 那么这个时候就会存在一个问题, 在页面需要使用大量数据进行渲染生成前, 后端开发人员的 ...

  8. json server的简单使用(附:使用nodejs快速搭建本地服务器)

    作为前端开发人员,经常需要模拟后台数据,我们称之为mock.通常的方式为自己搭建一个服务器,返回我们想要的数据.json server 作为工具,因为它足够简单,写少量数据,即可使用. 安装 首先需要 ...

  9. 【JS对象、JSON字符串】之间的相互转换

    在Firefox,chrome,opera,safari,ie9,ie8等浏览器直接可以用JSON对象的stringify()和parse()方法. 1.JSON.stringify(obj)将JS对 ...

随机推荐

  1. python: 函数递归与尾递归

    如果一个函数在内部调用自己,那么这个函数就是递归函数. 例如一个阶乘函数:fact(n)=n! ,其实可以写成 fact(n)=n x fact(n-1). fact(n) 以递归的方式可以表示为: ...

  2. MySQL学习 EXISTS的用法 转载

    比如在Northwind数据库中有一个查询为 SELECT c.CustomerId,CompanyName FROM Customers c WHERE EXISTS( SELECT OrderID ...

  3. day34 反射、面向对象内置方法:如__str__、面向对象的软件开发

    Python之路,Day21 = 反射.面向对象内置方法:如__str__.面向对象的软件开发 几个内置查看的方法使用 .__base__ 查看类的继承结构.mro() 对象找属性的顺序存在里面 -- ...

  4. Android问题集锦An error occurred while automatically activating bundle com.android.ide.eclipse.adt .

    这是Eclipse的问题,重启之后问题依旧. 在坛子里找到这个办法,果然好用. 命令行到eclipse路径运行:eclipse.exe -clean

  5. CF377D Developing Game

    题目链接: luogu 题目分析: 把每个人当成一个三元组\([l_i, r_i, v_i]\) 考虑每个人对哪个能力区间\([L, R]\)有贡献 应该是左端点在\([l_i, v_i]\),右端点 ...

  6. Http学习(二)

    使用首部字段是为了给浏览器和服务器提供报文主体大小.所使用语言.认证信息等 4种首部字段类型 通用首部字段 请求首部字段 响应首部字段 实体首部字段 详细说明: HTTP首部字段类型 通用首部字段: ...

  7. 固定定位fixed,绝对定位absolute,相对定位relative;以及overflow

    固定定位position:fixed /*固定定位 1.定位属性值:fixed 2.在页面中不再占位(浮起来了) 3.一旦定位后,定位的布局方位 top.bottom.left.right都能参与布局 ...

  8. jedis3.1.0在weblogic(jdk1.6)中无法运行

    文章目录 错误 探索 总结 错误 在tomcat中运行是没有问题的,可是在weblogic中是不能够运行的,weblogic中的jdk客户要求是1.6的. 如果更换版本jedis2.9.0是没有问题的 ...

  9. error LNK1104: 无法打开文件“C:\Users\Administrator\Desktop\....\\xxxx.exe”

    1.错误原因:项目在在打开前已经打开了win32里面的程序,并且运行.  解决方法:关闭直接在win32中运行的程序,再点击调试 2.暂时不知道原因,打开程序还会报无权限创建可执行文件.如下图所示 解 ...

  10. vue之.native修饰符

    .native 修饰符就是用来注册元素的原生事件而不是组件自定义事件的 比如:自定义 Button.vue 组件 <template> <button type="butt ...