JSON Server 教程：零代码创建模拟后端 – wiki基地

作者： /

JSON Server 教程：零代码创建模拟后端

在前端开发过程中，经常需要与后端 API 进行交互。然而，在后端 API 尚未准备好时，或者我们需要一个快速、便捷的方式来模拟 API 进行开发、测试和原型设计时，传统的后端开发方式就显得过于繁琐和耗时。

幸运的是，有一个强大的工具可以帮助我们解决这个问题，它就是 JSON Server。JSON Server 是一个 Node.js 模块，可以让你在零代码的情况下，快速创建出一个全功能的 RESTful API 模拟服务器。你只需要一个 JSON 文件作为数据源，JSON Server 就能自动生成相应的 API 接口，支持常见的 CRUD（创建、读取、更新、删除）操作，以及过滤、分页、排序等高级功能。

本文将带你深入了解 JSON Server 的方方面面，从安装、基本用法到高级特性，让你能够熟练掌握这个强大的工具，并在实际开发中提高效率。

1. JSON Server 的优势：为什么选择它？

在深入了解 JSON Server 的使用方法之前，让我们先来看看它有哪些优势，以及为什么你应该选择它：

  • 零代码： 无需编写任何后端代码，只需一个 JSON 文件即可创建 API。
  • 快速启动： 几秒钟内即可启动一个模拟服务器，无需复杂的配置。
  • 全功能 RESTful API： 支持 GET、POST、PUT、PATCH、DELETE 等 HTTP 方法，模拟真实的 API 行为。
  • 数据持久化： 对模拟数据的修改会自动保存到 JSON 文件中。
  • 高级功能： 支持过滤、分页、排序、关联关系、自定义路由等高级功能。
  • 易于扩展： 可以通过中间件、自定义函数等方式扩展其功能。
  • 轻量级： 安装包小巧，运行速度快。
  • 跨平台： 可以在 Windows、macOS、Linux 等操作系统上运行。
  • 开源免费： 基于 MIT 许可协议，可以免费使用和修改。

这些优势使得 JSON Server 成为前端开发者的理想选择，特别是在以下场景中：

  • 前端独立开发： 在后端 API 尚未完成时，前端可以先使用 JSON Server 模拟 API 进行开发，实现前后端并行开发。
  • 快速原型设计： 可以快速搭建一个 API 原型，用于演示和验证产品概念。
  • 单元测试： 可以使用 JSON Server 模拟 API，方便进行前端单元测试。
  • 学习 RESTful API： 可以通过 JSON Server 学习和理解 RESTful API 的设计原则和使用方法。
  • 构建演示项目： 快速创建包含增删改查操作的示例。

2. 安装和启动 JSON Server

JSON Server 的安装非常简单，只需要通过 npm（Node.js 包管理器）即可完成：

bash
npm install -g json-server

这条命令会将 JSON Server 安装为全局模块，这样你就可以在任何目录下使用 json-server 命令了。

安装完成后，我们需要一个 JSON 文件作为数据源。创建一个名为 db.json 的文件，内容如下：

json
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}

这个 JSON 文件包含了三个资源：posts、comments 和 profile。每个资源都包含了一些示例数据。

现在，我们可以启动 JSON Server 了：

bash
json-server --watch db.json

这条命令会启动一个监听 db.json 文件变化的服务器。如果 db.json 文件发生变化，服务器会自动重新加载数据。

启动成功后，你会在终端看到类似下面的输出：

“`
{^_^}/ hi!

Loading db.json
Done

Resources
http://localhost:3000/posts
http://localhost:3000/comments
http://localhost:3000/profile

Home
http://localhost:3000
“`

这表示 JSON Server 已经成功启动，并监听在 http://localhost:3000 端口。你可以通过浏览器访问这些 URL 来查看相应的数据。

3. 基本 CRUD 操作

JSON Server 会自动根据 db.json 文件中的资源生成相应的 API 接口，支持常见的 CRUD 操作：

3.1. 读取数据 (GET)

  • 获取所有 posts：

    GET /posts
    返回所有 posts 的数组。

  • 获取单个 post：

    GET /posts/1
    返回 id 为 1 的 post 对象。

  • 获取 profile
    GET /profile
    返回profile对象

3.2. 创建数据 (POST)

  • 创建一个新的 post：

    POST /posts
    { "title": "My New Post", "author": "John Doe" }

    在请求体中发送一个 JSON 对象，包含新 post 的数据。JSON Server 会自动为新 post 生成一个唯一的 id，并将其添加到 db.json 文件中。

3.3. 更新数据 (PUT/PATCH)

  • 完全更新一个 post (PUT)：

    PUT /posts/1
    { "id": 1, "title": "Updated Post Title", "author": "Jane Doe" }

    在请求体中发送一个 JSON 对象，包含更新后的 post 数据。PUT 方法会完全替换 id 为 1 的 post 对象。

  • 部分更新一个 post (PATCH)：

    PATCH /posts/1
    { "title": "Updated Post Title" }

    在请求体中发送一个 JSON 对象，包含需要更新的字段。PATCH 方法只会更新指定的字段，其他字段保持不变。

3.4. 删除数据 (DELETE)

  • 删除一个 post：

    DELETE /posts/1

    删除 id 为 1 的 post 对象。

4. 高级功能：过滤、分页、排序、关联

JSON Server 不仅仅支持基本的 CRUD 操作，还提供了一些高级功能，让你可以更灵活地操作数据：

4.1. 过滤 (Filtering)

