用 json-server 创建 REST API
前端开发工程师的一个常见任务是模拟后端 REST 服务，以 JSON 格式向前端应用程序返回一些数据，并确保一切都按预期运行。
当然，你可以设置一个完整的后端服务器，例如使用 Node.js、Express 和 MongoDB。然而，这需要一些时间，一个更简单的方案可以加快前端开发速度。
JSON Server 是一个简单的项目，它可以帮你快速搭建带有 CRUD 操作的 REST API。这个项目的网站是 https://github.com/typicode/json-server 。
接下来，你将学习如何设置 JSON Server 并发布一个示例 REST API。此外，你将了解如何使用另一个库 Faker.js 为 REST API 生成假数据。
安装 JSON Server
JSON Server 以 NPM 包的方式可供使用。可以用 npm 命令安装它：
$ npm install -g json-server增加了 -g 参数可以确保此包以全局的形式安装到系统里。
JSON 文件
现在我们新建一个名为 db.json 的文件。此文件包含了会被 REST API 使用的数据。对于 JSON 结构中包含的对象，CRUD API 可以自动创建它们。假设我们的 db.json 文件内容如下：
{
"employees": [
{
"id": 1,
"first_name": "Sebastian",
"last_name": "Eschweiler",
"email": "sebastian@codingthesmartway.com"
},
{
"id": 2,
"first_name": "Steve",
"last_name": "Palmer",
"email": "steve@codingthesmartway.com"
},
{
"id": 3,
"first_name": "Ann",
"last_name": "Smith",
"email": "ann@codingthesmartway.com"
}
]
}上述 JSON 数据由三个 employee 对象组成，每个对象由四个属性构成：id, first_name, last_name 和 email。
运行服务器
运行如下命令启动 JSON Server：
$ json-server --watch db.json我们需要把包含 JSON 数据结构的文件(db.json) 以参数的方式传递进去。此外，我们还使用了 watch 参数。通过使用这个参数，我们确保服务器在监视模式下启动，也就是说它会监视文件变动并更新提供的 API。
现在可以在浏览器中访问 http://localhost:3000 然后可以看到如下的界面：
从上面的截图可以看到 employees API 已经被成功识别了。现在点击 employees 链接会发送一个 HTTP GET 请求到 http://localhost:3000/employees 显示如下：
JSON Server 会自动创建如下的 HTTP API ：
GET /employees
GET /employees/{id}
POST /employees
PUT /employees/{id}
PATCH /employees/{id}
DELETE /employees/{id}如果你要发送 POST, PUT, PATCH 或 DELETE 请求，数据变动会保存到 db.json 文件里。发送 POST, PUT 或 PATCH 请求时为了在请求体中带上 JSON 数据应该设置 Content-Type: application/json 请求头。否则服务器会返回 200 OK 状态但是数据不会保存。
在 URL 中添加更多参数也是可以的。例如，你可以用 URL 参数添加过滤条件，如下所示：
http://localhost:3000/employees?first_name=Sebastian此时只会返回一个 employee 对象。或者对所有属性做一个全文搜索：
http://localhost:3000/employees?q=codingthesmartway完整的可用 URL 参数可以在 JSON Server 的文档上找到：https://github.com/typicode/json-server
用 Postman 测试 API
只需使用浏览器就可以轻松发起 GET 请求。要发起其他类型的 HTTP 请求，你可以使用像Postman 这样的 HTTP 客户端工具。它有 MacOS、Windows 和 Linux 三种版本。此外，它还提供了一个 Chrome App 供你使用。
GET 请求
Postman 用户界面很容易使用。要发起 GET 请求，填写一个表单即可，如下图所示。单击 Send 按钮，你将收到 JSON 格式的响应数据：
DELETE 请求
一个对应的 DELETE 请求如下所示：
POST 请求
要新建一个 employee 我们需要发起一个 POST 请求，设置请求体内容为 JSON （application/json）。新的 employee 对象需要以 JSON 格式填写在 Body 部分：
PUT 请求
如果你想更新或者修改一个已存在的 employee 数据，此时可以发起一个 HTTP PUT 请求：
用 Faker.js 模拟数据
至此，我们已经在一个 JSON 文件中手动输入了由 API 使用的数据。但是，如果你需要大量数据，手动方式可能会很麻烦。解决这个问题的一个简单方法是使用 faker.js(https://github.com/marak/Faker.js/) 库来生成假数据。将 Faker.js 集成到JSON服务器很容易。只需遵循以下步骤：
首先在当前仓库里初始化生成一个 NPM 项目：
$ npm init然后，使用 npm 安装 Faker.js：
$ npm install fakerFaker.js 会安装到 node_modules 目录里。创建另外一个 employees.js 文件，写入如下代码：
// employees.js
var faker = require('faker')
function generateEmployees () {
var employees = []
for (var id = 0; id < 50; id++) {
var firstName = faker.name.firstName()
var lastName = faker.name.lastName()
var email = faker.internet.email()
employees.push({
"id": id,
"first_name": firstName,
"last_name": lastName,
"email": email
})
}
return { "employees": employees }
}
module.exports = generateEmployees
我们编写一个 generateEmpoyees() 函数来生成 50 条 employee 数据。这里我们使用了 Faker.js 库提供的如下方法：
- faker.name.firstName()
- faker.name.lastName()
- faker.internet.email()
JSON Server 要求最后导出 generateEmployees() 函数用于生成模拟的数据。这一步是通过下面一行代码实现的：
module.exports = generateEmployees
增加了上述语句之后，我们就可以把 employee.js 文件传给 json-server 命令：
$ json-server employees.js现在 REST API 就可以把 Faker.js 模拟的 50 条数据提供出来了。
网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。
- 上周热门
- 银河麒麟添加网络打印机时，出现“client-error-not-possible”错误提示 1487
- 银河麒麟打印带有图像的文档时出错 1405
- 银河麒麟添加打印机时，出现“server-error-internal-error” 1194
- 统信操作系统各版本介绍 1116
- 统信桌面专业版【如何查询系统安装时间】 1114
- 统信桌面专业版【全盘安装UOS系统】介绍 1068
- 麒麟系统也能完整体验微信啦！ 1026
- 统信【启动盘制作工具】使用介绍 672
- 统信桌面专业版【一个U盘做多个系统启动盘】的方法 616
- 信刻全自动档案蓝光光盘检测一体机 526
- 本周热议
- 我的信创开放社区兼职赚钱历程 40
- 今天你签到了吗？ 27
- 信创开放社区邀请他人注册的具体步骤如下 15
- 如何玩转信创开放社区—从小白进阶到专家 15
- 方德桌面操作系统 14
- 我有15积分有什么用? 13
- 用抖音玩法闯信创开放社区——用平台宣传企业产品服务 13
- 如何让你先人一步获得悬赏问题信息？（创作者必看） 12
- 2024中国信创产业发展大会暨中国信息科技创新与应用博览会 9
- 中央国家机关政府采购中心：应当将CPU、操作系统符合安全可靠测评要求纳入采购需求 8
