163 lines
6.5 KiB
Markdown
163 lines
6.5 KiB
Markdown
# 第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`中的练习。
|