今天你 AI 赋能了吗?打开浏览器,在地址栏输入 xuefulu.ai,按下 Enter 即可访问学府路1号!
2026年10月17日 星期六 12:32:20
常用网址:案例设计 | 案例导航 | 学府路1号 https://xuefulu.ai | 下载 WorkBuddy https://xuefulu.ai/WorkBuddy.html

一、案例背景与采集目标

前面二十多个案例,我们采的大多是「一打开网页就能看到全部内容」的静态页。可真实世界里的页面越来越不爱这么干了:内容要等你往下滚才出现,要等你点一下「加载更多」才补上,甚至要你登录之后才给你看。这类页面叫动态网页。

这一篇的示范对象是携程旅游攻略,网址 https://you.ctrip.com/sight/guangzhou152.html ,它是一个公开、无需登录、滚动到底部会继续加载的图文列表页,非常适合课堂复现。另一个目标对象是小红书探索页,https://www.xiaohongshu.com/explore ,它是典型的强登录墙动态页,我们只讲它的原理与合规边界,不绕过登录。这一篇是全课的技术难点,但请放心——你依然不写代码,要学的是怎么判断页面是不是动态的、怎么让 WorkBuddy 驱动浏览器去操作页面再取内容、怎么处理等待、重试、条数上限与失败留证。

1.1 这个案例要拿到什么

1.2 为什么动态页面这么难

原因用一句话就能说清:你右键查看的「网页源代码」里,根本没有你要的内容。携程攻略页、小红书探索页都是这样——你在屏幕上明明看到了标题和图片,按 Ctrl/Cmd + F 去搜源代码却搜不到,因为它们是浏览器运行 JavaScript 之后才填进去的。

页面类型你看到的源代码里有的对策
滚动加载(携程攻略)越往下滚越多只有首屏几条驱动浏览器反复滚动,直到不再新增
点击加载更多点一下多一页只有第一页让浏览器自动点击按钮,直到按钮消失
需要登录(小红书探索)登录后才显示登录框本课不越界;只做公开页,登录内容另行授权
纯前端渲染内容正常显示一堆脚本,没有数据等页面渲染完成后再取文本
判断动态页最简单的一招,请先记住:在页面上右键,选「查看页面源代码」(不是「检查」),然后按 Ctrl/Cmd + F 搜一个你明明看到了的标题词。搜不到,就是动态页。因为源代码里没有它,说明内容是浏览器后来运行脚本才填进去的。
小提醒|看得懂现象,才有办法解决。同样是「采不到数据」,有人只会说「这个网站有问题」,有人却能一眼判断「这是前端渲染,得让浏览器先跑起来」。差别不在工具,在于你懂不懂背后的原理。判断页面类型这件事,练的就是「透过现象看本质」的功夫。

目标站点与交付产物

下表是本篇用到的真实站点。绿色是课堂可稳定复现的示范站点;橙色是延伸站点,多数有登录墙或风控,课堂上只讲结构、原理与合规边界,不教绕过。

项目内容
示范站点携程 · 旅游攻略
https://you.ctrip.com/sight/guangzhou152.html
全课技术难点:内容由 JavaScript 渲染、滚动到底部继续加载;公开、无需登录,课堂可复现
延伸站点
  • 小红书 · 探索页 https://www.xiaohongshu.com/explore(强登录墙,只讲原理与合规边界,不绕过登录、不做演示)
  • 哔哩哔哩(B 站)· 热门视频列表 https://www.bilibili.com/v/popular/all(滚动加载 + 接口化,大学生最常用)
  • 抖音 · 精选页 https://www.douyin.com/jingxuan(无限滚动 + 强风控)
  • 高德地图 · POI 搜索页(广州塔) https://www.amap.com/search?query=广州塔(地图瓦片 + 动态加载)
交付产物
  • 数据明细.xlsx(含滚动轮次与失败截图文件名)
  • 数据明细.html(内容卡片式浏览)
  • 数据看板.html(互动量分布 + 话题标签排行)
  • 技能压缩包(无头浏览器采集模板:滚动/点击/等待/重试/截图留证)
