简介
Whistle 是一款基于 Node.js 开发的跨平台网络抓包和调试工具,具有多种协议、多种场景、多种数据格式的支持,并具有插件扩展、界面友好、跨平台等优点。有很多类似的工具,但并不是很多都能完美兼容 HTTPS 抓包,而 Whistle 可以通过一次安装证书的方式抓取 HTTPS,对前端同学来说是一个非常实用的调试工具。
Whistle.tianma 是 Whistle 的一个插件,它提供了一些非常实用的功能,例如 mock 接口、模拟数据、接口测试、域名跳转、负载均衡以及网站条件模拟请求等。本文是 Whistle.tianma 模拟数据的使用教程。
安装
安装 whistle.tianma,需要先安装 whistle:
npm i -g whistle
然后通过 whistle 的插件安装命令安装 whistle.tianma:
w2 install whistle.tianma
使用
增加规则
编辑规则文件 ~/.WhistleTianma/default/rules.txt
,然后在文件中定义规则,规则格式如下:
-- -------------------- ---- ------- -- -------- ------- ------ ------ ------------------------------- -------------------- ------------------ ------- ------ ------ ------------------------------- -------------------- ------------------ -- ------ -- ------------ ------- ------ ------------------ ------------------------------- ------------- -- -------------- ------------- -------- ------------------ ------- ------ ------------------- - ------------------------------- ----------------- -- -------------------------- ------- ------------------ -- ---- ---- ------- ------ -------- ------------------------------- ------------------- ------------ --------------------- ---------- ------------------ -- ------- --- -------- ---------------- --- ------- -------- - ---------- -- --- ------- ---------------- ---------- --- ------------------- --------------------------- --- ------- ------------------ -------------- -------展开代码
其中,tianma 参数主要有以下几种:
- name - 如果你要设置多重插件,可以通过此项传递名称,在消息栏中显示
- match - 此项允许进一步子分类,例如:/query/user,那么在匹配路径为 /query/user 的请求时,会有不同的响应。需要注意的是,? 在规则值时替换为 __,因为 ? 是路径占位符。
- type - 指定匹配响应的数据格式类型,目前支持 file、texe 和 base64
- value - 如果你需要配置文件响应,则可以通过此项指定文件名,支持相对路径
- log - 将匹配到的规则打印到标准输出。
可以简单地理解这几个参数,理解起来非常简单。
webpack 解决假数据问题
前端开发常常需要在没有后台支持的情况下马上开发前端工作,通常,我们为前端开发提供一些假数据。
此时,我们可以通过 webpack-dev-server 的代理功能和 whistle.tianma 配合使用。
首先,安装 webpack 和 webpack-dev-server。然后配置 webpack 的 devServer选项:
-- -------------------- ---- ------- ---------- - ------ - -- --------- -- --------- ------ -------- -------- - ------- ------------------------ ------------- ---- - - -展开代码
然后,我们可以通过 whistle 的规则定义来配置响应:
local:/api/.* tianma="{name:'whistle.tianma',type:'txt',value:'{\n "data": [\n {\n "id": 1,\n "name": "whistle.tianma"\n },\n {\n "id": 2,\n "name": "npm"\n }\n ]\n}'}" whistle.tianma.0001
总结
通过 whistle.tianma 实现模拟假数据,可以帮我们在没有后台支持的情况下马上开发前端工作,使整个开发流程快速迭代。同时,也可以避免调用真实接口时,因后台服务的依赖导致前端开发无法进行。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600671088dd3466f61ffdebb