npm 包 whistle.tianma 使用教程

阅读时长 5 分钟读完

简介

Whistle 是一款基于 Node.js 开发的跨平台网络抓包和调试工具,具有多种协议、多种场景、多种数据格式的支持,并具有插件扩展、界面友好、跨平台等优点。有很多类似的工具,但并不是很多都能完美兼容 HTTPS 抓包,而 Whistle 可以通过一次安装证书的方式抓取 HTTPS,对前端同学来说是一个非常实用的调试工具。

Whistle.tianma 是 Whistle 的一个插件,它提供了一些非常实用的功能,例如 mock 接口、模拟数据、接口测试、域名跳转、负载均衡以及网站条件模拟请求等。本文是 Whistle.tianma 模拟数据的使用教程。

安装

安装 whistle.tianma,需要先安装 whistle:

然后通过 whistle 的插件安装命令安装 whistle.tianma:

使用

增加规则

编辑规则文件 ~/.WhistleTianma/default/rules.txt,然后在文件中定义规则,规则格式如下:

-- -------------------- ---- -------
-- --------
-------   ------  ------  ------------------------------- --------------------  ------------------
-------   ------  ------  ------------------------------- --------------------  ------------------

-- ------ -- ------------
-------   ------  ------------------  ------------------------------- ------------- -- -------------- ------------- --------   ------------------
-------   ------  ------------------- - ------------------------------- ----------------- -- -------------------------- -------   ------------------

-- ---- ----
-------   ------  --------  ------------------------------- ------------------- ------------ --------------------- ----------  ------------------

-- -------
--- -------- ----------------
--- ------- -------- - ---------- --
--- -------   ---------------- ----------
--- ------------------- ---------------------------
--- -------    ------------------ -------------- -------
展开代码

其中,tianma 参数主要有以下几种:

  1. name - 如果你要设置多重插件,可以通过此项传递名称,在消息栏中显示
  2. match - 此项允许进一步子分类,例如:/query/user,那么在匹配路径为 /query/user 的请求时,会有不同的响应。需要注意的是,? 在规则值时替换为 __,因为 ? 是路径占位符。
  3. type - 指定匹配响应的数据格式类型,目前支持 file、texe 和 base64
  4. value - 如果你需要配置文件响应,则可以通过此项指定文件名,支持相对路径
  5. log - 将匹配到的规则打印到标准输出。

可以简单地理解这几个参数,理解起来非常简单。

webpack 解决假数据问题

前端开发常常需要在没有后台支持的情况下马上开发前端工作,通常,我们为前端开发提供一些假数据。

此时,我们可以通过 webpack-dev-server 的代理功能和 whistle.tianma 配合使用。

首先,安装 webpack 和 webpack-dev-server。然后配置 webpack 的 devServer选项:

-- -------------------- ---- -------
---------- -
  ------ -
    -- --------- -- --------- ------ --------
    -------- -
      ------- ------------------------
      ------------- ----
    -
  -
-
展开代码

然后,我们可以通过 whistle 的规则定义来配置响应:

总结

通过 whistle.tianma 实现模拟假数据,可以帮我们在没有后台支持的情况下马上开发前端工作,使整个开发流程快速迭代。同时,也可以避免调用真实接口时,因后台服务的依赖导致前端开发无法进行。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600671088dd3466f61ffdebb

纠错
反馈

纠错反馈