介绍两大神器！——使用json-server和faker.js模拟REST API

sarva 发布于2019-08-20 14:47 / 1654人阅读

摘要：今天发现了一个神器在他的帮助下可以在很短的时间内搭建一个然后就可以让前端在不依赖后端的情况下进行开发啦关于什么是设计指南阮一峰简单来说，是一个模块，运行服务器，你可以指定一个文件作为的数据源。更多属性可以查看这里好啦，基本就是这样啦，

今天发现了一个神器——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文件，然后存放一点数据进去：

touch customers.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")

function generateCustomers () {
  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!

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81921.html

前端的 mock server

摘要：然而扯淡的在前端前端要发请求，所以每个请求的都是，而生产环境服务器又是。前端方案因为我是在校生嘛，没办法了解到大公司的开发方式。可能后端就任性就不遵守，那么这个前端只能靠来调整，然而更多的情况是没办法调整的。在一个中大型项目中，你不可能一边写着前端一边写后端。全栈太难 :) 像rails那样的开发模式已经很不适合当前的环境了。所有的项目都嚷嚷着前后端分离，那就只能这么干我之前在做大...

lastSeries 2019-08-19 18:23 评论0 收藏0
用JSON-server模拟REST API(一) 安装运行

摘要：曹县宣布昨日晚间登日成功长江流域首次发现海豚支持党中央决定抄写党章势在必行为了方便，再创建一个文件，写入然后使用到目录下执行命令，如果成功会出现你的电脑中文件夹所在目录的路径如果不成功请检查文件的格式是否正确。在开发过程中，前后端不论是否分离，接口多半是滞后于页面开发的。所以建立一个REST风格的API接口，给前端页面提供虚拟的数据，是非常有必要的。对比过多种mock工具后，我最终...

Sleepy 2019-08-19 18:36 评论0 收藏0
理解RESTful架构与json-server模拟REST api的使用

摘要：一什么是架构即的缩写，我们把他翻译为表述性状态传递，是博士在年他的博士论文中提出来的一种软件架构风格。是个无状态的协议，所以状态就保存在服务器端。只要少量的数据就可使用，支持和。同时支持，同时提供一系列的查询方法如。一、什么是RESTful架构？ REST即Representational State Transfer的缩写，我们把他翻译为表述性状态传递，是Roy Fielding博...

Atom 2019-08-21 16:24 评论0 收藏0
使用json-server来模拟REST API

摘要：官方地址使用可全局安装，也可针对项目安装。可用开启服务。数据文件格式如下让读书点燃梦想地点滨江星耀城让读书点燃梦想地点滨江星耀城仿京东购物车仿京东购物车修改里面的命令。在前端开发中，如果后端接口还没有提供，前端拿不到数据，可能就没法继续写一些交互行为的代码。这一问题可通过json-server来很好地解决。本文主要讲如何将json-server和webpack进行整合，基于vue-w...

smartlion 2019-08-20 19:02 评论0 收藏0
用JSON-server模拟REST API(三) 进阶使用

摘要：前面演示了如何安装并运行和使用第三方库真实化模拟数据下面将展开更多的配置项和数据操作。示例数据源元小总小把清保住影办历战资和总由共先定制向向圆适者定书她规置斗平相。前面演示了如何安装并运行 json server , 和使用第三方库真实化模拟数据 , 下面将展开更多的配置项和数据操作。配置项在安装好json server之后，通过 json-server -h 可以看到如下配置项...

xavier 2019-08-19 18:36 评论0 收藏0