10分钟让你学会百度指数跑分图

养成习惯，先赞后看!

前言

相信大家肯定在B站上看过很多类似于这种的视频：

image.png

这种跑分图其实还是很有意思的。所以Up自己也想做着玩玩。所以就有了今天这篇文章。 首先先给大家看看最后做完的效果：

迪迦.gif

思路

虽然我们不会，但是我们还是能大致猜出来做这种跑分图大致应该是下面这几步。

image.png

爬取数据

这里我们选择的是爬取百度指数，下面我们就来分析百度指数。我们通过F12查看各个接口返回的数据基本上就可以判断出来数据基本就是通过下面这个接口产生的

image.png

但是我们很明显又发现，接口返回出来的数据其实是加密的，我们是不能直接拿来用的，但是页面上又能正常显示，那么很明显肯定是前端解密后端返回的数据再加载出来的，所以前端一定存在一个解密的函数，所以我们只需要去前端页面里面看看就行了。并且大厂的函数命名一般都是比较规范的，所以我们谷歌一下解密的英文单词

image.png

之后我们便在页面的js里面搜索一下即可，最后我们在这个js文件中找到了我们想要的函数

image.png

既然有了解密的函数，那么就问题就解决一大半了，但是我们可以看到该解密函数有两个参数，盲猜其中一个肯定是需要解密的数据，另外一个大概率就是用来解密的秘钥了。接下来我们打一下断点来验证一下看看我们猜的对不对。

image.png

参数e我们很熟悉，很明显就是我们需要解密的数据，但是参数t看着比较复杂，没事，我们接着F12看看接口返回的数据，看看有没有我们想要的。翻了一遍之后我们可以看到是通过这个接口产生的

image.png

但是这个接口需要我们传递一个叫uniqid的参数，这个参数我们很熟悉，也是上面我们一开始的数据接口里面返回的

image.png

所以既然这样的话，我们基本上就能理清百度指数数据获取的整个流程了。流程如下：

• 通过该接口https://index.baidu.com/api/SearchApi/index获取加密的数据以及uniqid
• 通过该接口https://index.baidu.com/Interface/ptbk获取解密数据的秘钥
• 通过解密函数获取解密之后的数据

那么简单了，下面我们自己再来验证一下吧。 但是我在调用接口的时候却发现返回的结果和我们想象中的不太一样。

image.png

就如上图所示，访问该接口之后并不能获取到我们想要的数据。 之后我想的是可能是我们的请求并没有携带cookie信息，所以使得我们的请求不能通过系统的校验。于是我F12检查之后发现，其实是携带了的。

image.png

咋办呢，那我们就来对比百度指数平台的请求和我自己调用的到底有啥区别呢。 其实url传的参数都差不多，所以我们的重点就放在对比请求头上。 之后我便发现，百度平台请求接口的时候都会在请求头里面带上这么一个参数Cipher-Text,但是我们请求的时却没有

image.png

所以我就猜测就是这个参数的问题，顺便我去百度翻译里面搜了一下这个单词的意思

image.png

所以既然有这么个意思。  所以我们在Header里面带上这个参数，我们再来访问一下接口，发现就能正常访问了。

image.png

虽然可以正常访问，但是在好奇心的驱使下，我还是想看看这个密文是怎么生成的，我们简单看一下密文，可以轻松看出来密文的前面一部分就是时间戳，而且大概率就是接口的开始请求时间和结束请求时间，通过工具，我们发现前一个时间戳是固定的，但是后一个时间戳就是请求接口的时间。但是前一个时间戳真的是固定的嘛，经过我几天的测试发现，其实这个时间其实是变化的，基本就是每天的前一天的15:01:13,所以可以看出来应该是通过定时任务每天更新的。 但是后一个就比较麻烦了，这里Up通过搜索只查找到了header设置这个Cipher-Text的地方，但是在这附近打上断点之后没发现啥，感兴趣的小伙伴可以看看,可以的话，可以联系Up，教教Up，Up在这里不胜感激。

处理数据

处理数据这个就比较简单了，这个主要看制作视频的工具需要什么样的数据，我们处理成什么样的就行。我是通过一个在线工具flourish来制作视频的，这个网站张这样：

image.png

他提供多种数据的可视化页面。大家可以根据自己的喜好去选择，这里我选择的是这个

image.png

他需要的数据是这样的

image.png

所以我们把爬取完的数据整理成这样就行了。接着我们就可以直接通过它来生成我们的跑分图了。这个工具详细的使用教程大家可以自己百度，这里就不过多赘述了。