难度★★★ 高
合规提示小红书、抖音等平台有明确的反自动化条款与登录墙,教学只讲原理与「如何判断页面是动态的」,不提供任何绕过登录或验证码的方法;演示请使用允许采集的页面或自建测试页。

二、数据源与字段设计

示范站点选携程旅游攻略,https://you.ctrip.com/sight/guangzhou152.html ,公开、无需登录、滚动加载;目标站点选小红书探索页,https://www.xiaohongshu.com/explore ,强登录墙,只讲原理与合规边界。这类页面在资讯聚合、攻略、公开榜单站里很常见。

2.1 目标站点信息

站点全称网址页面形态与接口规模与角色
携程 · 旅游攻略https://you.ctrip.com/sight/guangzhou152.html图文瀑布流列表,滚动到底部继续加载;无需登录,内容由 JavaScript 渲染示范站点:公开可复现的滚动加载示范页
小红书 · 探索页https://www.xiaohongshu.com/explore瀑布流卡片,滚动加载 + 强登录墙;源码里搜不到内容标题对照站点:强登录墙,只讲原理与边界,不绕过登录、不做演示
抖音https://www.douyin.com/无限滚动 + 强风控对照站点:仅作合规讨论
B 站 · 全站排行https://www.bilibili.com/v/popular/rank/all榜单页,滚动加载 + 有公开接口对照站点:可作「动态页 vs 公开接口」的对比

2.2 完整字段表(12 个字段)

字段名字段含义示例值口径与备注
序号条目顺序1采集时自动生成
内容标题条目标题广州三天两夜亲子游路线全攻略取渲染后的可见文本
正文摘要条目描述(截断)第一天:长隆野生动物世界,建议早上八点入园……只取前 80 字,没有就留空
作者昵称发布者昵称爱旅行的豆妈仅取公开昵称,不做身份关联
点赞数点赞数量12800「1.2 万」要换算成整数
收藏数收藏数量6420「6420」保留整数
评论数评论数量318纯数字,没有就留空
发布时间发布或更新时间2026-07-18相对时间(「3 天前」)要换算或注明
话题标签内容标签亲子游;广州多个用分号分隔
详情链接条目详情地址https://you.ctrip.com/travels/guangzhou/10000000.html完整可点开;此处为示意地址,真实 id 随条目不同,采集时按实际网址照录
加载批次第几次滚动/点击后出现第 3 批用于判断有没有采全
失败截图留证截图文件名shot_01.png失败时用于排查

2.3 三条操作口径要点

  1. 先设定「停下来」的条件。滚动加载页面理论上可以无限往下,必须提前说清楚:采到 50 条就停,或者连续滚动 3 次都没有新条目就停。没有终止条件,任务可能永远结束不了。
  2. 等待要「显式」。页面渲染需要时间。要明确告诉助手:每滚动一次,等 1 到 2 秒,等内容稳定后再抓取。很多「采到一半是空的」问题,根子都在没等够。
  3. 失败要留证。当某次操作没拿到内容时,让助手把当前页面截图保存下来。有了截图,你能一眼看清是页面变了、还是被限速了、还是根本没滚动到底。
能不用动态方案就不用。如果页面有一个公开的数据接口、或者提供 RSS 订阅,优先用那些方式,又快又稳,比如 B 站排行就有公开接口。动态驱动浏览器是「没有更好办法时」的手段,不是首选。

AI 助手小贴士|滚动加载最怕「以为采完了」。让助手在停止时报告「最后一次滚动新增了几条」,如果新增是 0 且已经滚过 3 次,才能确认真的到底了。

打开 WorkBuddy 或任意 AI 对话工具,试试这样问:请告诉我最后一次滚动新增了多少条;如果连续三次滚动新增都是 0,再停止并给我完整结果。

课程思政|工匠精神与严谨求实 · 会停下来,才是真会采

