12.3 Web开发——静态与动态示例对比¶
内容梗概¶
本课通过两个可运行的实例直观对比静态站点与动态站点。静态示例用 Python 自带的 http.server 模块在本地 8000 端口起一个静态 Web 服务器，展示一个多页学生名单网站（每翻一页就请求一个不同的 HTML 文件）；动态示例用 Flask 在 5000 端口运行，前端用 Ajax 实现"下拉自动加载更多学生"，后端把 URL 路径映射到 Python 函数，读取 students.txt 并返回 JSON 字符串。老师还顺带讲解了本地调试时常见的坑：防火墙、杀毒软件、代理、运行目录不对导致的 404。
知识点详解¶
静态示例：python -m http.server（约 00:00–11:50）¶
- 启动本地静态 Web 服务器的命令（先
cd到static_website目录下）：-m表示以模块方式运行，http.server是 Python 自带的模块，无需安装。默认在本机 **8000 端口**开启服务，根目录就是运行命令时所在的目录。 - 启动后提示的
0.0.0.0表示"所有 IP 都可以访问"，不是真的要访问这个地址；本机访问自己应使用127.0.0.1:8000，localhost这个域名默认绑定在127.0.0.1上，两者等价。 - 访问根目录时，
http.server默认去找目录下的index.html；浏览器随后根据 HTML 中的链接继续请求style.css、scripts.js（示例中是空文件）。 - favicon.ico（favorite icon）：所有浏览器都会默认去请求这个网站图标文件（早年大家把常用网站放收藏夹，每个网站有个小图标）；示例没提供该文件，所以后台报 404（file not found）。
- 静态站点的翻页：做了 page2/page3/page4 等多个 HTML 文件，标题等部分完全相同、只是列表内容不同；翻页时地址栏里的 HTML 文件名随之改变——URL 路径与磁盘文件一一对应，这就是静态站点的本质。
常见问题排查（约 04:58–07:30）¶
- 访问被拒绝或 404 时检查：
- 防火墙：Windows 自带防火墙可能拦截 8000 端口，即使自己访问自己也可能失败；
- 杀毒软件：对计算机专业实验很不友好，很多实验会因杀毒软件失败；
- 运行目录不对：必须先
cd进static_website再运行命令，否则根目录下没有index.html会 404； - 奇怪的代理：开着代理请关掉。
- 端口可以通过参数修改，但如果没有别的程序占用 8000，就别改。
动态示例：Flask + Ajax（约 11:50–21:10）¶
- 切换到
dynamic目录，安装 Flask 后运行python app.py（老师口误说成pip install即可安装），服务跑在 5000 端口。 - 页面效果：先显示一部分学生名单，用 JavaScript 实现"下拉滚动条自动加载更多"，直到提示"没有更多数据"，所有学生显示在**同一张页面**上——过程中没有访问任何新的 HTML 页面。
- F12 观察网络请求：先访问
127.0.0.1加载 HTML/CSS/JS，之后 JavaScript 检测下拉条位置，自动发起形如data?page=1、data?page=2的请求——访问了data这个路径并带了一个page参数。 - 后端逻辑（Flask/WSGI 模式）：
- 把路径（如
/data）和某个函数**对应起来**（这就是前面讲的 WSGI 部分做的事）； - 函数内获取 HTTP 请求中的
page参数； - 读取
students.txt文本文件，取出前 20 个（按页取），组合成一个 **JSON 字符串**返回； - 前端 JavaScript 把 JSON 里的内容写到页面上。
- 这个动态体现在两个层面：
- 前端动态：Ajax 机制，不刷新页面、不请求新 HTML，由 JavaScript 在特定行为（滚动）后发新请求；
- 后端动态：Flask 框架 + WSGI 模式，路径对应函数，访问时自动调用函数、读文件、返回内容。
- 升华：这个函数里可以放**任何 Python 能实现的功能**——自动生成 HTML、图像处理（把用户上传的图片转成黑白色再返回）等等。这就是现代 Web 框架动态后端的处理逻辑。
示例与演示¶
- 示例一（静态）：
static_website目录下的学生名单网站，python -m http.server起服务，演示首页加载、CSS/JS 跟随请求、favicon 404、page1–page4 翻页时 URL 变化。 - 示例二（动态）：
dynamic目录下的 Flask 应用，演示下拉自动加载（无限滚动），F12 中观察data?page=N请求逐步出现，理解前端 Ajax + 后端函数路由的协作。
重点与难点¶
- 静态 vs 动态的核心判别：URL 路径是否直接对应磁盘上的文件。静态站点翻页 = 换了一个 HTML 文件；动态站点路径对应的是**函数**，返回内容按需生成。
python -m http.server是零成本搭建本地静态服务器的利器，但运行目录决定网站根目录，目录错了就 404。- 本地实验失败先怀疑防火墙、杀毒软件、代理这三样。
- 动态示例里"一张页面显示全部数据"是 Ajax 的功劳，不是后端生成了超长 HTML。
关联内容¶
- 本课是 12.2 理论（静态网页、Ajax、WSGI、FastCGI）的实物验证：两个例子分别对应"静态网页模式"和"前端 Ajax + 后端 WSGI 框架"的现代模式。
- 为 12.4《Flask初次运行》起直接铺垫：老师说明"前面一个小时都是铺垫"，接下来正式讲 Flask。
pip install、端口、cd等命令行操作呼应第 10 章第三方库与虚拟环境的内容。