『前端必备』本地数据接口 —— json-server使用

json-server 是一个轻量级的工具，可以基于 JSON 文件快速搭建 RESTful API 接口，非常适合前端开发中模拟后端接口数据。以下是 json-server 的使用方法：

一、安装

1. 安装 Node.js 和 npm
   确保你的开发环境中已安装 Node.js 和 npm。可以在终端中运行以下命令验证是否安装成功：

   node -v
   npm -v
   

   如果未安装，可前往 Node.js 官网 下载并安装。

2. 安装 json-server
   在终端中运行以下命令全局安装 json-server：

   npm install -D json-server
   

二、创建模拟数据文件

1. 创建一个名为 db.json 的文件，内容如下：

   {
     "users": [
       { "id": 1, "name": "张三", "age": 25 },
       { "id": 2, "name": "李四", "age": 30 }
     ],
     "posts": [
       { "id": 1, "title": "第一篇文章", "author": "张三" }
     ]
   }
   

   这里的 users 和 posts 是模拟的接口路径。

三、启动服务

在终端中进入 db.json 文件所在的目录，运行以下命令启动服务：

json-server --watch db.json --port 3000

• --watch：监听 db.json 文件的变化，自动更新服务。
• --port 3000：指定服务运行在 3000 端口。

启动成功后，你可以在浏览器中访问以下地址：

• 用户列表：http://localhost:3000/users
• 文章列表：http://localhost:3000/posts

四、模拟接口请求

json-server 支持常见的 RESTful 请求，例如：

1. GET 请求：

   • 获取所有用户：GET http://localhost:3000/users
   • 获取单个用户：GET http://localhost:3000/users/1
   • 筛选用户：GET http://localhost:3000/users?age=25。

2. POST 请求：

   POST http://localhost:3000/users
   Content-Type: application/json
   {
     "name": "王五",
     "age": 28
   }
   

   json-server 会自动为新记录分配一个唯一的 id。

3. PUT 请求：

   PUT http://localhost:3000/users/1
   Content-Type: application/json
   {
     "name": "张三",
     "age": 26
   }
   

   用于更新整个资源。

4. PATCH 请求：

   PATCH http://localhost:3000/users/1
   Content-Type: application/json
   {
     "age": 27
   }
   

   用于部分更新资源。

5. DELETE 请求：

   DELETE http://localhost:3000/users/1
   

   用于删除资源。

五、高级功能

1. 自定义路由
   创建一个 routes.json 文件：

   {
     "/api/*": "/$1",
     "/blog/:resource/:id/show": "/:resource/:id"
   }
   

   启动服务时使用 --routes 选项：

   json-server db.json --routes routes.json
   ```。
   
   

2. 自定义中间件
   创建一个 middleware.js 文件：

   module.exports = (req, res, next) => {
     if (req.method === 'POST') {
       req.body.created_at = new Date().toISOString();
     }
     next();
   };
   

   启动服务时使用 --middlewares 选项：

   json-server db.json --middlewares middleware.js
   ```。
   
   

3. 模拟文件上传
   创建一个 public 文件夹用于存储上传文件，并在启动时指定静态文件目录：

   json-server --watch db.json --static ./public
   

   在前端使用 FormData 模拟文件上传。

通过以上步骤，你可以快速搭建一个本地数据接口，满足前端开发中的接口模拟需求。