feat(web基础): 新增零基础Web开发课程

05_web基础/5_1_Web运行原理与客户端服务器/README.md

@@ -0,0 +1,162 @@
+# 第5-1课：Web运行原理与客户端服务器
+
+## 一、本课目标
+
+完成本课后，你能够：
+
+1. 解释万维网（World Wide Web，Web）是什么；
+2. 区分客户端（Client）、服务器（Server）、前端和后端；
+3. 描述浏览器访问后端时的请求响应过程；
+4. 理解后端程序为什么不能主动把普通响应随意发给浏览器；
+5. 运行一个不依赖网络的请求响应模拟程序。
+
+## 二、前置知识
+
+- Python函数、字典和条件判断；
+- 知道程序可以接收输入、处理数据并返回结果；
+- 不要求学过任何Python Web框架。
+
+## 三、Web是什么
+
+Web是建立在互联网之上的信息与应用系统。互联网提供计算机之间的连接，Web则约定如何定位资源、发送请求和返回页面或数据。浏览器、手机应用和接口调试工具都可以充当客户端。
+
+客户端主动发起请求，服务器监听请求、执行业务逻辑并返回响应：
+
+```text
+用户 → 客户端 → HTTP请求 → 服务器
+用户 ← 客户端 ← HTTP响应 ← 服务器
+```
+
+一次普通请求对应一次响应。服务器若要主动通知客户端，需要轮询、服务器发送事件或WebSocket等额外机制，这些将在后续课程学习。
+
+## 四、前端与后端
+
+- 前端：直接与用户交互的界面和浏览器端逻辑；
+- 后端：运行在服务器侧，负责业务规则、权限、数据库和接口；
+- 数据库：负责持久保存数据，通常不直接暴露给浏览器。
+
+浏览器是客户端的一种，客户端不只有浏览器。Java中的Controller、Service、Repository分层属于服务器内部结构，不等于客户端与服务器的边界。
+
+## 五、用生活场景理解通信双方
+
+可以把访问网站类比成到餐厅点餐：
+
+| Web概念 | 餐厅类比 | 实际职责 |
+|---|---|---|
+| 客户端 | 顾客 | 提出明确请求并接收结果 |
+| HTTP请求 | 点菜单 | 写明想获取什么或提交什么 |
+| 服务器 | 餐厅服务体系 | 接收请求并组织处理 |
+| 后端业务代码 | 后厨处理流程 | 校验规则、计算并访问数据 |
+| HTTP响应 | 送回的餐品和结果单 | 告诉客户端结果与内容 |
+
+类比只能帮助入门：真实HTTP请求不是口头交流，而是双方按照协议组织的数据。
+
+## 六、输入网址后发生了什么
+
+第一次学习时先掌握以下主干流程：
+
+1. 用户在浏览器输入网址并确认；
+2. 浏览器从网址中确定要联系的服务器和资源；
+3. 浏览器与服务器建立网络连接；
+4. 浏览器发送HTTP请求；
+5. 服务器读取请求；
+6. 后端根据路径执行对应逻辑，必要时查询数据库；
+7. 服务器生成HTTP响应；
+8. 浏览器读取响应；
+9. 如果响应是HTML，浏览器解析并显示页面；如果响应是JSON，通常交给前端代码处理。
+
+服务器地址解析、连接和HTTP报文将在第二课继续展开。本课先记住：页面不是浏览器凭空产生的，数据需要经过请求与响应往返。
+
+## 七、页面请求与接口请求
+
+服务器可能返回不同内容：
+
+- HTML：描述页面结构，浏览器可以渲染；
+- CSS：描述页面样式；
+- JavaScript：在浏览器中执行交互逻辑；
+- 图片或文件：由浏览器展示或下载；
+- JSON：结构化数据，常用于前后端接口。
+
+访问一个页面往往不只有一个请求。浏览器取得HTML后，可能继续请求CSS、JavaScript、图片和接口数据。因此开发者工具中看到很多请求是正常现象。
+
+## 八、完整示例
+
+`web_flow_example.py`用字典表示请求和响应，不建立真实网络连接，目的是先看清四个步骤：
+
+1. 浏览器创建请求；
+2. 服务器接收请求；
+3. 服务器根据路径处理；
+4. 浏览器根据响应展示内容。
+
+## 九、运行方法
+
+```powershell
+cd D:\Code\Python\05_web基础\5_1_Web运行原理与客户端服务器
+python web_flow_example.py
+```
+
+命令执行后，Python直接运行本课文件。示例不访问互联网，也不会启动真实服务器，所以任何时候都可以安全重复运行。
+
+## 十、预期结果
+
+```text
+客户端发送：GET /books
+响应状态：200
+内容类型：text/html; charset=utf-8
+浏览器展示：<h1>图书列表</h1>
+```
+
+## 十一、关键代码解析
+
+`browser_send_request()`模拟创建请求；`server_handle_request()`相当于最简单的路由和业务处理；`browser_render_response()`读取服务器返回的数据。这里的字典不是HTTP消息本身，只是帮助观察结构的Python表示。
+
+按执行顺序阅读：
+
+1. Python执行文件底部的入口判断并调用`main()`；
+2. `main()`把路径`/books`交给`browser_send_request()`；
+3. 函数返回一份包含方法、地址和请求头的模拟请求；
+4. `server_handle_request()`检查请求路径；
+5. 路径是`/books`，因此返回状态码200和HTML内容；
+6. `browser_render_response()`依次输出状态码、内容类型和正文。
+
+把`"/books"`临时改成`"/missing"`，可以观察404分支。实验完成后恢复标准示例。
+
+## 十二、常见错误
+
+### 12.1 把Web等同于互联网
+
+互联网是连接基础设施，Web是其上的一种应用体系。电子邮件也使用互联网，但不等于Web页面。
+
+### 12.2 把服务器理解成一台固定机器
+
+服务器既可指提供服务的程序，也可指运行该程序的计算机。学习后端时通常更关心服务器程序。
+
+### 12.3 认为后端直接操作页面
+
+后端返回HTML或JSON，浏览器中的前端代码决定如何展示。两者通过请求和响应协作。
+
+### 12.4 认为一次打开页面只有一个请求
+
+现代页面通常还需要样式、脚本、图片和接口数据，浏览器会继续发送多个请求。
+
+### 12.5 把“本机”与“服务器”对立起来
+
+服务器程序也可以运行在自己的电脑上。是否叫服务器取决于它是否向客户端提供服务，而不是电脑放在哪里。
+
+## 十三、课堂练习
+
+打开`practice.py`，完成两个练习。练习文件没有答案，请先独立实现。
+
+## 十四、本课小结
+
+Web应用最基本的闭环是“客户端发请求，服务器做处理，客户端收响应”。前端、后端和数据库是职责划分，客户端与服务器是通信双方。
+
+## 十五、验收标准
+
+- 能区分Web与互联网；
+- 能区分客户端、服务器、前端和后端；
+- 能按顺序解释一次请求响应；
+- 能说明一个页面为什么可能产生多个请求；
+- 能判断HTML与JSON通常由谁处理；
+- 示例能够独立运行且输出符合预期；
+- 完成`practice.py`中的练习。

