关于前端:JS真好玩-遇到表格手动翻页太麻烦我教你写脚本一页展示所有数据

45次阅读

共计 2433 个字符,预计需要花费 7 分钟才能阅读完成。

我是 HullQin,公众号 线下团聚游戏 的作者(欢送关注公众号,发送加微信,交个敌人),转发本文前需取得作者 HullQin 受权。我独立开发了《联机桌游合集》,是个网页,能够很不便的跟敌人联机玩斗地主、五子棋等游戏,不免费没广告。还开发了《Dice Crush》加入 Game Jam 2022。喜爱能够关注我 HullQin 噢~我有空了会分享做游戏的相干技术。

互联网用户的困惑

看到这篇文章的人,想必都是互联网用户吧。你们肯定遇到过「表格」。

咱们在浏览表格时,可能有这种困惑:

  • 表格不反对关键词搜寻
  • 表格不反对依照某列排序
  • 表格每页只能展现 10 条数据,须要一直翻页,能力看完所有内容

怎么办呢?

如果表格一页能展现所有数据就好了!

这样的话:

  • 关键词搜寻能够通过浏览器的「搜寻」性能实现(Ctrl+FCommand+F)。
  • 排序能够参照我下一篇文章实现(敬请期待)。
  • 不再须要手动翻页了。

接下来,让我 HullQin 来给你提供一种解决办法,让表格能一页展现所有数据!

解决方案

以掘金为例子

进入「创作者核心」-「内容数据」-「数据趋势」-「单篇剖析」https://juejin.cn/creator/data/content/article/single 后,刚好有个表格,咱们拿来练练手。

咱们发现,这个叫做 list_by_user 的 API,是后端的分页 API。

咱们只有遍历申请它,就能够拿到表格所有的数据,之后让前端一次性展现进去就能够了~

这里有 2 个问题须要解决:

  1. 我要按页循环申请接口,从而获取表格所有的数据。
  2. 我要让前端的掘金代码申请时,只申请 1 次,就取得所有的数据。这样能够一次性展现。

解决第 1 个问题:获取所有数据

咱们关上浏览器的开发者工具,关上 Network(网络)面板,发现了这个叫做 list_by_user 的 API,返回了表格的所需数据。

咱们须要批改它的 page_no 参数,而后遍历屡次,始终申请这个接口,直至最初一页。

Chrome 最不便的一点是,能够间接Copy as fetch,点击后,就能够复制这个申请的 fetch 版本,做「重放攻打」也太不便啦,Chrome 的贴心性能真是太刑啦!

当然以上的「重放攻打」都要打引号,其实不算重放攻打,只是咱们多做了一次查问,它并没有扭转后端的数据状态。

上面,改一下 fetch 函数,咱们须要保留它的后果。

这个 API 的返回后果是这样的:

咱们最终目标是,把 data 里的数据都整合进同一个数组中。

const result = [];
const res = await fetch('... 你复制的内容');
const data = 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 = 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 返回的数据。

本文只是拿掘金举了个例子,其余网站也是大同小异。心愿你能触类旁通,当前面对相似状况时,也不会大刀阔斧。

舒适提醒

毕竟我自己之前也是字节的前端开发,出于责任感,提醒下大家:禁止发送歹意申请给掘金噢,禁止压测噢,禁止利用掘金破绽干坏事噢,不然你的账号可能会被封禁。

写在最初

我是 HullQin,公众号 线下团聚游戏 的作者(欢送关注公众号,发送加微信,交个敌人),转发本文前需取得作者 HullQin 受权。我独立开发了《联机桌游合集》,是个网页,能够很不便的跟敌人联机玩斗地主、五子棋等游戏,不免费没广告。还开发了《Dice Crush》加入 Game Jam 2022。喜爱能够关注我 HullQin 噢~我有空了会分享做游戏的相干技术。

正文完
 0