无限滚动的页面在技术上可以一直滚下去。真正专业的做法是先约定终止条件:多少条、几次无新增、什么时间上限。写程序如此,做研究也如此——知道什么时候收集够了、什么时候该收手,比一味追求「尽可能多」更需要判断力。

三、零代码操作步骤

工具与技能|先看清三个角色,再动手

本篇全程零代码:你把要求说清楚,AI 去执行,你负责验收。三个角色分工如下——浏览器技能指的是腾讯开源的 BrowserSkill,它能让 AI 直接操作你电脑上真实的浏览器(可复用已经登录的状态),自己开一个独立窗口干活,不打扰你正在看的网页;遇到验证码、登录或确认弹窗,它会停下来交给你本人处理。

角色负责什么在本案例里具体做什么
你确认字段清单、验收结果、清洗与合规把关盯字段清单、核对结果、处理异常(如验证码)
WorkBuddy接中文指令:探字段 → 批量采 → 清洗 → 导出交付物拆解本篇的采集任务并跑完全量、产出交付物
浏览器技能
BrowserSkill
以真实浏览器打开页面:跑脚本渲染、滚动 / 翻页 / 点开详情、截图留证;可复用本机浏览器已登录状态,遇到验证码或登录弹窗会停下来交给你处理先判断页面是不是动态的,再驱动浏览器滚动 / 点击把内容取全

五步操作主线(全课程统一,每一篇都按这个顺序推进):

  1. 定目标与字段:先看本篇第二节的字段表,把「要哪几列、每列什么口径、要多少条」说清楚——字段清单就是验收标准,说不清就会拿回一张字段乱七八糟的表。
  2. 现场踩点(浏览器技能 BrowserSkill):打开 https://you.ctrip.com/sight/guangzhou152.html,记住一个你看到的标题词 → 右键「查看页面源代码」→ 搜这个词:搜不到就是动态页,需要驱动浏览器。
  3. 小样试采(WorkBuddy):让它用浏览器技能滚动一次,看新增了多少条,确认判断对不对。
  4. 核对与清洗:① 有没有「滚到不再新增就停」;② 失败重试与截图留证做了没有;③ 条数上限设了没有(别无限滚下去)。
  5. 导出与归档:导出交付物(数据明细表 / 可筛选明细页 / 数据看板 / 可复用的技能包),文件名带上采集日期,并写清数据来源、采集时间与已知局限。
起手一句话(可直接复制):用浏览器技能 BrowserSkill 打开 https://you.ctrip.com/sight/guangzhou152.html(携程 · 旅游攻略),把这一页每条记录能采到的字段名和示例值列出来,先不要采集。

本案例的操作分两段:先判断页面类型,再让 WorkBuddy 驱动浏览器。请按顺序来。

3.1 第一步:判断页面是不是动态的

  1. 在浏览器里打开携程旅游攻略 https://you.ctrip.com/sight/guangzhou152.html,随便记住一个你看到的标题词。
  2. 右键 → 查看页面源代码(注意不是「检查元素」)。
  3. 在源代码页面按 Ctrl/Cmd + F,搜索刚才记住的那个词。
  4. 搜不到:这是动态页面,内容由脚本渲染,需要驱动浏览器。
  5. 搜得到:这是静态页面,直接按前面案例的方式采,不需要本案例的复杂操作。

3.2 第二步:驱动浏览器采全内容

  1. 把判断结果告诉 WorkBuddy:「这个页面是滚动加载的动态页,代码里没有内容,请用浏览器打开它,滚动到底部加载更多,再采集」。
  2. 约定滚动规则:「每次滚动后等 2 秒;连续 3 次没有新增条目就停止;最多采 50 条」。
  3. 先小步验证:让它先滚动 3 次,把已加载的条目报给你,看内容是不是你要的。
  4. 确认真到底:看它报告的最末一次新增条数;若停止时新增不为 0,说明还没到底,让它继续。
  5. 要求失败留证:「如果某一步没采到内容,请截一张当前页面的图保存下来,并告诉我卡在哪一步」。
  6. 导出结果:导出为 dynamic_20261008.xlsx,把加载批次列保留,方便你判断覆盖范围。
