json-server模拟后端服务器

json-server 是一个非常方便的工具，可以快速将一个静态的 JSON 文件转变为一个 RESTful API 服务器，模拟真实的后端接口。它支持 GET、POST、PUT、DELETE 等常用 HTTP 方法，非常适合用于前后端分离的开发中进行接口模拟

• github地址：https://github.com/typicode/json-server
• npm地址：https://www.npmjs.com/package/json-server
• 版本和node关系
  • 可以选择0.17.0 版本 14.x 可以运行
  • 1.0.0-beta.3 需要node版本高于 14.x

具体步骤：如何使用 json-server

操作步骤

• 在本地的 单独目录 中创建一个文件夹，专门用于模拟数据

• 在该文件夹内，使用 json-server 或者单独创建一个 db.json 文件来模拟数据。

• 使用 json-server 启动模拟 API：

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

  这会在本地启动一个 API 服务器，供你在前端开发中调用。

• 在不需要时，只需要删除该文件夹，整个模拟 API 环境就会被移除，保持项目整洁。

/mock-api
  ├── db.json         // 存放模拟数据的文件
  ├── server.js       // 可选，如果你需要自定义一些 API 行为，可以在这里设置
  ├── package.json    // 如果需要，可以使用 npm 初始化并安装 json-server

具体实现

1. 在 mock-api 文件夹中初始化一个项目：

mkdir mock-api
cd mock-api
npm init -y    # 初始化项目
npm install json-server --save-dev  # 项目本地安装 json-server
# 全局安装  npm install -g json-server

2. 创建 db.json 模拟数据文件，内容如下：

{
  "users": [
    { "id": 1, "name": "John Doe", "email": "john.doe@example.com" },
    { "id": 2, "name": "Jane Smith", "email": "jane.smith@example.com" }
  ],
  "posts": [
    { "id": 1, "title": "Hello World", "content": "This is a test post." }
  ]
}

db.json 文件模拟了两个资源：users 和 posts，每个资源都是一个包含若干对象的数组。

3. 启动 json-server：

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

--watch db.json：指示 json-server 监视并使用 db.json 文件作为数据库。

--port 3000：指定服务器运行的端口（默认为 3000）。

你会看到如下输出，表示服务器启动成功：

\{^_^}/ hi!
Loading db.json
Done
Resources
http://localhost:3000/users
http://localhost:3000/posts

4. 访问模拟的 API 接口

通过以下方式访问模拟的 API：

• 获取所有用户信息：GET http://localhost:3000/users

• 获取某个用户信息（通过 ID）：GET http://localhost:3000/users/1

• 获取所有帖子信息：GET http://localhost:3000/posts

• 获取某个帖子信息（通过 ID）：GET http://localhost:3000/posts/1

示例请求：

• GET 请求：通过浏览器或 Postman 访问 http://localhost:3000/users，你将得到如下 JSON 响应：

  [
    { "id": 1, "name": "John Doe", "email": "john.doe@example.com" },
    { "id": 2, "name": "Jane Smith", "email": "jane.smith@example.com" }
  ]
  

5. 使用 json-server 进行增删改操作

• POST：向资源添加新的数据项。

  • 例如，向 users 资源添加一个新用户：

    POST http://localhost:3000/users
    Content-Type: application/json
    Body:
    {
      "name": "New User",
      "email": "new.user@example.com"
    }
    

    返回的响应会包含新添加的用户对象，包含自动生成的 id 字段。

• PUT：更新现有数据。

  • 例如，更新用户信息：

    PUT http://localhost:3000/users/1
    Content-Type: application/json
    Body:
    {
      "name": "Updated User",
      "email": "updated.user@example.com"
    }
    

• PATCH：部分更新数据。

  • 例如，只更新用户的名称：

    PATCH http://localhost:3000/users/1
    Content-Type: application/json
    Body:
    {
      "name": "Partially Updated User"
    }
    

• DELETE：删除资源。

  • 例如，删除用户 ID 为 1 的数据：

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

6. 支持查询和分页

json-server 还支持一些常用的查询操作，例如：

• 查询某个字段：你可以使用查询字符串进行过滤：

  GET http://localhost:3000/users?name=John%20Doe
  

  这样可以返回所有 name 为 John Doe 的用户。

• 分页：通过 _page 和 _limit 参数来分页：

  GET http://localhost:3000/posts?_page=1&_limit=10
  

  这将返回第 1 页，每页最多 10 个帖子。

• 排序：通过 _sort 和 _order 参数来排序：

  GET http://localhost:3000/users?_sort=name&_order=asc
  

  这将返回按 name 字段升序排序的用户列表。

• 模糊搜索：json-server 支持部分匹配查询。例如，如果你想搜索 email 字段包含某个关键词的用户，可以这么做：

  GET http://localhost:3000/users?email_like=example.com
  

7. 配置自定义路由（可选）

虽然 json-server 会自动为你根据 JSON 文件的结构生成路由，但你也可以通过配置一个 routes.json 文件来设置自定义路由规则，或通过命令行配置。

例如，假如你希望将 /api/users 映射到 /users，可以创建一个 routes.json 文件：

{
  "/api/users": "/users",
  "/api/posts": "/posts"
}

然后运行命令时，添加 --routes 参数：

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

8. 配置 CORS（跨域）

如果你前端和模拟后端在不同的端口运行，可能会遇到 CORS 问题。你可以通过 json-server 启动时配置 CORS 设置，允许跨域请求。

默认情况下，json-server 会启用 CORS，但你也可以手动设置：

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

9. vue 配置代理

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // json-server 的地址
        changeOrigin: true,              // 支持虚拟托管的站点
        pathRewrite: { '^/api': '' },    // 将 `/api` 去掉，转发到 http://localhost:3000
        secure: false                   // 如果是 https，可以设置为 false
      }
    }
  }
};

总结

通过 json-server，你可以非常快速地创建一个 RESTful API 服务来模拟后端接口。这对于前端开发人员来说是一个非常有用的工具，可以在后端尚未完成时继续进行前端开发。

• 简易操作：只需一个 JSON 文件即可启动模拟的 RESTful API 服务。
• 支持常用 HTTP 请求：支持 GET、POST、PUT、DELETE 等操作。
• 支持查询和分页：可以方便地模拟查询、分页、排序等功能。
• 动态生成接口：不需要编写路由代码，json-server 会根据 JSON 文件自动生成。

如果你还没有接触过，建议尽早试试，这样你可以大大提升前后端分离开发的效率！