[JS真好玩]|[JS真好玩] 遇到表格,手动翻页太麻烦(我教你写脚本,一页展示所有数据)
我是HullQin,公众号线下聚会游戏的作者(欢迎关注公众号,发送加微信,交个朋友),转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》,是个网页,可以很方便的跟朋友联机玩斗地主、五子棋等游戏,不收费没广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢~我有空了会分享做游戏的相关技术。互联网用户的困惑 看到这篇文章的人,想必都是互联网用户吧。你们一定遇到过「表格」。
我们在阅读表格时,可能有这种困惑:
- 表格不支持关键词搜索
- 表格不支持按照某列排序
- 表格每页只能展示10条数据,需要不断翻页,才能看完所有内容
如果表格一页能展示所有数据就好了!
这样的话:
- 关键词搜索可以通过浏览器的「搜索」功能实现(
Ctrl
+F
或Command
+F
)。 - 排序可以参照我下一篇文章实现(敬请期待)。
- 不再需要手动翻页了。
解决方案 以掘金为例子
进入「创作者中心」-「内容数据」-「数据趋势」-「单篇分析」https://juejin.cn/creator/data/content/article/single 后,刚好有个表格,我们拿来练练手。
我们发现,这个叫做
list_by_user
的API,是后端的分页API。我们只要遍历请求它,就可以拿到表格所有的数据,之后让前端一次性展示出来就可以了~
这里有2个问题需要解决:
- 我要按页循环请求接口,从而获取表格所有的数据。
- 我要让前端的掘金代码请求时,只请求1次,就获得所有的数据。这样可以一次性展示。
list_by_user
的API,返回了表格的所需数据。我们需要修改它的
page_no
参数,然后遍历多次,一直请求这个接口,直至最后一页。Chrome最方便的一点是,可以直接
Copy as fetch
,点击后,就可以复制这个请求的fetch版本,做「重放攻击」也太方便啦,Chrome的贴心功能真是太刑啦!文章图片
文章图片
当然以上的「重放攻击」都要打引号,其实不算重放攻击,只是我们多做了一次查询,它并没有改变后端的数据状态。
下面,改一下fetch函数,我们需要保存它的结果。
这个API的返回结果是这样的:
文章图片
我们最终目的是,把data里的数据都整合进同一个数组中。
const result = [];
const res = await fetch('...你复制的内容');
const data = https://www.it610.com/article/await res.json();
result.push(...data.data);
文章图片
接下来,我们给上面的逻辑加上for循环实现分页获取:
const result = [];
// 不能给掘金太大压力,我们定义个sleep函数,1秒请求一次就好
const sleep = async () => new Promise(resolve => setTimeout(resolve, 1000));
for (let i = 1;
i <= 2;
i++) { // 注意这里需要把i的最大值改下,看看你需要几次才能下载完所有数据。
const res = await fetch("https://api.juejin.cn/content_api/v1/article/list_by_user?修改成你的参数!", {
"headers": { "content-type": "application/json" },
"body": "{\"page_size\":10,\"page_no\":" + i + ",\"audit_status\":null}",
"method": "POST",
"mode": "cors",
"credentials": "include",
});
const data = https://www.it610.com/article/await res.json();
result.push(...data.data);
await sleep();
// 不能给掘金太大压力,我们1秒请求一次就好
}
文章图片
现在,result就是我们表格中的所有数据了!
解决第2个问题:一次性渲染到前端页面 方法比较多,这里我们用个简单的方法,参考上篇文章《嘘!我改了掘金源代码!1行代码,让表格支持page_size切换,从每页10条变为20条!》的原理。
针对
list_by_user
这个API,我们返回一个特殊的对象,包含json
方法,因为掘金的JS会在调用fetch
后调用json
,从而把response body中的字符串转为json。我们只要在json方法中,返回预期的数据,那么掘金的JS就会帮助我们渲染这些数据啦!_f = fetch;
fetch = (u, i) => u.includes('list_by_user') ? {
json: async () => ({
count: result.length,
data: result,
err_msg: "success",
err_no: 0,
}),
} : _f(u, i);
使用方法,跟上篇文章一样,先点开「整体分析」,再点开「单篇分析」,就可以看到,一页加载了所有文章数据啦!
文章图片
适用范围
前后端分离的架构,后端提供了分页API,前端只负责展示API返回的数据。
本文只是拿掘金举了个例子,其他网站也是大同小异。希望你能举一反三,以后面对类似情况时,也不会束手无策。
温馨提示
毕竟我本人之前也是字节的前端开发,出于责任感,提示下大家:禁止发送恶意请求给掘金噢,禁止压测噢,禁止利用掘金漏洞干坏事噢,不然你的账号可能会被封禁。
写在最后 【[JS真好玩]|[JS真好玩] 遇到表格,手动翻页太麻烦(我教你写脚本,一页展示所有数据)】我是HullQin,公众号线下聚会游戏的作者(欢迎关注公众号,发送加微信,交个朋友),转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》,是个网页,可以很方便的跟朋友联机玩斗地主、五子棋等游戏,不收费没广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢~我有空了会分享做游戏的相关技术。
推荐阅读
- 万里新疆行(一些真诚建议!看过我路书的朋友更要看,加急补充!无标题文章)
- 你真的要走吗()
- 2021-04-08面试真题
- 2018-05-31
- 小时候,他好喜欢你啊
- 舍不滴
- 真正的熊市猎人:coinnew交易所
- 2017.4.18|2017.4.18 张安新连接真我指导灵天使
- 东华帝君才是《三生三世》的真正主导者
- 考研真的很难吗(那是你不知道免联考MBA)