转载于

今天发现了一个神器——json-server!在他的帮助下可以在很短的时间内搭建一个Rest API, 然后就可以让前端在不依赖后端的情况下进行开发啦!

关于什么是RESTful API:

《RESTful API 设计指南》—— 阮一峰

http://www.ruanyifeng.com/blo...

JSON-Server

简单来说,JSON-Server是一个Node模块,运行Express服务器,你可以指定一个json文件作为api的数据源。

举个例子:

我们现在想做一个app,用来管理客户信息,实现简单的CRUD功能(create/retrieve/update/delete),比如:

  • 获取客户信息

  • 增加一个客户

  • 删除一个客户

  • 更新客户信息

好啦,接下来我们就使用json-server完成这一系列动作吧!

安装JSON-Server

npm install -g json-server   //osx系统加'sudo'

新建一个文件夹同时cd它:

mkdir customer-manager && cd customer-manager

新建一个json文件,然后存放一点数据进去:

touchcustomers.json

{
"customers": [
{ "id": 1, "first_name": "John", "last_name": "Smith", "phone": "219-839-2819" }
]
}

开启json-server功能

所有你要做的事情只是让json-server指向这个customers.json就ok啦!

json-server customers.js

然后出现这个提示就ok啦!

另外,JSON-Server很酷的一点就是支持各种GET/POST/PUT/DELETE的请求。

看几个例子:

//GET
fetch('http://localhost:3000/tasks/')
.then(function(response) {return response.json()
}).then(function(json) {
console.log('parsed json: ', json)
}).catch(function(ex) {
console.log('parsing failed: ', ex)
}); //POST
fetch('http://localhost:3000/tasks/', {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
"title": "Add a blogpost about Angular2",
"dueDate": "2015-05-23T18:25:43.511Z",
"done": false
})
}).then(function(response) {return response.json()
}).then(function(json) {
console.log('parsed json: ', json)
}).catch(function(ex) {
console.log('parsing failed: ', ex)
}); //PUT
fetch('http://localhost:3000/tasks/1', { //在url后面指定下id就好
method: 'put',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
"done": true
})
}).then(function(response) {return response.json()
}).then(function(json) {
console.log('parsed json: ', json)
}).catch(function(ex) {
console.log('parsing failed: ', ex)
}); //DELETE
fetch('http://localhost:3000/tasks/1', {
method: 'delete'
}).then(function(response) {return response.json()
}).then(function(json) {
console.log('parsed json: ', json)
}).catch(function(ex) {
console.log('parsing failed: ', ex)
});

JSON-Server基本就是这样啦!接下来介绍另一个神器~

Faker.js

如果要自己瞎编API数据的话也是比较烦恼,用faker.js就可以轻松解决这个问题啦!他可以帮助你自动生成大量fake的json数据,作为后端数据~

安装faker.js

还是使用npm来安装faker.js:

npm install faker

现在我们用javascript生成一个包含50个客户数据的json文件:

    //customers.js
var faker = require('faker') functiongenerateCustomers () {
var customers = [] for (var id = 0; id < 50; id++) {
var firstName = faker.name.firstName()
var lastName = faker.name.firstName()
var phoneNumber = faker.phone.phoneNumberFormat() customers.push({
"id": id,
"first_name": firstName,
"last_name": lastName,
"phone": phoneNumber
})
} return { "customers": customers }
} // 如果你要用json-server的话,就需要export这个生成fake data的function
module.exports = generateCustomers

然后让json-server指向这个js文件:

json-server customers.js

这样你就可以在http://localhost:3000/customers里看到50个客户数据了。

更多faker.js属性可以查看这里:

https://github.com/marak/Fake...

好啦,基本就是这样啦,happy coding!

