kayson

快速提示:用 json-server 模拟 REST API

原文链接: www.sitepoint.com

有时候你需要在没有后台的情况下搭建应用的前端原型。创建一套哪怕最基本的模拟 API 用来开发,也是很费时间的。json-server 库为你解决了这个问题,它提供了一种快速、简易的的方法给开发和测试创建复杂的 RESTful API。

这个快速提升会教你如何利用 json-server 创建模拟的 REST API,让你在短短 30 秒内拥有一套可以工作的、功能齐全的 API。

前提条件

你应该对 RESTful 原则有基本的认识以及知道如何使用 API。

你需要用到一下工具:

  • nodejs – json-server 基于 nodejs。

  • curl – 用来测试你的模拟服务器的路由。

Windows 用户:curl 下载页面有 curl 的32位和64位的二进制包,你可以用它跟随练习这篇文章中的例子。

这篇教程假定你将会使用 bash 之类的终端。

安装

为了安装 json-server,打开你的终端并输入:

`$ npm install -g json-server` 

这会把 json-server 安装到你的系统全局位置,这样你就可以在任何路径启动服务器了。

资源

在 RESTful API 中,资源是一个对象,它包含类型、数据、与其他资源的关系以及操作它的一系列方法。例如,如果你在创建一个关于电影的 API,那么电影就是资源。你可以使用 API 对资源执行 CRUD 操作。

让我们创建一个带有 /movies 资源的 API。

创建资源

新建一个名为 db.json 的文件并添加如下的内容:

{
  "movies": [
    {"id": 1, "name": "The Godfather", "director":"Francis Ford Coppola", "rating": 9.1},
    {"id": 2, "name": "Casablanca", "director": "Michael Curtiz", "rating": 8.8}
  ]
} 

保存文件后,用如下的命令启动服务器:

`$ json-server --watch db.json` 

完成!现在你就有了电影 API;你可以从服务器获取电影、添加新的电影、删除电影以及其他的操作。

为了测试我们的模拟 API,我们可以利用 curl 发起一个 HTTP 请求:

`$ curl -X GET "http://localhost:3000/movies"` 

这会返回服务器上存在的电影列表。在上面的例子中,你会获取到两个电影。现在为了得到 id 为 1 的电影,只要在 URI 的末尾指定这个 id: http://localhost:3000/movies/1.

要往服务器添加电影,你可以向 API 发起一个带有电影详情的 POST 请求。例如:

$ curl -X POST -H "Content-Type: application/json" -d '{
  "id": 3,
  "name": "Inception",
  "director": "Christopher Nolan",
  "rating": 9.0
}' "http://localhost:3000/movies" 

这会返回新增的电影数据。为了检查记录是否添加成功,我们来获取 id 为 3 的电影:

`$ curl -X GET "http://localhost:3000/movies/3"` 

类似地,你可以使用其他的 HTTP 动词如 PUT 和 DELETE 来访问和修改服务数据。通常约定,POST 用来新建实体,而 PUT 用来更新现有实体。

注意: PUT、 POST 和 PATCH 请求需要在 header 里加上 Content-Type: application/json

功能

针对模拟 API,json-server 提供了许多有用的功能,没有它的话你得在后台手动创建。我们来看看其中的一些功能:

过滤器

你可以在请求中使用过滤器,即作为查询字符串添加到 URI 末尾。例如,如果你想得到名为 “Casablanca” 的电影详情,你可以向资源 URI 发送一个 GET 请求,同时添加一个问号(?),后面跟着你想要筛选的属性名和它的值:

`$ curl -X GET "http://localhost:3000/movies?name=Casablanca"` 

你也可以在不同的过滤器之间加入一个和号(&)来组合多个过滤器。例如,如果我们也想在上面的例子中根据 id 筛选,我们可以使用:

`$ curl -X GET "http://localhost:3000/movies?name=Casablanca&id=2"` 

操作符

API 还提供逻辑操作符,让筛选变得容易。你可以用 _gte_lte 作为大于和小于操作符。你也可以用 _ne 从响应中排除一个值。

例如,如果你想要所有评级大于等于 9 的电影:

`$ curl -X GET "http://localhost:3000/movies?rating_gte=9"` 

注意你可以使用和号组合多个操作符。因此为了获取所有评级在5到7之间的电影,你要发送如下的请求:

`$ curl -X GET "http://localhost:3000/movies?rating_gte=5&rating_lte=7"` 

分页

在现实场景中,你会处理非常多的数据。利用 json-server 内置的分页支持,可以很容易地将数据通过小片段加载,每页固定10个项目。

例如,如果你要查看电影 API 的第 3 页,发一个 GET 请求:

`$ curl -X GET "http://localhost:3000/movies?_page=3"` 

这会响应 21-30 的条目。

排序

你可以使用 _sort_order 属性从服务器请求已排序的数据。例如,如果你想要名字(字母)逆序排列的电影列表,那么你要发送如下的请求:

`$ curl -X GET "http://localhost:3000/movies?_sort=name&order=DESC"` 

json-server 还提供更多其他的功能。你可以在 json-server 文档 中查看那些功能以及上面的功能详情。

为你的 API 生成模拟数据

测试前端时几乎没有数据的话,就不好玩了。你可以利用 faker.js 之类的模块来创建 API 的示例数据。

用命令安装这个包:

`$ npm install faker` 

现在新建一个名为 fake-data-generator.js 的文件并输入以下内容:

var faker = require('faker');

var db = { movies: [] };

for (var i=1; i<=1000; i++) {
  db.movies.push({
    id: i,
    name: faker.random.words(),
    director: faker.name.firstName() + ' ' + faker.name.lastName(),
    rating: Math.floor(Math.random()*100+1)/10
  });
}

console.log(JSON.stringify(db)); 

在这里,我们创建了 1000 条假的电影数据,利用了 faker 生成电影名称和导演的名字。评级数据是用 1 到 100 之间的随机数除以 10 创建的。

为了用脚本创建一个名为 db.json 的文件,在终端运行以下的命令:

`$ node fake-data-generator.js > db.json` 

现在你就有了一个包含 1000 个电影的数据库。现在你有了大量的假数据用来开发或测试你的 app 了。

总结

现在你应该能够快速地创建自己的模拟 API 和测试数据了。json-server 库允许你(几乎)无需花时间研究后台就可以快速开发前端原型。

这个工具是否会成为你的工作流的一部分,或者你还有其他成功使用的方法?在下面的评论里分享你的想法和建议!