可以使用查询参数来过滤数据。例如，要获取作者为 “typicode” 的所有 posts：

GET /posts?author=typicode

你还可以使用多个查询参数进行组合过滤：

GET /posts?author=typicode&title=json-server

支持的操作符有：
* =: 等于 （默认）
* _ne: 不等于
* _lt: 小于
* _lte: 小于等于
* _gt: 大于
* _gte: 大于等于
* _like: 模糊匹配 (使用 .* 作为通配符)

例如：
* GET /posts?id_ne=1 : 获取 id 不等于 1 的所有 posts。
* GET /posts?id_lte=3: 获取id小于等于3的所有posts。
* GET /posts?title_like=server.*: 获取标题以“server”开头的posts.

4.2. 分页 (Pagination)

可以使用 _page 和 _limit 查询参数来分页获取数据。例如，要获取第二页的 posts，每页显示 5 条数据：

GET /posts?_page=2&_limit=5

JSON Server 会在响应头中添加 Link 字段，包含 first、prev、next 和 last 等链接，方便客户端进行分页导航。

4.3. 排序 (Sorting)

可以使用 _sort 和 _order 查询参数来对数据进行排序。例如，要按照 title 字段升序排列 posts：

GET /posts?_sort=title&_order=asc

如果要按照 title 字段降序排列：

GET /posts?_sort=title&_order=desc

可以根据多个字段排序，用逗号分隔。例如先按 author 排序，再按 id 排序。
GET /posts?_sort=author,id&_order=asc,desc

4.4. 关联 (Relationships)

JSON Server 可以处理资源之间的关联关系。在 db.json 文件中，我们可以通过外键来表示关联关系。例如，comments 资源中的 postId 字段表示该评论所属的 post。

  • 嵌套资源：

    可以使用 _embed 查询参数来获取关联的资源。例如，要获取所有 posts 以及它们关联的 comments：

    GET /posts?_embed=comments

    这会在每个 post 对象中添加一个 comments 数组，包含该 post 的所有评论。

  • 包含资源：
    使用 _expand 查询参数来获取父资源。
    GET /comments/1?_expand=post
    这会在评论对象里添加一个post对象。

5. 自定义路由

默认情况下，JSON Server 会根据 db.json 文件中的资源名称自动生成路由。例如，posts 资源对应的路由是 /posts。

但是，你也可以通过创建一个 routes.json 文件来自定义路由。例如：

json
{
"/api/v1/*": "/$1",
"/blog/:resource/:id/show": "/:resource/:id",
"/blog/:resource": "/:resource"
}
然后启动时加上 --routes routes.json:
json-server db.json --routes routes.json
这个 routes.json 文件定义了以下规则：

  • /api/v1/*：将所有以 /api/v1/ 开头的请求重定向到相应的资源。例如，/api/v1/posts 会被重定向到 /posts。
  • /blog/:resource/:id/show: 将对/blog/posts/1/show的请求重定向到/posts/1
  • /blog/:resource: 将/blog/posts这样的请求， 重定向到/posts

:resource 和 :id 是占位符，会被实际的资源名称和 id 替换。

6. 添加自定义逻辑 (Middleware)

如果你需要添加一些自定义逻辑，例如身份验证、日志记录等，可以使用中间件。

创建一个名为 middlewares.js 的文件，内容如下：

javascript
module.exports = (req, res, next) => {
if (req.method === 'POST' && req.path === '/posts') {
// 添加一些自定义逻辑
req.body.createdAt = Date.now();
}
next();
};

这个中间件会在创建新的 post 时，自动添加一个 createdAt 字段，值为当前时间戳。

然后，在启动 JSON Server 时，使用 --middlewares 参数指定中间件文件：

bash
json-server db.json --middlewares middlewares.js
可以指定多个中间件文件，用逗号分隔。

7. 使用 Faker.js 生成模拟数据

手动编写大量的模拟数据是一件非常繁琐的事情。幸运的是，我们可以使用 Faker.js 这个库来生成各种各样的模拟数据。

首先，安装 Faker.js：

bash
npm install -g @faker-js/faker

然后，创建一个名为 generate.js 的文件，内容如下：

“`javascript
const { faker } = require(‘@faker-js/faker’);

module.exports = () => {
const data = { posts: [], comments: [], users: [] };

// 创建 100 个用户
for (let i = 0; i < 100; i++) {
data.users.push({
id: i + 1,
name: faker.person.fullName(),
email: faker.internet.email(),
avatar: faker.image.avatar(),
});
}
// 创建 200 个文章
for (let i = 0; i < 200; i++) {
data.posts.push({
id: i+1,
title: faker.lorem.sentence(),
body: faker.lorem.paragraphs(),
userId: faker.number.int({ min: 1, max: 100 }), // 随机关联一个用户
date: faker.date.past()
});
}

// 创建 500 条评论
for (let i = 0; i < 500; i++) {
data.comments.push({
id: i + 1,
body: faker.lorem.sentence(),
postId: faker.number.int({ min: 1, max: 200 }), // 随机关联一个 post
userId: faker.number.int({ min: 1, max: 100 }), // 随机关联一个用户
date: faker.date.past()
});
}

return data;
};
“`

这个脚本会生成 100 个用户、200 个 posts 和 500 条 comments，并使用 Faker.js 生成各种各样的模拟数据，如姓名、邮箱、头像、句子、段落等。

然后，使用以下命令启动 JSON Server：

bash
json-server generate.js

JSON Server 会执行 generate.js 脚本，并将生成的数

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部