随着前端开发规模不断扩大，越来越多的后端接口需要前端开发人员进行联调，但受到诸多因素的限制，往往无法及时获取到后端接口文档或者接口尚未完成，这时候就需要使用一些工具来自我 mock 后端接口数据。本文将介绍一个 npm 包 api-mock-cli，通过安装该包，我们可以快速搭建自己的 mock 服务器，为前端开发和调试提供便利。
安装 api-mock-cli
在开始使用 api-mock-cli 进行 mock 之前，我们需要先全局安装该 npm 包：
npm install -g api-mock-cli
安装完成后，我们可以通过打开一个终端输入 api-mock-cli 命令来检查是否安装成功。
创建 mock 数据
我们需要先创建一个数据文件（如 .json 或 .js 文件）用于存储 mock 数据，例如我们在根目录下创建一个 data.json 文件，内容如下：
{
"user": {
"name": "Jane",
"age": 22
}
}这个数据文件将用于模拟后台接口返回的用户数据。
编写配置文件
接下来，我们需要编写一个配置文件，在该文件中指定模拟接口的 URL 以及对应的 mock 数据文件，我们在项目根目录下新建一个 api.config.js 文件，内容如下：
-- -------------------- ---- -------
-------------- - -
------- -
-
---- --------
------- ------
--------- -----------
-
-
--该配置文件定义了一个 routes 数组，数组中存放了每个 mock 路由的配置项，其中 url 是接口的 URL，method 是请求方式，这里我们指定为 get，response 是指定返回数据的文件，这里我们使用之前创建的 data.json。
启动 mock 服务器
在配置文件编写完成后，我们需要启动 mock 服务器，运行以下命令即可：
api-mock-cli start
服务器启动之后，就可以通过 http://localhost:3000/user 获取到 mock 的用户数据。
灵活配置 mock 数据
除了简单的返回静态文件数据之外，我们还可以在 mock 数据中加入一些动态的内容，比如时间戳、随机字符串等。
我们在 data.json 文件中添加一个 createTime 字段：
{
"name": "Jane",
"age": 22,
"createTime": "@date('T')"
}这里我们采用了 json-server 的 mock 数据生成规则，使用 "@date('T')" 表示生成一个时间戳。
我们在 api.config.js 中添加一个新的配置项：
-- -------------------- ---- -------
-
---- ------------
------- -------
--------- ------------- ---- -
----- - ---- - - ---------
----- ----------- - --- -----------------
----- ---- - -
-----
---- ------------------------ - ----
----------- ------------
--
------ ---------------
-
-这里我们定义了一个 POST 请求，当请求 URL 为 /user/add 时，服务器将动态生成一条用户数据并返回。
总结
通过安装 api-mock-cli，我们可以快速搭建自己的 mock 服务器，为前端开发人员提供便利。同时，我们还可以在 mock 数据中加入一些动态的内容，使其更加灵活。希望本文能够对前端开发者有所指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671bd30d092702382278b