本文介绍 npm 包 express-mock-middleware 的使用教程，此包可以帮助前端开发人员在开发环境中快速搭建 mock server，方便、快捷地模拟后端接口数据。
安装
首先，需要安装 express 和 express-mock-middleware。
npm install express express-mock-middleware --save-dev
使用
在 app.js 或 index.js 中引入 express 和 express-mock-middleware。
-- -------------------- ---- ------- ----- ------- - ------------------ ----- -------------- - ---------------------------------- ----- --- - --------- ------------------------ --------- -------- ----------- ---- --- ---------------- -- -- - ----------------- ------ -- ------- -- ---- ------ --
使用 mockMiddleware 函数创建一个 mock server。这个函数接收一个对象作为参数，包含两个字段：
mockPath: mock 数据所在的目录，也就是存储 mock 数据的文件夹。可以按照你自己的目录结构自定义。建议将 mock 数据目录和前端代码目录分开，方便维护和协作。watchFiles: 是否监听 mock 数据的变化。设置为 true 后，可以在 mock 数据文件发生改变时，实时刷新 mock server，避免重启 server 的麻烦。
mock 数据
在 mock 数据目录下新建一个 JSON 文件，比如 getUser.json。
-- -------------------- ---- -------
-
------- --
---------- ----------
------- -
----- ----
------- ------
------ --
-
-在前端代码中，请求这个接口，得到的数据就是上述 JSON 文件的内容。
fetch('/user')
.then(response => response.json())
.then(data => {
console.log(data) // { code: 0, message: "success", data: { id: 123, name: "tom", age: 18 } }
})请求参数和动态路由
如果要模拟有请求参数或者动态路由的接口，express-mock-middleware 也能够很好地支持。
比如有一个接口 /api/user/:id，可以通过如下方式模拟：
-- -------------------- ---- ------- -- ---------------- -------------- - ------------- ---- ----- - ----- -- - ------------- ----- ---- - - --- --- ----- ------ ---- -- - ---------- ----- -- -------- ---------- ----- ---- -- ------ - -- ------ ----- -------------- - ---------------------------------- ------------------------ --------- -------- ----------- ---- --- -- -- ---------------------------------- -- - ----- -- -------- ---------- ----- - --- ------ ----- ------ ---- -- - -
上述代码中，mock 数据文件 getUser.js 中定义了一个中间件函数，处理请求的参数，返回模拟数据。在 app.js 中，将 mockMiddleware 定义的 mock server 挂载在 express 的实例对象上。
需要注意的是，express-mock-middleware 的匹配顺序是按照 mock 数据目录下文件名的字典顺序进行的。因此，如果有多个 mock 数据文件匹配到同一个接口，应当按照自己的需求更改 mock 数据文件名，避免出现意料之外的情况。
指南意义
使用 express-mock-middleware，我们可以在前端开发的早期阶段就模拟后端接口数据，方便前端代码的开发和联调。同时，也能够更好地协同开发，节省开发人员的时间和精力。此外，在调试时，也能够更好地定位问题所在，加速开发进程。
示例代码
-- -------------------- ---- -------
----- ------- - ------------------
----- ---- - ---------------
----- -------------- - ----------------------------------
----- --- - ---------
---------------
-----------------------
---------------------------- --------- ---- ---
------------------------
--------- --------
----------- -----
---
---------------- -- -- -
----------------- ------ -- ------- -- ---- ------
--
-- ----------------
-------------- - ------------- ---- ----- -
----- -- - -------------
----- ---- - - --- --- ----- ------ ---- -- -
---------- ----- -- -------- ---------- ----- ---- --
------
-
-- --------------
-------------- - ------------- ---- ----- -
----- - --------- -------- - - --------
-- --------- --- ------- -- -------- --- --------- -
---------- ----- -- -------- ------ --------- ----- - ------ ----- ---
- ---- -
---------- ----- -- -------- ------ ------- --
-
------
-
-- ----------------
-------------- - ------------- ---- ----- -
----- - ---- - -- -------- - -- - - ---------
----- ----- - ---
----- ---- - ------------ ------- -------- ---------- ------ -- -
------ -
--- ------ - -- - ----- - -- - ---------
----- ------------ - ----
---- --
-
--
---------- ----- -- -------- ---------- ----- - ----- ----- ------ ----- ---
------
-
-- -- ------------------------------ -- - ----- -- -------- ---------- ----- - --- ------ ----- ------ ---- -- - -
-- -- --------------------------- -- ---- - ----------- -------- ----------- -------- - -- - ----- -- -------- ------ --------- ----- - ------ ----- --
-- -- -------------------------- -- - ----- -- -------- ---------- ----- - ----- ------ ------ --- --来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005548d81e8991b448d1d1a