企业官网建设流程全解析

把网站提交给百度,西安网站设计锦,cms那个做网站最好,wordpress ftp插件本文通过一个完整示例#xff0c;演示如何使用 Puppeteer 自动访问后台系统、设置 Cookie、切换分页大小#xff0c;并循环点击「下一页」抓取所有表格 HTML 数据。一、应用场景说明 在实际项目中#xff0c;我们经常遇到以下需求#xff1a; 后台系统需要登录才能访问数据…本文通过一个完整示例演示如何使用Puppeteer自动访问后台系统、设置 Cookie、切换分页大小并循环点击「下一页」抓取所有表格 HTML 数据。一、应用场景说明在实际项目中我们经常遇到以下需求后台系统需要登录才能访问数据列表有分页需要自动翻页希望批量抓取每一页的表格数据页面基于 Element UIel-pager、btn-next本文将一步步实现✅ 打开后台页面✅ 使用 Cookie 模拟登录✅ 切换为50 条/页✅ 自动计算总页数✅ 循环点击「下一页」✅ 抓取所有表格 HTML二、环境准备1. 安装 Puppeteernpminstallpuppeteer2. Node.js 版本建议使用Node.js ≥ 14Puppeteer ≥ 19三、完整示例代码下面是完整可运行的示例代码constpuppeteerrequire(puppeteer);constfsrequire(fs);// 封装一个延时方法functionwaitForTimeout(time){returnnewPromise(resolvesetTimeout(resolve,time));}(async(){constbrowserawaitpuppeteer.launch({headless:false// 关闭无头模式方便调试});try{constpageawaitbrowser.newPage();awaitpage.setViewport({width:1920,height:800});// 1. 进入后台登录页面awaitpage.goto(http://localhost:8093/admin);// 2. 设置登录 Cookie模拟已登录constcookies[{name:Admin-Token,value:你的 token,domain:localhost,path:/}];// 如果需要启用 Cookie取消注释// await page.setCookie(...cookies);// 3. 跳转到数据列表页awaitpage.goto(http://localhost:8093/category);// 4. 切换分页大小为 50 条/页constpageSizeXPath//span[text()50条/页];awaitpage.waitForXPath(pageSizeXPath);const[pageSizeBtn]awaitpage.$x(pageSizeXPath);if(pageSizeBtn){awaitpageSizeBtn.evaluate(elel.click());console.log(已切换为 50 条/页);}// 5. 获取总页数awaitpage.waitForSelector(ul.el-pager);constliElementsawaitpage.$$(ul.el-pager li);constlastLiliElements[liElements.length-1];lettotalPages1;if(lastLi){totalPagesparseInt(awaitpage.evaluate(lili.textContent,lastLi));console.log(总页数:,totalPages);}// 6. 循环点击下一页并抓取表格consttableSelectortable;constnextBtnSelectorbutton.btn-next;awaitpage.waitForSelector(nextBtnSelector,{visible:true});letcurrentPage1;letallTableHTML;while(currentPagetotalPages){console.log(正在抓取第${currentPage}页);// 抓取当前页表格consttablesawaitpage.$$(tableSelector);for(consttableoftables){consthtmlawaittable.evaluate(elel.outerHTML);allTableHTMLhtml\n\n;}// 点击下一页constnextBtnawaitpage.$(nextBtnSelector);if(!nextBtn)break;awaitnextBtn.click();awaitwaitForTimeout(3000);currentPage;}console.log(分页抓取完成);// 7. 可选保存为 HTML 文件fs.writeFileSync(tables.html,allTableHTML,utf-8);console.log(表格 HTML 已保存到 tables.html);// await browser.close();}catch(e){console.error(发生错误,e);}})();四、关键代码讲解1️⃣ 模拟登录Cookieawaitpage.setCookie({name:Admin-Token,value:xxx,domain:localhost,path:/});适用于后台 token 登录无需输入账号密码常见于 Vue / Element UI 项目2️⃣ XPath 精准点击「50条/页」constxpath//span[text()50条/页];const[el]awaitpage.$x(xpath);awaitel.evaluate(ee.click());优点不依赖 class文本唯一即可定位3️⃣ 获取 Element UI 总页数ul.el-pager li:last-childElement UI 的分页结构非常规整最后一个li就是最大页数。4️⃣ 自动翻页核心逻辑while(currentPagetotalPages){awaitnextBtn.click();awaitwaitForTimeout(3000);}建议使用显式等待避免点击过快导致请求丢失