5、faker.js数据模拟的更多相关文章

  1. Mock.js数据模拟

    数据来源方式: 为什么要用mockjs 实际开发中,前后端分离,前端需要后端的接口去完成页面的渲染,但是并不能等到后端成员写完接口再开始进行测试.大部分情况下,前后端需要同时进行开发.因此便需要moc ...

  2. ssr.js数据模拟工具

    ssr相当于是搭建了一个 Mock Server ,构建假数据,然后把这些假数据存到 JSON 文件上,Mock Server 可以响应请求或者生成页面,当然也可以顺便生成 API 文档. 强制跨域访 ...

  3. vue前后分离---数据模拟

    最近为在做CRM的前期工作,忙里偷闲写了个关于数据模拟方面的东西 主要是现在博客中满天都再说前后分离,但是还没有几个实际操作的---让许多新手{-_-} 方法一: 启动一个express静态服务器-- ...

  4. 你需要了解的JS框架

    excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js       用途:构建数据统计图表,兼容多浏览器 ...

  5. 前端开发需要了解的JS插件

    excanvas.js/Chart.js/cubism.js/d3.js/dc.js/dx.chartjs.js/echarts.js/flot.js 用途:构建数据统计图表,兼容多浏览器 jquer ...

  6. vue-cli 本地数据模拟

    方法一: 使用express搭建静态服务 mock数据写在json文件中,proxyTable 里将接口代理到具体mock数据json文件上.具体方法: 创建 mock 文件夹 build/dev-s ...

  7. 使用Mock.js进行独立于后端的前端开发

    Mockjs能做什么? 基于 数据模板 生成模拟数据. 基于 HTML模板 生成模拟数据. 拦截并模拟 ajax 请求. 能解决的问题 开发时,前后端进度不同步,后端还没完成数据输出,前端只好写静态模 ...

  8. Vue.js(15)之 json-server搭建模拟的API服务器

    json-server搭建模拟的API服务器 运行命令 npm install json-server -D 全局安装 json-server 项目根目录下创建 mock 文件夹 mock 文件夹下添 ...

  9. js 一个或多个一维数组,算出元素之间相互组合的所有情况

    // 数据源 var target = { state1: ['1', '2'], state2: ['01', '02', '03'], state3: ['001','002'] } stackS ...

随机推荐

  1. 第二节:深入剖析Thread的五大方法、数据槽、内存栅栏。

    一. Thread及其五大方法 Thread是.Net最早的多线程处理方式,它出现在.Net1.0时代,虽然现在已逐渐被微软所抛弃,微软强烈推荐使用Task(后面章节介绍),但从多线程完整性的角度上来 ...

  2. 第十二节:MVC中的一些特殊优化

    一. 删除WebForm视图引擎 在MVC框架中检索视图的顺序为:当前控制器下对应的文件夹的aspx文件→share文件夹aspx文件→当前控制器下对应文件夹的cshtml文件→share文件夹的cs ...

  3. SpringBoot系列: Pebble模板引擎语法介绍

    本文基于Pebble官方文档, 对pebble的语法做一些介绍. ===============================Pebble 官方资料========================= ...

  4. python3 udp版简单的聊天器

    单任务的聊天系统. 获取键盘数据,并将其发送给对方 接收数据并显示 并且功能数据进行选择以上的2个功能调用 代码实现 import socket def send_msg(udp_socket): & ...

  5. burp Suite 模块Authz 使用方法

    这个模块是朋友告诉我的,然后进行了研究使用方法. 以下为个人理解,如有错误感谢各位纠正. 0x00 安装Authz Extender > BApp Store > Authz > i ...

  6. RoIPooling

    . 代码: template <typename Dtype> void ROIPoolingLayer<Dtype>::Forward_cpu(const vector< ...

  7. 网络流Dinic(本篇介绍最大流)

    前言:看到网上Dinic和ISAP的比较,多数人认为ISAP更快,不容易爆栈.当然,也有少数人认为,在多数情况下,Dinic比较稳定.我认为Dinic的思路比ISAP更简明,所以选择了Dinc算法 介 ...

  8. 更改 Ubuntu默认Python版本的问题

    一般Ubuntu默认版本为2.x,之前运行一些程序,将默认版本修改为3.5,现在想修改为2.7. 之前的方法有些忘记,现在重新记录一下: 1.查看你系统中有哪些Python的二进制文件可供使用, ls ...

  9. 全平台网页播放器兼容H5与Flash还带播放列表

    许久不发文了,2018年第一篇文章,写点干货--关于网页播放器的问题.嗯,实际上我是在52破解首发的,当做新人贴. 目前来说,网页播放器不少,随便找找都能找到一大堆,然而好用的就那么几个,比如ckpl ...

  10. noj算法 踩气球 回溯法

    描述: 六一儿童节,小朋友们做踩气球游戏,气球的编号是1-100,两位小朋友各踩了一些气球,要求他们报出自己所踩气球的编号的乘积.现在需要你编一个程序来判断他们的胜负,判断的规则是这样的:如果两人都说 ...