前言
故事时间:2021年10月中旬
2019年底,疫情爆发了,刚刚开始了半年大学生活的我,开始了在家的网课计划😔。返校后,学校也从原来的开放管理变成了封闭管理,同学们需要在学校的E站通提交请假申请,然后经过辅导员批准后才能进出校园。从此之后,批假就成了每个辅导员每天最辛苦的工作之一。
也许E站通设计者也没有想到每天可能有上百条请假单需要批?十月一假期的到来,同学们都迫不及待地请假去外面散散心(好好玩耍😁),因此,假期的这段时间每天要收到300条左右的请假单,批假的操作也变成了机械的重复性操作:点开表单➡查看请假信息(当然,很离谱的理由怎么可能通过🙄)➡点击同意➡输入意见➡点击提交➡返回列表页。1202年竟然还要连续批上百条这样的表单?
正好,我前些日子刚学了做微信小程序,对JavaScript的学习也从入门到入土了,正好可以拿这个来练练手。于是这个计划诞生了~
(其实之前用Python做过一个简单的版本,单线程的Python处理上百条表单???)
开始
因为之前做的Python版本,需要登录学校的统一身份认证获取到cookies
,然后拿着cookies
去一条一条提交(后来想想这个想法竟然这么蠢),于是想到了一个很Cooooool的想法,为啥不做一个浏览器脚本?就地拿数据岂不是更方便?想法很美好,现实也没有很残酷,开始!
Tampermonkey 是一款免费的浏览器扩展和最为流行的用户脚本管理器,它适用于 Chrome, Microsoft Edge, Safari, Opera Next, 和 Firefox。
虽然有些受支持的浏览器拥有原生的用户脚本支持,但 Tampermonkey 将在您的用户脚本管理方面提供更多的便利。 它提供了诸如便捷脚本安装、自动更新检查、标签中的脚本运行状况速览、内置的编辑器等众多功能, 同时Tampermonkey还有可能正常运行原本并不兼容的脚本。
油猴在之前我经常用于但不限于刷网课、看视频、网盘下载等学习(当然)用途,虽然经常用,但是也没认真的去了解过它运作的原理。通过找了众多的插件学习。终于,我找到了思路!
思路
首先是入口问题,在'我的待办'页面里,有'待处理'和'已处理'两个Tab,很明显,在它俩右面放一个'批量操作'毫无违和感,于是创建了按钮,找到两个Tab所在的标签并将它插入到这个标签的最后,将Tab的class
赋给创建的按钮,这样就得到了一个毫无违和感的按钮。
let btnTodo = document.querySelector('[class=todo_top_tab]'); // 找到存放Tab的标签
let btn = document.createElement('li'); // 创建新标签
btn.id = 'piliang'; // 设置id
btn.innerHTML = "批量操作"; // 设置标签内部信息
btn.addEventListener('click', function () {
piliang();
}); // 设置点击事件
if (btnTodo) {
btnTodo.insertBefore(btn, btnTodo.nextElementSibling);
} // 插入按钮
然后就是点击按钮后的事件,点击按钮后,我使用jQuery
在<head>
标签后插入了一个铺满屏幕的标签,用来覆盖掉之前的页面,然后又插入了一个简单的表格,用异步函数加载了数据插入到生成的表格中。(因为已经登陆了E站通,所以直接发送相关请求就能直接获取属性,无需繁琐的登陆操作,这里还是想吐槽一下之前Python单线程的尴尬场面)
我在每行信息前面插入了一个<input>
复选框,标签里面还存放了包括但不限于taskId
等信息,选中想要进行操作的表单,会有同意、驳回、拒绝三个操作,点击后会弹出预置好的弹窗进行意见填写(其实就是一个填同意
的地方),然后提交进行表单批量操作。(多线程的速度给一个大大大大大的👍)
尾语
到这里,基本的功能就已经完成了,其实整个项目不是很难,我也只是用了四五天(好像)就完成了所有的工作,其实算是JavaScript的一个初步应用(其实很多工作量大的地方都被我省略掉了,比如:用异步函数加载数据),我觉得在这个项目中遇到的最大的问题就是去搞懂异步函数运行原理,这里放一个帮助我去理解异步函数的一个视频(异步编程: 一次性搞懂 Promise, async, await (#js #javascript))。为什么省略了工作量最大的地方,我认为这个项目的灵魂就是整体的思路,思路有了,代码自然写的来,我也通过这个项目真正的入了JavaScript的门!