JsonServer安装及启动过程图解

什么是 JsonServer

JsonServer 是一种模拟 Restful API 的工具，可以用于前端团队的开发。它可以快速地搭建一个 Restful API，并且支持许多特性，如过滤、排序等。其中，使用到的数据存储在一个 JSON 文件中。在开发中，我们可以通过 JsonServer 快速地搭建 API，可以为前端开发提供很大的帮助。

安装 JSON Server

首先，需要全局安装 json-server，我这里使用的是 NPM，命令如下：

npm install -g json-server

这个安装过程可能需要一段时间，在完成安装后，我们可以进行以下操作。

创建数据文件

在使用 JsonServer 之前，需要创建数据，并且将数据存储在 JSON 文件中，以便 JsonServer 进行管理和调用。我们可以通过以下方式使用默认编辑器创建一个 db.json 文件。

touch db.json

插入数据

在 db.json 文件中，插入数据吧！我们假设现在需要管理一些简单的数据，如下面的示例（学生信息）：

{
  "students": [
    {
      "id": 1,
      "name": "张三",
      "age": 18
    },
    {
      "id": 2,
      "name": "李四",
      "age": 20
    },
    {
      "id": 3,
      "name": "王五",
      "age": 19
    }
  ]
}

启动 JsonServer

现在，我们已经将数据存储在了 db.json 文件中。接下来，我们需要启动 JsonServer。只需在命令行中运行以下命令：

json-server --watch db.json

上面的命令中，--watch 参数指示 JSON Server 在数据文件发生更改时重载，并提供实时更新。我们还可以在命令行中输入以下地址以访问 API：

http://localhost:3000/students

这里的 3000 号是 JsonServer 的默认端口。在浏览器中输入上述地址后，将显示最初插入的 3 名学生信息。

示例说明

假设现在需要获取年龄在 20 岁以下的学生列表，我们怎么做呢？下面是一个示例，具体步骤如下：

通过参数筛选结果

在命令行中输入以下地址以访问带参数的 API：

http://localhost:3000/students?age_lte=20

上述方式中，?age_lte=20 指示筛选年龄小于或等于 20 岁的学生。在浏览器中输入上述地址，将会显示所有年龄小于或等于 20 岁的学生。

自定义路由

如果我们需要添加自定义路由，则只需要在 JSON 文件中添加新的路由。例如，假设我们现在需要搜索名字包含“三”的学生列表。我们可以通过以下方式更新 JSON 文件：

{
  "students": [
    {
      "id": 1,
      "name": "张三",
      "age": 18
    },
    {
      "id": 2,
      "name": "李四",
      "age": 20
    },
    {
      "id": 3,
      "name": "王五",
      "age": 19
    }
  ],
  "search_students": [
    {
      "id": 1,
      "name": "张三",
      "age": 18
    }
  ]
}

添加了一个名为 search_students 的自定义路由。现在，只需要在命令行中输入以下地址即可访问自定义路由：

http://localhost:3000/search_students?q=%E4%B8%89

上述方式中，q=%E4%B8%89 指示搜索名字中包含“三”的学生。在浏览器中输入上述地址，将会显示所有名字中包含“三”的学生。

结论

这就是 JsonServer 的安装、启动和基本使用的示例。它是一个非常适合前端开发团队的工具，可以为团队极大地提高开发效率，特别是在进行原型开发时。