前言
在前端开发过程中，我们经常需要建立一些数据接口来完成前后端的交互。有时候手动模拟数据非常耗时费力，因此一些第三方工具应运而生，比如 json-server。它可以快速地搭建一个 mock 接口，但是它需要自己写一个 json 文件作为数据源。如果在前端做接口开发，这种方式显然没办法适用，所以今天介绍一种基于 gulp 的 mock 接口工具 —— gulp-json-srv。
使用方法
- 首先，安装
gulp-json-srv，可以通过 npm 包管理器进行：
--- ------- ------------- ----------
- 在
gulpfile.js文件中引用它，与其他插件一样：
----- ---------- - -------------------------
- 接下来，在 gulp 任务中配置
gulp-json-srv：
------------------------ -- -- -
------ ---------------------------
------------------
----- -----
------ -
------- -------
-
----
---其中，port 为端口号。hosts 可以指定多个接口路由到不同的数据源目录。
- 将相应的数据源存放到指定目录下：
-
--- ---
--- --- ----
--- --- ---------
--- --- ----------
--- ---------
--- -------- 最后，在 gulp 中调用该任务即可启动 mock 接口服务：
---- -----------
指导意义
gulp-json-srv 可以快速地启动 mock 接口服务，为前端开发节省了模拟接口数据的时间。并且，由于它是基于 gulp 的，因此拓展性很强。比如，我们可以使用 gulp-concat，通过拼接多个数据源文件来模拟接口的列表页和详情页的切换。又或者，我们可以使用 gulp-watch，当 mock 数据文件发生变化时自动重载服务。
示例代码
mock-data/blog.js
-------------- - -------- -- -
------ -
------ -
---- -- ----- -------
---- -- ----- ------
-
--
--gulpfile.js
----- ---- - ----------------
----- ------ - -----------------------
----- ---------- - -------------------------
----- ----- - ----------------------
------------------------ -- -- -
------ ---------------------------
------------------
----- -----
------ -
------- -------
-
----
---
----------------- -- -- -
------ ---------------------------
-------------------------
-----------------------------
---
------------------ -- -- -
------------------------ ---------------------
---
---------------- -------------------------- ----------上面的示例中，我们在 mock-data/blog.js 中定义了一个用户列表数据，然后通过 gulp-concat 插件将多个数据文件合并成一个文件，最后存放到 api/blog 目录下。
为了能够实时更新 mock 数据，我们还可以使用 gulp-watch 监听文件变化，实时调用 mock 服务。最终，我们将启动 mock 服务和文件监听任务整个到一个任务 dev 中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedb5d5b5cbfe1ea061147c