如果你的电脑上装了能操作浏览器的助手,也可以让它先把页面代码整段存下来,再在本地解析。两种思路都行:一种是「边滚边取」,一种是「先存页面再解析」。
「点击加载更多」和「滚动加载」提示词不一样。点击型要写「找到加载更多按钮并反复点击,直到按钮消失或变为禁用」。可以直接这样问:这个页面是点击「加载更多」按钮才出内容。请反复点击该按钮,直到按钮消失或不可点击,再把全部条目给我。

四、提示词模板与追问技巧

动态页面的提示词,关键是把页面类型、触发动作、等待时长、终止条件、失败留证五件事写全。下面针对携程旅游攻略这种「滚动到底部加载更多」的页面给出一份完整模板。

提示词
请帮我完成一个动态网页的采集任务。

【目标站点】携程 · 旅游攻略,网址 https://you.ctrip.com/
【页面类型】内容是滚动到底部后才加载的(我已经右键看过源代码,里面搜不到标题)
【采集方式】请用浏览器打开这个页面,反复滚动到底部,触发加载更多,再采集内容

【需要字段】
  1. 序号(从 1 开始)
  2. 内容标题
  3. 正文摘要(只取前 80 字,没有就留空)
  4. 作者昵称
  5. 点赞数(「1.2 万」这类要换算成整数)
  6. 收藏数
  7. 评论数
  8. 发布时间
  9. 话题标签(多个用分号分隔)
  10. 详情链接(完整网址)
  11. 加载批次(这是第几次滚动后出现的)

【滚动与等待规则】
  1. 每次滚动到页面底部后,请等待 2 秒,等新内容渲染出来
  2. 连续 3 次滚动都没有新增条目时停止
  3. 最多采集 50 条,达到就停止

【失败处理】
  1. 如果某一步没采到内容,请保存一张当前页面截图(命名为 shot_01.png 递增)
  2. 并告诉我卡在第几次滚动、当前页面显示什么

【输出】
  1. 先在对话里给我表格预览和「共滚动几次、最后一批新增几条」
  2. 我确认后导出为 dynamic_20261008.xlsx

4.1 三条常用追问指令

追问指令
追问一(还没到底):
你停止时最后一批还新增了 4 条,说明还没到底。
请继续滚动 5 次,直到连续三次新增为 0 再停下。

追问二(改成点击型):
这个页面不是滚动加载,而是要点击「加载更多」按钮。
请改为反复点击该按钮,直到按钮消失或变灰,
再把全部条目给我,并报告一共点了几次。

追问三(结果不全):
第 20 条之后的标题都是空的,请检查是不是等的时间不够。
请把等待时间加到 3 秒重试一次,并把这次和上次的条数对比给我。

4.2 怎么验收一份动态页面的采集结果

动态页面没有「一眼能数清」的总数,所以验收要靠三条间接证据。

验收项怎么看为什么能信
最后一批新增为 0停止时助手报告的「最后一批新增条数」是 0说明滚下去已经没有新内容了
连续无新增达 3 次报告显示连续三次滚动都没有新条目单次为 0 可能只是网络慢,连续三次才稳
条数达到上限或到底条数等于 50,或报告显示已到底两种终止条件至少满足一种,任务才完整
截图无异常失败截图里页面正常、没有验证码说明不是被限速或拦截导致的漏采
如果验收时发现有缺口(比如某个批次少了十几条),最省事的办法不是重采全量,而是让助手只补那一批,再和原结果按链接合并去重。

AI 助手小贴士|动态页面的采集时间明显更长,容易被误以为「卡住了」。让助手每一步都回报进度,你就不必干等。

打开 WorkBuddy 或任意 AI 对话工具,试试这样问:请每滚动 5 次就向我报告一次当前已采集的条数,不要等到全部结束才说话。

