前言
在前端开发过程中，我们经常需要模拟后台接口数据进行开发和测试。但是，我们不可能每个接口都需要去搭建一个后台服务，这样会很浪费时间和资源。所以，使用一些 mock 工具来模拟后台接口数据是一个不错的选择。
这篇文章将介绍一个 npm 包 simple-http-mock，它是一个轻量级的 mock 工具，可以帮助我们快速模拟后台接口数据，省去了搭建后台服务的烦恼。
安装 simple-http-mock
使用 npm 安装 simple-http-mock：
npm install simple-http-mock --save-dev
使用 simple-http-mock
编写 mock 数据
在项目目录下新建一个 mock 文件夹，用来存放 mock 数据。在该文件夹下新建一个 json 文件，例如：user.json。
-- -------------------- ---- -------
-
------- -
----- --
------- ------
------ --
--
------ ----------
------- -
-开启 simple-http-mock
在 package.json 中添加以下 scripts 配置：
{
"scripts": {
"mock": "simple-http-mock ./mock"
}
}在终端中运行以下命令，开启 simple-http-mock：
npm run mock
访问 mock 接口
在浏览器地址栏中输入：http://localhost:3000/user，即可访问该 mock 接口。
自定义端口号
在 package.json 的 scripts 配置中，使用 --port 参数可以指定端口号，例如：
{
"scripts": {
"mock": "simple-http-mock --port 8080 ./mock"
}
}自定义返回结果
通过自定义一个回调函数，可以实现自定义返回结果。例如：
在 user.json 文件中增加一个属性 callback，并设置为回调函数的函数名：
-- -------------------- ---- -------
-
------- -
----- --
------- ------
------ --
--
------ ----------
------- --
----------- ---------
-在同级目录下创建 callback.js 文件，实现 getUser 函数：
module.exports = function (req, res) {
const data = {
data: req.body,
msg: 'success',
code: 0,
}
res.json(data)
}在 package.json 的 scripts 中使用 --callback 参数指定回调函数的路径和函数名：
{
"scripts": {
"mock": "simple-http-mock ./mock --callback ./callback.js#getUser"
}
}总结
以上是 simple-http-mock 的使用教程，它是一个非常方便的 mock 工具，可以帮助我们快速模拟后台接口数据，提高开发效率。
简单总结一下：
- 使用 npm 安装 simple-http-mock
- 编写 mock 数据
- 配置 package.json 中的 scripts，开启 simple-http-mock
- 访问 mock 接口
- 可以自定义端口号和返回结果
欢迎大家在评论中分享自己使用 mock 工具的经验和技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551ef81e8991b448cf6cc