在开发前端项目的时候,当后端服务接口还没有准备好时,有没有什么方法,可以快速搭建一个提供RESTful接口的HTTP Server?
JSON-Server便是一个不错的选择,JSON-Server 是一个基于 Node.js 的模块,它运行在 Express 服务器上,允许你通过指定一个 JSON 文件作为数据源,快速搭建一个具备全 RESTful 风格的 API。这个工具非常适合前端接口测试,它可以迅速模拟后端服务,而无需实际搭建服务器环境。
优点
JSON-Server 支持跨域请求、JSONP 请求、路由定制以及数据快照保存等功能,可以在开发过程中轻松地模拟各种 API 交互,而无需担心后端服务的实际实现。
安装
要开始使用 JSON-Server,需要先安装 Node.js 环境,这里以node-v20.12.2-win-x64为例,大家可以根据自己的实际需求安装对应的版本,官网地址为:
https://nodejs.org/en/download
我这里解压路径为:D:\Server\nodejs\node-v20.12.2-win-x64,然后配置环境变量:NODE_HOME,指向D:\Server\nodejs\node-v20.12.2-win-x64,然后将%NODE_HOME%假如到Path环境变量中
然后打开命令行窗口,通过 npm 安装 json-server:
npm install -g json-server
输出内容如下:
C:\Users\admin>npm install -g json-server
added 54 packages in 3s
15 packages are looking for funding
run `npm fund` for details
npm notice
npm notice New patch version of npm available! 10.5.0 -> 10.5.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.5.2
npm notice Run npm install -g npm@10.5.2 to update!
npm notice
创建示例数据
创建一个包含数据的 JSON 文件,例如 db.json,内容如下:
{
"posts": [
{ "id": 1, "title": "json-server", "author": "azlive.cn" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "azlive.cn" }
}
启动
在db.json目录下启动 JSON-Server:
json-server --watch db.json
输出如下内容:
C:\Users\admin\Desktop>json-server --watch db.json
--watch/-w can be omitted, JSON Server 1+ watches for file changes by default
JSON Server started on PORT :3000
Press CTRL-C to stop
Watching db.json...
(˶ᵔ ᵕ ᵔ˶)
Index:
http://localhost:3000/
Static files:
Serving ./public directory if it exists
Endpoints:
http://localhost:3000/posts
http://localhost:3000/comments
http://localhost:3000/profile
现在,可以在浏览器中访问 http://localhost:3000,查看和管理你的数据,比如查看posts中的一条数据访问http://localhost:3000/posts/1即可。JSON-Server 会自动为你提供一个 RESTful 风格的 API,你可以通过发送 GET、POST、PUT、DELETE 等请求来操作数据。所有更改都会安全地保存到 db.json 文件中。
此外,JSON-Server 还支持分页、排序等高级操作,使得它成为一个非常强大的工具,尤其是在前端开发和接口测试中。