五、结果核对、清洗与保存

下面是 WorkBuddy 从携程旅游攻略页返回的结果样例(节选,数据为示例):

序号内容标题作者昵称点赞数收藏数发布时间加载批次
1广州三天两夜亲子游路线全攻略爱旅行的豆妈1280064202026-07-18第 1 批
2长隆野生动物世界一日游避坑指南南国小陈865039102026-06-30第 1 批
3广州老城区美食地图(附人均消费)吃货阿May1530091202026-05-12第 2 批
4珠江夜游最佳观赏点整理羊城摄影师498017602026-04-25第 3 批

5.1 四步核对与清洗

清洗指令
① 批次体检:
   请按「加载批次」分组统计条数,
   如果中间某一批突然变少,单独标出来让我检查。

② 去重:
   请按「详情链接」去重,重复的只保留第一次出现的条目。

③ 数字列规范化:
   请把「点赞数」「收藏数」「评论数」里的「万」换算成整数,
   例如「1.2 万」换算成 12000,只保留数字。

④ 补采集信息:
   请新增两列:「来源页面」和「采集时间」(精确到分钟),
   因为动态页面的内容随时会变,时间戳格外重要。

5.2 保存与归档

动态页面的采集结果,最好连同截图与日志一起归档。因为页面内容会变,日后别人质疑「你当时采的时候是这样的吗」,你有证据。

文件命名
dynamic_20261008.xlsx        ← 结果主表
dynamic_20261008_log.txt     ← 日志:滚动次数、每批条数、终止原因、耗时
dynamic_20261008_shots/      ← 过程截图
    shot_01.png、shot_02.png …

AI 助手小贴士|把「每批条数」存进日志,是排查动态页面缺口的钥匙。某批突然为 0,通常意味着页面卡住了,需要重试那一段。

打开 WorkBuddy 或任意 AI 对话工具,试试这样问:请把每一批滚动的条数写进日志文件,格式是「第 N 批:X 条」,并在末尾写清终止原因。

课程思政|工匠精神与严谨求实 · 留痕,是对结果负责

动态页面最麻烦的地方在于它「随时会变」,你今天采的结果,明天可能就对不上。所以专业的做法是:把截图、日志、时间戳一起留下。这不是多此一举,而是让你日后能说清楚「我的数据是怎么来的」。会给结果留痕的人,做的数据才经得起追问。

六、常见问题与合规红线

6.1 六个高频问题

现象原因怎么处理
采到的内容只有首屏几条页面是滚动加载,没触发后续渲染让助手滚动到底部,并约定连续无新增才停
源代码里搜不到标题内容由 JavaScript 渲染,静态 HTML 里没有改由浏览器驱动采集,等渲染完成再取
一边采一边漏,条数对不上没等页面渲染完就抓每步显式等待 1~3 秒,等稳定后再取
点「加载更多」后按钮消失,采不到按钮文案或位置变了让助手按「直到按钮消失/禁用」作为终止条件
要登录才显示全部内容(如小红书探索页)登录墙本课不越界;换公开页面,或说明已获授权
被提示访问过于频繁滚动与点击节奏过快立即放慢或停止,加大等待时间,不要硬闯

6.2 三条合规红线

  1. 不绕过登录与验证。需要登录、需要验证码才能看的内容,本课一律不采;不要在提示词里要求助手「模拟登录」「破解验证码」。小红书探索页就是典型例子,只讲原理,不去绕登录。
  2. 控制操作节奏。滚动与点击都要留出等待,既是为了采全,也是为了不给对方服务器造成压力。
  3. 动态内容同样有边界。视频、音乐、付费专栏这类需要授权的内容,即使技术上能取到,也不在本课的采集范围内。
动态页面不是「反爬」的同义词,也不该被当成挑战对象。遇到明确的反爬措施或登录墙(比如小红书探索页),正确做法是停止并换数据源。本课的目标始终是「合规地拿到能用的数据」,而不是「想办法攻破某个网站」。

