Python 爬虫入门实战：服务端渲染页面怎么取数（CH-001）

先搞清楚这一关在考什么#

前几关的坑通常藏在接口里，这一关反过来：页面是 Jinja2 服务端渲染的，电影数据直接写进了 HTML 源码。

所以拿到数据的方式只有一个：把页面请求下来，读源码。

但答案不是「抓到了哪些电影」，而是第一页源码有多少个字符。也就是说：

1. 请求 GET /playground/movies/static（不加参数就是第 1 页）；
2. 把响应体当成文本（不是字节）数长度；
3. 把数字提交到挑战广场。

现象：源码里全是数据#

浏览器打开靶场页 /playground/movies/static，页面上是电影卡片。右键「查看网页源代码」，能看到 <li> 里直接写着电影名、评分、评价人数：

1
<li class="movie-item">
2
  <h3 class="movie-title">肖申克的救赎</h3>
3
  <span class="movie-rating">9.7</span>
4
  <span class="movie-rating-count">3235402人评价</span>
5
</li>

Network 面板里只有一个 document 请求，没有 XHR。这就说明数据在 HTML 里，而不是接口里。

三个最容易数错的地方#

还有一个隐蔽的坑：编码。如果 response.encoding 猜错了（比如把 UTF-8 当 ISO-8859-1），response.text 会变成乱码，字符数也就跟着错。

服务端已经声明了 Content-Type: text/html; charset=utf-8，正常情况下 requests 会照用。求稳可以显式指定：

1
response.encoding = "utf-8"

完整脚本#

1
"""CH-001：答案 = 第一页 HTML 源码的字符数"""
2
import sys
3

4
import requests
5

6
BASE = "https://spider.jsnote.top"
7
PAGE_URL = f"{BASE}/playground/movies/static"
8

9
headers = {
10
    "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
11
    "Accept-Language": "zh-CN,zh;q=0.9",
12
    "User-Agent": (
13
        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 "
14
        "(KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36"
15
    ),
16
}
17

18
response = requests.get(PAGE_URL, headers=headers, timeout=10)
19
response.raise_for_status()
20
response.encoding = "utf-8"          # 显式指定，避免猜错编码导致字符数不对
21

22
html = response.text
23
print("状态码：", response.status_code)
24
print("Content-Type：", response.headers.get("Content-Type"))
25
print("源码字符数：", len(html))
26
print("源码字节数（对比用）：", len(response.content))
27
print("页面里有没有电影名：", "movie-title" in html)
28

29
if len(sys.argv) > 1:
30
    # 顺手核对一下第一页有多少部电影
31
    print("电影卡片数：", html.count('class="movie-item"'))

跑完把 源码字符数 提交到挑战广场的 CH-001 答题框即可。参考实现见 参考代码/s1.py。

顺手确认一下「第 2 页也这样」#

1
page2 = requests.get(PAGE_URL, params={"page": 2}, headers=headers, timeout=10)
2
print(len(page2.text))   # 和第一页长度不同，说明确实在分页

这一关只需要第一页；但确认「改了参数内容会变」是好习惯 —— 能避免你把一个静态的缓存页当成接口。

排查清单#

1. 源码里搜页面上确定存在的字（电影名），搜得到 → 数据在 HTML 里。
2. 数长度前先确认 response.encoding，别让乱码影响字符数。
3. 用 .text（字符）还是 .content（字节）先想清楚，两者差 2~3 倍。
4. 不要 .strip()、不要 re.sub(r"\s+", "") —— 这一关答案要的就是原始长度。
5. 提交答案要在登录状态下做。
6. 如果数出来差一点点，先对比 len(html) 和 len(html.encode("utf-8"))，确认自己数的是字符。

常见问题#

最后提醒#

这关的数据是自己靶场的练习数据。真实站点里，服务端渲染页通常还带缓存与 CDN，抓之前先看 robots 与条款，控制频率。

去挑战广场提交答案，然后进 CH-002：数据会从源码里消失，只剩接口。