后台管理系统查询表单偷懒的小技巧

31 阅读2分钟

知道兄弟们时间宝贵,省流版:1.书签;2.代码片段;3.浏览器扩展(插件);序号代表方便程度的优先级

国际惯例交代下背景,后台管理系统大家都不陌生,多条件查询表格大家肯定都会遇到,类似下图

image.png 像我每天会有大量条件相同的查询,和兄弟们一样我的时间也很宝贵,查询需要我选择好条件然后点击查询,每天不定时查询的时候是在重复做工,不符合我拿一份钱办一份事的准则,所以我要偷懒

一、书签

原理:在书签链接中放入立即执行函数,点击书签即可在当前页面执行代码
步骤

  1. 创建一个书签,编辑 URL 为 javascript:(function(){ /* 你的代码 */ })();

如我的需求其实很简单,在风险等级选择器中选择高风险(0:全部,1:低风险,2:低中风险,3:中高风险,4:高风险,5:无风险),在处理状态选择器中选择未处理(0:全部,1:未处理,2:已处理),然后查询

const level = document.querySelector('select[name="level"]')
const status = document.querySelector('select[name="status"]')
const queryBtn = document.querySelector('button[type="submit"].btn.btn-success.m-r-5')

level.value = 4
status.value = 1
queryBtn.click()

然后可以通过代码压缩工具处理一下长度,将其放入书签的 URL中,如此我进入后台查询表格就只需要点击一下书签

二、代码片段

在浏览器控制面板的 Source 选项卡下点击展开箭头有个snippets的选项,可以新建代码片段,如上面那段代码右键点击执行,但是这种需要打开控制面板->选择选项卡下的代码片段->右键点击执行三步相比于直接在页面选择条件然后查询并没有便捷多少

image.png

三、浏览器扩展

这个优先级最低,因为我觉得大材小用了,我的需求太简单了,写一个扩展多少有点大炮打蚊子的感觉,列一下可以实现我需求的思路

  1. content注入页面,可以在页面添加一个按钮,注入的页面是可以获取到网页的元素的,然后执行上面的代码即可
  2. 这种不推荐但也可以,popup页点击扩展弹出的页面写一个按钮和content.js通信触发上面的代码或者侧边栏sidePanel中与content.js通信触发

四、总结

便捷程度:书签 > 代码片段 > 浏览器扩展,优缺点很明显,书签点击一次即可执行,代码片段需要点击多次,浏览器通过注入也可以只点击一次,但是编写会比前两种繁琐一些