whistle是什么？是非常实用且无敌的好东西
·代理+抓包+mock的小能手
工作中经常遇到联调前需要mock数据进行开发的时候，又或者移动端出现问题，需要抓包看数据分析情况的时候。个人觉得这是一个非常提效的好工具，为此也希望大家也一起使用起来(题外话：比隔壁的charles方便多了)。那么废话不多说了，我相信大家耐心的看完，今后在工作中那简直是如鱼得水的存在啊，哈哈哈。
第一步
·npm i whistle -g 全局安装
· w2 start 启动服务
· w2 stop 停止服务(使用率：0.1%)
第二步
· 科学上网
· Chrome浏览器通过网上应用商店去安装SwitchyOmega插件
安装完成
看到下图的样子，就表示安装成功了。
第三步
配置代理
首先需要在插件菜单里选择选项。
新建情景模式
切换代理
到现在为止，我们通过前三步的一通操作，已经初见雏形了，下面我们来最激动人心的时刻了，开始实现mock数据和抓包的大业。
真正的好戏来了
通过上面三步的操作后，该做的工作都已经搞定了，现在开始启动服务w2 start，启动成功后会看到这样的画面。
上面电脑的IP地址是为了方便手机代理时使用的，电脑端配置使用时访问127.0.0.1:8899即可了，记住whistle的默认端口也是8899。
安装证书
访问127.0.0.1:8899进到配置界面，先来给电脑安装一下证书，安装了证书后电脑就可以进行抓包(https协议的也可以)
下载好后的证书长这个样子：
双击打开证书，之后我们要给证书充分的信任。
至此，电脑上的证书也安装完成并且信任了。
配置规则和结果
在配置界面Rules中可以配置很多规则(代理的核心就在这里)。
由于很多内容都无法通过简单的文字描述出来，So还是直接用图示代替吧，请看大屏幕。
上图展示了基本的规则配置，下面再给大家展示一下Values对应的mock数据。
基本用法大家一看就会了，就直接开始介绍常用的几种代理方式吧。
开始代理
现在假设我们已经和后端同学确定好了要用到的接口，然后前端开始进入了开发阶段。其中一个接口api为/getlist获取列表接口，我们就直接拿这个来举例演示一下。
下面出现的IP地址为我电脑的IP(192.168.3.14)，方便代理使用：
// Cart.vue组件
<script>
import axios from 'axios'
export default {
mounted() {
axios({
url: 'http://192.168.3.14:9000/getlist'
}).then(res => {
console.log('购物车请求列表：', res)
})
}
}
</script>
在加载Cart组件的时候，发起了一个ajax请求，然后将请求的数据代理成本地mock好的内容。相信细心的朋友们早已发现了，在配置规则和结果的图示中已经有了相应的规则了。
没错就是这段，哈哈。
# 代理本地数据 (行首是#为注释)
http://192.168.3.14:9000/getlistresBody://{getList.json}
按理说一切都配好了，那我怎么才能知道代理是否成功呢？
这个很简单，回到whistle配置界面，左侧菜单第一项是Network，在这里你能看到你代理的接口请求是否成功(代理成功的话颜色会是蓝色)
当然了，这只是肉眼所见的代理成功，具体有没有成功mock出我们本地搞出来的数据呢？接着往下看吧！
此时此刻，正如彼时彼刻，已经代理成功并且mock出了我们想要的数据了。
本文内容不用于商业目的，如涉及知识产权问题，请权利人联系51Testing小编(021-64471599-8017)，我们将立即处理
