【JS太好玩了】遇到表格手动翻页太麻烦？我将教您如何编写一个脚本来在授权的一页上显示所有数据。我独立开发了《联机桌游合集》，这是一个网页，在这里你可以轻松地和朋友一起玩网络游戏，五子棋等游戏，不收费，也没有广告。还为GameJam2022开发了《Dice Crush》，喜欢的话可以关注我HullQin哦~有空我会分享制作游戏的相关技术。网民的迷茫看到这篇文章的人一定是网民。你一定遇到过“形式”。我们在看表格的时候，可能会有这样的困惑：表格不支持关键字搜索表格不支持按某列排序表格每页只能显示10条数据，需要不断翻页阅读所有内容。我应该怎么办？如果表格能在一页上显示所有数据就好了！这种情况下：可以通过浏览器的“搜索”功能（Ctrl+F或Command+F）实现关键词搜索。排序可以参考我下一篇文章实现（敬请期待）。无需再手动翻页。接下来我HullQin给大家提供一个解决方案，让表格可以在一页上显示所有的数据！解决方案以掘金为例。进入“创作者中心”-“内容数据”-“数据趋势”-“单篇分析”https://juejin.cn/creator/data/content/article/single后，就出现了一个表格，我们用它来实践。我们发现这个叫list_by_user的API是一个后端分页API。我们只要遍历请求一下，就可以拿到表中所有的数据，然后让前端一次性显示出来~这里要解决两个问题：我想按页循环请求界面获取表中的所有数据。我希望前端代码只请求一个请求并获取所有数据。这允许一次性显示。解决第一个问题：获取所有数据我们打开浏览器的开发者工具，打开Network（网络）面板，发现这个API叫list_by_user，它返回的是表格需要的数据。我们需要修改它的page_no参数，然后多次遍历，一直请求这个接口，直到最后一页。Chrome最方便的地方就是可以直接copyasfetch。点击后，可以复制本次请求的fetch版本。做“重放攻击”也很方便。Chrome的贴心功能真是惩罚啊！当然，必须引用上面的“重放攻击”。事实上，它不是重放攻击。我们只是多了一个查询，并没有改变后台的数据状态。接下来，更改fetch函数，以便我们需要保存其结果。该API的返回结果如下：我们的最终目的是将data中的所有数据整合到同一个数组中。常量结果=[];constres=awaitfetch('...你复制的内容');constdata=awaitres.json();结果.push(...data.data);接下来，我们给上面的逻辑加上一个for循环实现分页获取：constresult=[];//不要给掘金太大压力，我们定义一个sleep函数，每秒请求一次就可以了constsleep=async()=>newPromise(resolve=>setTimeout(resolve,1000));for(leti=1;i<=2;i++){//注意这里需要改变i的最大值，看有多少有时您需要下载所有数据。constres=awaitfetch("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",});constdata=awaitres.json();结果.push(...data.data);等待睡眠（）；//不能给掘金太大的压力，我们每秒只请求一次}现在，结果就是我们表中的所有数据！解决第二个问题：一次渲染到前端页面有多种方式。这里我们使用一个简单的方法，参考上篇文章《嘘！我改了掘金源代码！1行代码，让表格支持page_size切换，从每页10条变为20条！》的原理。对于list_by_user接口，我们返回一个特殊的对象，其中包含json方法，因为掘金JS在调用fetch后会调用json，从而将响应体中的字符串转为json。只要我们在json方法中返回预期的数据，那么掘金的JS就会帮我们渲染数据！_f=获取；fetch=(u,i)=>你。包括（'list_by_user'）？{json:async()=>({count:result.length,data:result,err_msg:"success",err_no:0,}),}:_f(u,i);使用方法和上一篇一样，先点击“整体分析”，再点击“单篇分析”，可以看到一个页面加载了所有文章数据！适用范围在前后端分离的架构中，后端提供分页API，前端只负责展示API返回的数据。本文仅以掘金为例，其他网站类似。希望大家能举一反三，以后遇到类似情况就不会手足无措了。提醒毕竟我之前也是字节跳动的前端开发者。出于责任心，提醒大家：不要向掘金发送恶意请求，不要压测，不要利用掘金漏洞做坏事，否则你的账号可能会被泄露。禁止。最后，我是公众号线下派对游戏的作者HullQin（欢迎关注公众号，发送加微信，交友），转载本文需作者HullQin授权。我独立开发了《联机桌游合集》，这是一个网页，在这里你可以轻松地和朋友一起玩网络游戏，五子棋等游戏，不收费，也没有广告。还为GameJam2022开发了《Dice Crush》，喜欢的话可以关注我HullQin哦~有空我会分享制作游戏的相关技术。
