巧妙通过网络架构修改页面图表

在联通官网查看历史账单，可以看到如下的图表：

有趣的问题来了，怎么样可以改变一下这个页面的图表和数据，比如把话费变成50元呢？下面的文字改HTML代码是可以直接改的，但饼图就比较复杂了。如果改不了代码，我们可以试图截流，自定义一个请求的数据。

那我们这次的任务，是要熟悉流量的走向，可以自己控制流量的定义。

逻辑分析

要实现这个目标，我们先分析一下它的处理流程。 每切换一个月份，会加载一次数据，然后把数据显示在页面上。 打开chrome的开发者工具，打开network栏目，可以看到这个流程：切换7月和8月，我们看到加载的请求地址，分别对应两个请求，带上日期的参数的：

图中的 bill?dat=201808

首先我们根据请求地址，在chrome可以找到请求的结果，保存201811和201808两个请求的结果保存为201811.json和201808.json，后面会使用到。

我们需要画一个简单的流程图表明现在的方式：

网络流程改造

那如何快速的建立一个可以对请求结果自定义的代理服务器呢？ 那如果我们把json数据修改了，显示的文字和图表就会跟着调整了。本地架设个代理服务器，根据访问的url不同，提供相应的修改后的数据即可。

用Charles实现

首先我们把本机的网络设置使用代理服务器 127.0.0.1:8888，这是charles的默认代理，一般开启后会自动设置好本机代理。我们使用Charles的MapLocal功能定义请求地址返回的是我们文件的内容：

打开Tools下的Map Local

我们根据网址填写好host，path，query等参数，选择映射到本地文件

我们设置好了两个映射路径和文件

这么操作后，我们就可以访问这两个地址时，返回的是本地的文件，相应的修改本地文件，就可以完成了这次的修改，比如把替换18.45为50，把总额相应也调整了：

改变本地文件后，刷新页面，使用的就是本地的json文件的数据了

用自定义软件实现

另外有一些小软件可以实现：
chrome，SwitchyOmega，PAC，php

chrome自带开发者工具，可以监测请求明细，安装 SwitchyOmega可以做更细致的流量分流和方便的模式切换。 使用PAC可以做流量分配到指定的代理服务器，使用php我们可以快速搭建起一个代理服务器。

1 php运行起来

<?php error_reporting(0); if ($_SERVER['REQUEST_URI'] == '/proxy.pac') { echo file_get_contents('proxy.pac'); exit; } if ($_GET['dat'] == '201811') { echo file_get_contents('201811.json'); exit; } echo file_get_contents('201808.json'); 运行命令： php -S 127.0.0.1:8080 local.php 这样本机就启动了一个8080端口的服务器，里面的逻辑是根据访问的地址和参数确认返回的内容，这个是根据我们的实验写的逻辑，完成一个pac的请求和json数据的请求。 proxy.pac function FindProxyForURL(url, host) { if (shExpMatch(url, "http://iservice.10010.com/e3/static/wohistory/bill*")) { return "PROXY 127.0.0.1:8080"; } if (shExpMatch(url, "http://abc.com/aa.html*")) { return "PROXY 127.0.0.1:8080"; } return "DIRECT"; } 可以在SwitchyOmega可以添加一个场景：  如果不需要这个插件，在系统可以设置好：  这样，我们就相当于在pac里定义什么地址交给php处理了，php可以修改返回的内容，换成node和python也很容易。 设置好之后，访问 http://iservice.10010.com/e3/static/wohistory/bill?dat=201808 我们就可以得到php的返回结果了，看看请求信息，确认是php返回的  最终访问效果和charles是一样的哦！ 这个处理流程如下：  # 小结 我们可以通过代理手段，把流量分配到某个软件处理，自定义返回的结果。代理的分配可以使用PAC做智能分流，也可以全部扔给代理软件，比如Charles，在软件里自定义。自己也可以通过php等语言实现一个代理服务器，实现自定义返回值。返回值的改变就影响了页面的结果，这样就达到了我们的目的。  更多故事，请扫码关注《架构师旅程》