05_web基础/5_1_Web运行原理与客户端服务器/practice.py

@@ -0,0 +1,39 @@
+# 第5-1课练习：Web运行原理与客户端服务器
+#
+# 本文件只提供题目、预期结果、自查清单和验收标准，不包含参考答案或代码骨架。
+
+
+# 练习一：补全一次请求响应流程
+# 1. 编写client_send_request(path)，返回包含method、path和headers的字典。
+# 2. 编写server_handle_request(request)，处理/和/about两个路径。
+# 3. 已知路径返回状态码200，未知路径返回状态码404。
+# 4. 编写client_show_response(response)，输出状态码和响应体。
+
+
+# 练习二：区分各部分职责
+# 1. 在注释中说明客户端、服务器、前端和后端分别是什么。
+# 2. 说明“浏览器”和“客户端”为什么不能始终画等号。
+# 3. 写出从用户输入URL到页面展示的至少五个步骤。
+
+
+# 预期关键输出：
+# 客户端发送：GET /about
+# 响应状态：200
+# 页面内容：关于我们
+# 客户端发送：GET /missing
+# 响应状态：404
+# 页面内容：页面不存在
+
+
+# 自查清单：
+# 1. 客户端是否负责创建请求并处理响应？
+# 2. 服务器是否根据路径决定返回内容？
+# 3. 是否理解请求和响应是方向相反的两份消息？
+# 4. 是否没有把HTML、HTTP和互联网混为同一个概念？
+
+
+# 最终验收标准：
+# 1. practice.py通过语法检查并可独立运行；
+# 2. 已知路径和未知路径的输出符合预期；
+# 3. 能用自己的话解释客户端与服务器的职责；
+# 4. 能完整描述一次请求响应过程。

05_web基础/5_1_Web运行原理与客户端服务器/web_flow_example.py

@@ -0,0 +1,48 @@
+"""第5-1课标准示例：模拟客户端、服务器和请求响应流程。"""
+
+
+def browser_send_request(url: str) -> dict:
+    """模拟浏览器根据URL创建HTTP请求。"""
+
+    return {
+        "method": "GET",
+        "url": url,
+        "headers": {"Accept": "text/html"},
+    }
+
+
+def server_handle_request(request: dict) -> dict:
+    """模拟服务器读取请求并返回HTTP响应。"""
+
+    if request["url"] == "/books":
+        return {
+            "status": 200,
+            "headers": {"Content-Type": "text/html; charset=utf-8"},
+            "body": "<h1>图书列表</h1>",
+        }
+    return {
+        "status": 404,
+        "headers": {"Content-Type": "text/plain; charset=utf-8"},
+        "body": "页面不存在",
+    }
+
+
+def browser_render_response(response: dict) -> None:
+    """模拟浏览器检查响应并展示响应体。"""
+
+    print(f"响应状态：{response['status']}")
+    print(f"内容类型：{response['headers']['Content-Type']}")
+    print(f"浏览器展示：{response['body']}")
+
+
+def main() -> None:
+    """依次模拟发送请求、服务器处理和浏览器展示。"""
+
+    request = browser_send_request("/books")
+    print(f"客户端发送：{request['method']} {request['url']}")
+    response = server_handle_request(request)
+    browser_render_response(response)
+
+
+if __name__ == "__main__":
+    main()