在前端开发领域中，使用 mock 数据来测试前端应用已经成为了一种很普遍的方式。其中，使用 express-json-server 这个 npm 包可以帮助我们快速地搭建一个本地的 API 服务器，以方便在开发过程中调用 mock 数据进行测试。本文将详细介绍如何使用 express-json-server 这个 npm 包。
什么是 express-json-server
express-json-server 是一个基于 express 实现的用于生成 mock 数据的 npm 包，它可以用于快速搭建本地的 API 服务器，以便在前端开发过程中进行数据模拟和测试。它的特点是：
- 快速：可以轻松地生成大量的模拟数据；
- 灵活：可以通过编写配置文件来自定义数据生成规则；
- 易于使用：只需简单的几行代码即可启动 mock 服务。
安装 express-json-server
在使用 express-json-server 之前，需要在本机安装 Node.js 和 npm，这个可以通过官方网站下载安装包来完成。
安装 express-json-server，只需在终端中输入以下命令：
npm install -g express-json-server
这里使用 -g 参数将 express-json-server 安装到全局环境中，安装成功后，就可以在任何地方使用 express-json-server 命令启动服务了。
使用 express-json-server
使用 express-json-server 只需编写一个配置文件，然后在终端中运行 express-json-server 命令，即可启动 mock 服务器。下面，我们将介绍如何编写配置文件。
编写配置文件
在你的项目根目录下，创建一个 db.json 文件，这个文件用于存储 API 返回的数据。
在 db.json 文件中，我们可以定义一些数据源，这个数据源可以是一个数据对象，也可以是一个包含多个数据对象的数组。例如：
-- -------------------- ---- -------
-
-------- -
- ----- -- ------- ------ --
- ----- -- ------- ----- -
--
----------- -
- ----- -- ------- -------- --- -------- --- --
- ----- -- ------- -------- --- -------- --- -
-
-这里定义了两个数据源：users 和 products。
除了上面的数据源，我们还可以使用路由来定义一个自定义的数据源，例如：
{
"comments": "/api/comments"
}这里定义了一个 comments 的数据源，它对应的路由是 /api/comments。
除了数据源和路由之外，还可以在 db.json 文件中设置一些全局配置项。常用的配置项有：
delay：模拟接口的响应时间；idProperty：指定数据的 id 属性名；static：指定静态文件目录；logger：是否开启日志。
一个完整的 db.json 文件示例：
-- -------------------- ---- -------
-
-------- -
- ----- -- ------- ------ --
- ----- -- ------- ----- -
--
----------- ----------------
-------- ----
------------- ------
--------- -
--------- ----------
--
--------- -----
-在使用上述配置文件时，可以通过 --watch 参数来实时监听 db.json 文件的变化，一旦文件内容有变化，mock 服务器会在下一次 API 请求前自动更新 db.json 文件。
启动 mock 服务器
在完成了 db.json 文件的编写以后，就可以使用 express-json-server 命令来启动 mock 服务器了。在终端中输入以下命令：
express-json-server -w db.json
这个命令将会监视 db.json 文件的变化，并在 localhost:3000 创建一个 mock 服务器。如果上述命令运行成功，就可以在浏览器中输入 http://localhost:3000/users 来访问数据源中的 users 数据。
使用自定义路由
除了上述使用默认的路由之外，我们还可以自定义路由。使用自定义路由的方法非常简单，只需在配置文件中添加自定义路由即可。
{
"/api/users": "/users"
}这里定义了一个 /api/users 的路由，它对应的是 users 数据源。
除了上述的配置外，我们还可以通过函数来定义一个路由，例如：
{
"/api/user/:id": "(req, res) => { res.json({ id: req.params.id }) }"
}这里定义了 /api/user/:id 的路由，它返回一个包含当前请求的 id 属性的数据。
使用自定义中间件
在 mock 服务器运行时，我们可以使用自定义中间件来处理 API 请求。使用自定义中间件的方法如下：
const express = require('express');
const app = express();
app.use((req, res, next) => {
// 自定义处理逻辑
next();
})这里定义了一个自定义的中间件，它对所有的 API 请求都生效。在中间件的函数中，我们可以定义一些自己的处理逻辑，例如：
app.use((req, res, next) => {
if (req.method === 'GET') {
console.log('GET 请求');
} else if (req.method === 'POST') {
console.log('POST 请求');
}
next();
});这个中间件会在每个 API 请求前打印出请求的方法类型。
总结
在前端开发中，mock 数据是非常重要的，它能够帮助我们快速开发、测试和验证某些特定场景下的代码。express-json-server 是一个快速、灵活、易于使用的 npm 包，它能够帮助我们快速创建本地的 API 服务器，以便在开发过程中进行数据模拟和测试。通过学习本文的内容，相信大家已经学会了如何使用 express-json-server 这个 npm 包了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb681e8991b448da37d