一、前言
编码或许是一种谋生之术,但若抛去这一实用主义的视角,你有没有想过,Why code?我们为什么要写代码?在我看来,编码的初衷就是为了提升工作效率,减少不必要的重复!
本期我就带大家回归编码的本真,从生活中的一个不便之处出发,看看编码如何发挥它提升效率的妙用!
二、一个在规划学习时诞生的问题
众所周知,B站是一个学习网站(误)。
这对我等时刻要追踪前沿技术的程序员来说,可谓是块不可多得的修炼宝地啊。
但在b站,不知道大家有没有遇到过这样一种情况,比如说,我在B站发现了一个特别好的学习视频,我规定我自己每天必须要看10集。
但是呢,学着学着就有个问题出现了。
有的时候视频的时长很短,我10分钟就完成了今天的任务,然而有的时候,我却要用整整3个小时才能看完当天的10个视频!
每集的时长不一,为了合理地安排学习时间,我不得不每天都盯着时间来看视频学习。
这多麻烦!多低效啊!程序员之魂熊熊燃烧,何不写个程序一键规划好?
接下来,我就以B站上比较有名的黑马程序员出品的《JUC》教程为例,教大家如何将学习内容合理并快速的分解,并将计划更快更好地整理到Excel中。

三、初级方案
Step 1:确定目标数据
首先,我们来到这个视频的播放页。在这里我们可以看到右侧有一个播放列表,这里就是我们需要拿到并处理的数据。

Step 2:找接口、获取响应信息
打开浏览器开发者模式,刷新网页。找到播放列表对应的接口。
从接口的相应数据我们可以发现,接口返回了所有的播放列表内容,包括每一集的名称,编号,时间(这里单位是秒)等信息。

Step 3:复制响应结果到JSON处理工具
复制响应结果到任意 JSON 处理工具,并拿到data里面的数据,这才是真正的列表list。当然,这里你也可以全部交给代码处理。

Step 4:解析JSON
这里我选择使用 python 来解析这个 json 对象,仅仅用了三行代码,因为对于这种小型编码来说,python 或者 javascript 这种脚本语言,能更快拿到我想要的结果,java 还是太笨重了。

分析我的代码,可以看出我打印了编号、名字和时间,并用 “#” 分隔,这是为了下一步 Excel 的拆分(不用空格是为了防止名字中也出现空格)。

Step 5:导入Excel
打开Excel,复制内容到单元格中。
发现所有数据都在A列中,这明显对分析来说是不友好的。

Step 6:数据分列
Excel中有一个功能叫分列。我们可以根据他的向导,来快速切分数据到不同列中去。



Step 7:切分任务
再下一步,就是根据每天的学习目标做一个切分,比如说我今天要学习2小时,那么我就每差不多120分钟做一个切分。这样,每天的任务就分割好了。

Step 8:成品展示
下面便是成品

四、方案升级——一次写码、重复使用
方案升级
在上一节中,我们使用的是人力寻找的方案。
有没有一种可能,就是我只写一次代码,然后就能多次重复使用呢?也省得我们自己去找接口,到复制,到处理。
当然是有的,那就是使用 xpath(这个东西非常简单,学习一会语法就能模仿着使用了)解析当前的 html 页面,这样连自己找接口都省了。
如果你会 python 爬虫的话,你甚至可以直接复制网页的 URL,然后爬取网页 html 代码,再使用 xpath 解析出我们要的数据。(注意,这里的数据是异步请求后执行 js 生成的 html 代码,我们还需要借助 selenium 来执行 js 代码)。如果大家感兴趣的话,可以自己去研究一下 python 爬虫。
方案步骤
Step 1:定位解析点
分析网页的 html 代码,定位到我们需要解析的地方。


Step 2:分析数据标签,写通用代码
分析此处树形结构、属性、标签(class,div,id等)。
发现所有数据都在一个 class=“list-box” 的 ul 标签下。
然后我们需要的数据又分别在下述标签下。
class=“page-num”、
class=“part”、
class="duration"
因此我们可以快速写出代码,拿到我们想要的数据。这样,我们的代码就进一步通用了。


五、方案再升级
进一步优化的方案就是上一节提到的 selenium。
多一个库就多一点学习成本,这里我便不再演示。
六、总结
Why code?This may be an answer ~
解决生活中真实遇到的问题,而不是为了编码而编码,这或许才是我们应该反思的!
通过今天的学习,大家已经能体会到编程在生活中的用处。触类旁通一下,我们是不是还可以处理更多种类的数据呢?
网友评论