在前端开发中，我们经常需要模拟后台接口，进行前端页面的开发测试。这时候，通常我们需要使用一些 Mock 数据来模拟后台接口的返回数据。而 frame-server 就是一个方便创建和管理 Mock 数据的 npm 包。
frame-server 简介
frame-server 是一个基于 Express 的 Mock 数据管理工具。它可以快速创建和管理 Mock 数据，并提供了一系列的辅助工具，例如 URL Rewrite、匿名函数数据生成器等。
安装和使用
frame-server 需要在全局安装，通过以下命令安装：
npm i -g frame-server
安装完成后，在命令行中输入 frame-server 即可启动服务，默认会监听 localhost:8000。
frame-server 的使用非常简单，只需要在项目根目录下创建一个 mock 文件夹，并在该文件夹下创建一个或多个 Mock 数据文件即可。这些 Mock 数据文件只需要导出一个 JavaScript 对象，即可表示返回的数据。
例如，在 mock 文件夹下创建一个 user.js 文件，然后输入以下内容：
-- -------------------- ---- -------
-------------- - -
-- -- --- ---- ----- --------
---- ------- -
----- -----
---- --
--
-- -- ---- ---- ----- --------
----- ------- ----- ---- -- -
----- - ----- --- - - ---------
----------
-----
---
---
--
-- -- --- ---- ----- ----
---- -------- --
-在以上代码中，我们使用了三个不同的方式来创建 Mock 数据：
- 直接使用一个对象表示返回的数据，此时返回数据为
{ name: '张三', age: 18 }。 - 使用一个函数表示数据生成器，该函数可以在接口被请求时动态生成返回的数据，并传入
req和res参数以获取请求和响应对象。此时返回数据为{ name: req.body.name, age: req.body.age }。 - 使用一个空对象表示该接口不返回任何数据。
URL Rewrite
在正式的开发中，接口的地址可能不会和 Mock 数据的地址完全一致。例如，开发人员可能会将所有的接口地址都添加 /api/ 前缀。此时，我们可以使用 URL Rewrite 工具来将请求地址转换为对应的 Mock 数据地址。
在 mock 文件夹下创建一个 ._mock.js 文件，然后输入以下内容：
module.exports = {
'/api/user': {
target: '/user',
changeOrigin: true // 如果需要跨域访问，可以设置 changeOrigin 为 true
}
}在以上代码中，我们将 /api/user 请求转换为 /user，并允许跨域访问。
匿名函数数据生成器
我们发现，在一些情况下，我们需要随机生成 Mock 数据。这时候，我们可以使用匿名函数数据生成器来为接口生成数据。
在 mock 文件夹下创建一个 random.js 文件，然后输入以下内容：
-- -------------------- ---- -------
----- ----- - -----------------
-------------- - -
---- --------- -- -- -
------ -
----- ----------------------
------ ----------------------
-
-
-在以上代码中，我们使用了 faker 库来进行随机数据生成。
总结
通过 frame-server，我们可以方便地管理 Mock 数据，并模拟后台接口的返回数据。同时，URL Rewrite 和匿名函数数据生成器的使用，也为我们提供了更加灵活的 Mock 数据管理方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d530d0927023822ab9