课程思政|数据安全与法治素养 · 能力强了,边界更要清楚

会驱动浏览器之后,你能采的页面一下子多了很多,这也意味着越界的诱惑变大了。请始终记住:能采到不等于该采。登录内容不碰、验证码不绕、付费内容不取——这三条守住了,你手里的技术才是生产力,而不是风险。

七、随堂自测(10 题)

点击选项即可判分,答错的题会立刻显示解析。

已答 0 / 10 · 正确 0 —

1判断一个页面是不是动态页面,最直接的办法是?

  • A. 右键查看页面源代码,搜索一个你看到的标题词,搜不到就是动态页
  • B. 看页面配色
  • C. 看网址长度
  • D. 刷新几次页面
答案:A。源代码里没有内容,说明它由脚本渲染,是典型的动态页面;这是最快也最可靠的判断方法。

2采一个无限滚动的页面时,下面哪一条是必须提前约定的?

  • A. 页面的字体大小
  • B. 滚动用鼠标还是键盘
  • C. 服务器的品牌
  • D. 终止条件(条数上限或连续无新增次数)
答案:D。无限滚动页没有天然的终点,不约定终止条件任务可能永远结束不了。

3动态采集时「每步等待 1~3 秒」的主要作用是?

  • A. 等页面把新内容渲染完成,避免抓到空值
  • B. 让助手休息
  • C. 避免被对方发现
  • D. 节省时间
答案:A。渲染需要时间,等够再抓才能采到完整内容;这与「躲避检测」无关。

4采到一半发现某批条目为空,最合理的处理是?

  • A. 忽略这批继续
  • B. 把整个结果删掉重采
  • C. 只补采这一批,再与原结果按链接合并去重
  • D. 手动补上几条
答案:C。定点补采再合并去重,既省时间又不丢数据,比全量重采高效得多。

5要求助手在采集失败时保存页面截图,最主要的目的是?

  • A. 让结果更美观
  • B. 留证,方便判断是页面变了还是被限速
  • C. 增加文件数量
  • D. 给老师看你有截图
答案:B。截图是排查动态页面问题的第一手证据,能立刻区分页面结构变化与访问受限。

6小红书探索页提示「登录后查看全部」,本课的正确做法是?

  • A. 让助手模拟登录
  • B. 想别的办法绕过登录
  • C. 换公开页面(如携程旅游攻略),或确认已获授权后再采
  • D. 反复刷新直到出现内容
答案:C。登录内容不在本课采集范围内;要么换公开数据源,要么在明确授权下另行处理。

7「滚动加载」与「点击加载更多」两种页面,提示词上最大的区别是?

  • A. 没有任何区别
  • B. 点击型要写明「反复点击按钮,直到按钮消失或禁用」
  • C. 点击型不需要等待
  • D. 滚动型不需要终止条件
答案:B。触发动作不同,提示词必须写清对应操作与终止条件,否则助手不知道该做什么。

8验收一份动态页面采集结果时,下面哪个证据最不能说明「采全了」?

  • A. 最后一批新增条数为 0
  • B. 连续三次滚动无新增
  • C. 条数达到了约定的上限
  • D. 助手说「应该差不多了」
答案:D。「应该差不多」是主观判断,不能作为证据;前面三项才是可核对的事实。

9某动态页面同时提供公开的数据接口和滚动列表,应该优先用哪个?

  • A. 滚动列表,因为看得见
  • B. 都行,随便选
  • C. 优先用公开接口,更快更稳也更省资源
  • D. 两个都采一遍对比
答案:C。有公开接口时优先走接口,速度与稳定性都更好,对对方服务器也更友好。

10动态等内容较多时,让助手「每滚动若干次回报一次进度」的好处是?

  • A. 好看
  • B. 你能及时判断是否卡住或偏题,不必干等
  • C. 可以减少采集条数
  • D. 能让页面加载更快
答案:B。动态采集耗时长,分步回报进度能让你实时掌握状态,及时纠偏,避免最后才发现白采。