简介
free-mock 是一款用于前端开发的 mock 数据生成工具，它可以帮助我们快速创建并管理 mock 数据，方便测试和调试。此外，它还支持数据持久化和多人协作，可以有效提高团队开发效率。
安装
使用 npm 安装 free-mock：
npm install free-mock --save-dev
使用方法
创建 mock 数据
在项目根目录下创建 mock 文件夹，并创建一个 api.js 文件。在 api.js 文件中添加如下代码：
module.exports = {
'/api/user': { name: 'Tom', age: 18 },
'/api/list': [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }]
}这里我们定义了两个接口，分别是 /api/user 和 /api/list。当接口被访问时，free-mock 会直接返回对应数据。
启动服务
在 package.json 中添加如下命令：
"scripts": {
"mock": "free-mock"
}然后在终端中执行以下命令：
npm run mock
此时，free-mock 会启动服务并监听 http://localhost:3000，我们可以在浏览器中访问 http://localhost:3000/api/user 和 http://localhost:3000/api/list 查看 mock 数据。
配置文件
在项目根目录下创建 mock.config.js 文件，用于配置 free-mock。以下是一个典型的配置文件内容：
-- -------------------- ---- ------- -------------- - - ----- ----- -- --- -------- -------- -- --- ----------- ----- -- ---- --- -------- ------- -- ---- ------- ----------- --- -- --- -------- ----- -- -- ---- ----- ----- -- ---- ------ ----- -- -- ---- ---- ------- ----- -- ---- ----------- ---- -- ----- -
以上配置项都有默认值，可以按需修改。
动态 mock
free-mock 支持动态 mock，我们可以在返回数据时通过函数来动态创建数据。例如，在 api.js 中添加如下代码：
module.exports = {
'/api/random': function() {
return { rand: Math.floor(Math.random() * 100) }
}
}现在，每次访问 /api/random 接口，free-mock 会返回一个随机数。
路径参数
在 free-mock 中，我们可以使用路径参数来匹配动态路径。例如，我们想要匹配 /api/users/1、/api/users/2、/api/users/3 等路径，可以这样写：
module.exports = {
'/api/users/:id': function(req) {
return { id: req.params.id }
}
}这里 req.params.id 表示动态路径中的参数值。
query 参数
在 free-mock 中，我们也可以使用 query 参数来匹配动态路径。例如，我们想要匹配 /api/users?id=1、/api/users?id=2、/api/users?id=3 等路径，可以这样写：
module.exports = {
'/api/users': function(req) {
const { id } = req.query
return { id }
}
}这里 req.query 表示 query 参数对象。
中间件
free-mock 支持使用中间件，我们可以使用内置中间件，也可以自定义中间件。以下是一个典型的中间件配置：
module.exports = {
middleware: [
require('free-mock/lib/middleware/logger')(),
require('free-mock/lib/middleware/cors')()
]
}以上代码中，我们使用了内置的日志和跨域中间件。
数据持久化
free-mock 支持将 mock 数据保存到文件中，以便下次启动时自动加载。我们可以将 mock.config.js 中的 dynamic 属性设置为 false，然后在启动 free-mock 时添加 --persist 参数：
npm run mock -- --persist
此时，free-mock 会将 mock 数据保存到 mock 文件夹中的对应文件中。
多人协作
free-mock 支持多人协作，我们可以在 mock.config.js 中配置远程 mock 服务地址：
module.exports = {
remoteMock: 'https://example.com/mock/api',
remoteOptions: {
username: 'user',
password: 'password'
}
}以上代码中，remoteMock 表示远程服务地址，可以是一个 URL，也可以是一个本地文件夹（使用 file:// 协议）；remoteOptions 表示远程服务的认证信息，可以为空。
其他功能
free-mock 还支持其他诸多功能，比如模拟延迟、模拟错误等。有兴趣的读者可以查阅官方文档获取更多信息。
示例代码
这里给出一个完整的示例代码，供读者参考：
api.js：
-- -------------------- ---- -------
-------------- - -
------------- ------------- -
----- - --------- -------- - - --------
-- --------- --- ------- -- -------- --- --------- -
------ -
----- --
-------- ------
-
- ---- -
------ -
----- ---
-------- ----------
-
-
--
----------------- ------------- -
------ -
--- --------------
----- ------
---- --
-
--
-------------- ---------- -
------ - ----- ------------------------ - ---- -
-
-mock.config.js：
-- -------------------- ---- -------
-------------- - -
----- -----
-------- --------
----------- -----
-------- -------
----------- -
---------------------------------------------
------------------------------------------
--
-------- -----
----- -----
------ -----
------- -----
----------- ----
-package.json：
"scripts": {
"mock": "free-mock"
}总结
free-mock 是一个非常有用的工具，它可以帮助我们快速创建并管理 mock 数据，方便测试和调试。同时，它还支持多人协作和数据持久化等功能，可以有效提高团队开发效率。希望本文能够对读者有所启发，也希望读者能够善加利用这个工具，为自己的项目开发加油！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c1281e8991b448d9b47