在前端开发中，经常需要进行数据模拟以及接口调试。而在这个过程中，动态 mock 接口的使用是必不可少的。dynamic-mock-api 就是一款利用 Node.js 进行动态接口 Mock 的 npm 包。这篇文章将介绍 dynamic-mock-api 的使用方法和实例。
前置条件
- Node.js 的环境，建议安装最新 LTS 版本；
- 接口定义，建议提前准备好接口文档或者接口定义。
安装
通过 npm 安装 dynamic-mock-api：
npm i dynamic-mock-api -D
-D 参数表示将 dynamic-mock-api 安装到 devDependencies 中。
基本使用
首先，在项目的根目录下，创建 mock 文件夹，并在其中创建 data.js 文件（data.js 是用于 Mock 数据的文件），示例如下：
-- -------------------- ---- -------
-------------- - -
---- ----------- -
----- -
----- ------- ----------- ------ ----------
--
-------- ---------
--
----- ------------ -
----- ---
-------- ---------
-
-然后，创建 server.js 文件，该文件用于启动动态 Mock 服务，示例如下：
-- -------------------- ---- -------
----- --------- - ----------------------------
----- ---- - ----------------
------------------------------ ------------------ -
------ -
-------- -
--------- ------------------------
--------------- ----
-
-
---以上代码将动态 Mock 的服务启动在本地的 3000 端口上。在命令行中输入命令 node server.js 启动。在浏览器中访问 http://localhost:3000/api/list 或者 http://localhost:3000/api/login 即可看到 Mock 后的数据返回。
使用配置文件
在通过命令行启动动态 Mock 服务时，我们还可以通过配置文件来方便地管理动态 Mock 的服务。具体来说，我们需要在项目根目录中创建 dynamic-mock.json 文件。文件的具体内容如下：
-- -------------------- ---- -------
-
--------- ---------------
-------- -
------
--
------- -----
-------- -
-------- -
--------- ------------------------
--------------- ----
-
-
-其中：
- routes：指借助 dynamic-mock-api 进行动态 Mock 的配置文件路径；
- watch：监控文件变化的目录，当该目录中的文件发生变化时，自动重启服务；
- port：动态 Mock 服务启动的端口；
- proxy：动态 Mock 接口使用的代理地址。
启动服务时，只需要在命令行中输入 npx dynamic-mock-api 即可。
高级使用：自定义 Mock 数据
动态 Mock 的数据不一定是简单的静态结构体。如果需要进行一些计算或者逻辑处理，也可以通过 dynamic-mock-api 在 server.js 文件中自定义返回的 Mock 数据。需要重点理解的是，处理 Mock 数据的代码需要写在 express 的路由回调中，用于处理请求参数和响应数据。可以使用 Mock.js 等 Mock 工具库加以辅助。
例如，我们需要 Mock 一个登陆接口的返回数据。该接口需要接收 POST 请求，body 中需要包含 username 和 password 两个参数。如果该用户名和密码正确，则返回 token 和用户信息；否则返回错误信息。示例代码如下：
-- -------------------- ---- -------
----- --------- - ----------------------------
----- ---- - ----------------
----- ---- - ------------------
----- -------- - -
--------- --------
--------- ---------
------ -------------------
--
------------------------------ ------------------ -
------ -
-------- -
--------- ------------------------
--------------- ----
-
--
--------------- ---- -
----- - --------- -------- - - ---------
-- --------- --- ----------------- -- -------- --- ------------------ -
--------------------
----- --
----- -
------ ---------------
----- -
----- ---------------------
------- ------------------------------
-
-
----
- ---- -
----------
----- --
-------- ----------
---
-
-
---以上是 dynamic-mock-api 的基本使用方法和实例介绍。通过本文，你已经掌握了 dynamic-mock-api 的使用方法和扩展思路，相信 dynamic-mock-api 能够帮助你更加愉快地进行前端开发和调试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b41c6eb7e50355dbccb