前端接口使用利器JSON-Server

在开发前端项目的时候，当后端服务接口还没有准备好时，有没有什么方法，可以快速搭建一个提供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 还支持分页、排序等高级操作，使得它成为一个非常强大的工具，尤其是在前端开发和接口测试中。