用 Python 撸一个 Web 服务器-第3章：使用 MVC 构建程序

Todo List 程序先容

我们将要编写的 Todo List 程序包含四个页面，分别是注册页面、登录页面、首页、编辑页面。以下分别为四个页面的截图。
注册页面：

注册
登录页面：

登录
首页：

首页
编辑页面：

编辑
程序页面非常简洁，乃至有些 Low。但这足够我们学习开发 Web 服务器程序原理，页面样式的题目并不是我们本次学习的重点，所以读者不必纠结于此。
Todo List 程序功能大概分为两个部分，一部分是 todo 管理，包含增删改查底子功能；另一部分是用户管理，包含注册和登录功能。
初识 MVC

先容了 Todo List 程序的页面和功能，接下来我们就要思考怎样设计程序。
以客户端通过欣赏器向服务器发送一个获取应用首页的哀求为例，来分析下服务器在收到这个哀求后都需要做哪些事情：

• 首先服务器需要对哀求数据进行解析，发现客户端是要获取应用首页。
  
• 然后找到代表首页的 HTML 文件，读取 HTML 文件中的内容。
  
• 最后将 HTML 内容组装成符合 HTTP 规范的数据进行返回。
  

这是一个较为抱负的情况，因为 HTML 页面内容是固定的，我们不需要对其进行其他处理，直接返回给欣赏器即可。通常我们管这种页面叫静态页面。
但现实情况中，Todo List 程序首页内容并不是一成不变的，而是动态变化的。首页 HTML 文件中只定义底子结构，具体的 todo 数据需要动态填充进去。所以一个更加完整的服务器处理哀求的过程应该像下面如许：

• 首先服务器需要对哀求数据进行解析，发现客户端是要获取应用首页。
  
• 然后从数据库中读取 todo 数据。
  
• 接着找到代表首页的 HTML 文件，读取 HTML 文件中的内容。
  
• 再将 todo 数据动态添加到 HTML 内容中。
  
• 最后将处理好的 HTML 内容组装成符合 HTTP 规范的数据进行返回。
  

现在已经知道了服务器处理哀求的完整过程，我们就可以设计服务器程序了。试想一下，如果 Todo List 程序都像 Hello World 程序一样把代码都写在一个 Python 文件中也不是不可以。但如许的代码显然不具备良好的扩展性和可维护性。那么更好的设计模式是什么呢？
其实对于 Web 服务器程序的设计，业界早已达成了一个普遍的共识，那就是 MVC 模式：
M（Model）：模型，用来存储和处理 Web 应用数据。
V（View）：视图，格式化显示 Web 应用页面。
C（Controller）：控制器，负责底子逻辑，如从模型层读取数据并将数据填充到视图层，然后返回响应。
通过 MVC 的分层结构，能够让 Web 应用设计更加清晰，可以很轻易的构建可扩展、易维护的代码。模型层，说直白些其实就是用来读写数据库的 Python 代码，新增 todo 的时候，可以通过模型层的代码将数据生存到数据库中，访问首页时需要展示全部已生存的 todo，这时可以通过模型层的代码从数据库中读取全部 todo。视图层，可以将其简单的明白为 HTML 模板文件的聚集。控制器起到粘合的作用，它将从模型层读取过来的数据填充到视图层并返回给欣赏器，或者将欣赏器通过 HTML 页面提交过来的数据解析出来再通过模型层写入数据库中。
我画了一个示例图，来资助你明白 MVC 模式。图中标注了欣赏器发起一个哀求到获得响应，中心履历的完整过程。

照旧以客户端哀求 Todo List 程序首页为例，一个完整的哀求过程如下：

• 欣赏器发起哀求。
  
• 哀求到达服务器后首先辈入控制器，然后控制器从模型获取 todo 数据。
  
• 模型操纵数据库，查询 todo 数据。
  
• 数据库返回 todo 数据。
  
• 模型将从数据库中查询的 todo 数据返回给控制器，控制器暂时将数据生存在内存中。
  
• 控制器从视图中获取首页 HTML 模板。
  
• 控制器将从模型查出来的 todo 数据填充到首页 HTML 模板中，并组装成符合 HTTP 规范的数据。
  
• 服务器返回响应。
  

其实 MVC 是一个宏观上的分层，具体细节部分还需要根据我们设计程序的粒度来进行处理，好比有些逻辑既可以写在控制器层，也可以写在模型层，乃至我们还可以在 MVC 的底子上扩展更多的分层。这些都需要联合具体的业务逻辑来决定。
构建 Todo List 程序

学习了 MVC 模式，我们就可以根据 MVC 模式来试着构建 Todo List 程序了。
Todo List 程序分两部分：todo 管理、用户管理。在项目初期，我们肯定不会思量的太过全面。所以可以先不思量用户管理功能部分的实现，先只思量怎样实现 todo 管理功能。
Todo List 程序目录结构设计如下：

1. todo_list  
2. ├── server.py  
3. └── todo  
4. ├── \_\_init\_\_.py  
5. ├── config.py  
6. ├── controllers.py  
7. ├── db  
8. │   └── todo.json  
9. ├── models.py  
10. ├── templates  
11. │   ├── edit.html  
12. │   └── index.html  
13. └── utils.py

复制代码

这里以 todo_list/ 作为程序的根目录，根目录下包含 server.py 文件和 todo/ 目录。此中 server.py 主要功能就是作为一个 Web Server 来接收哀求和返回响应，它是 Todo List 程序的入口和出口。而 todo/ 目录则是 Todo List 程序处理业务逻辑的核心。
todo/ 目录下的 __init__.py 将 todo/ 文件夹标记为一个 Python 包。 config.py 用于存储一些项目的底子设置。utils.py 是一个工具集，里面可以定义一些供其他模块调用的类和方法。db/ 目录作为 Todo List 程序存储数据的目录，db/todo.json 用来存储全部的 todo 内容。剩下还有两个 .py 文件和一个目录没有先容，相信你已经猜到了 models.py、templates/、controllers.py 分别对应了 MVC 模式中的模型、视图、控制器。models.py 中编写操纵 todo 数据的代码，templates/ 目录用来存放 HTML 模板文件，templates/index.html 是首页，templates/edit.html 是编辑页面，controllers.py 编写负责程序控制的底子逻辑代码。
我们对项目的目录结构有了一个概览，这里我要夸大一下 db/ 目录的作用。我们在开发整个 Todo List 程序的过程中都不会使用现实的数据库程序，项目中全部需要存储的数据都生存在 db/ 目录下的文件中。在开发 Web 程序时，需要用到数据库的目的就是为了存储数据，对于 Todo List 程序来说使用文件同样能满意需求，同时能够照顾到对数据库不了解的读者。
Todo List 首页开发

Todo List 程序目录结构构建完成后就可以动手开发程序了，我们可以从一个哀求履历的过程来着手。
一个哀求发送到服务器，首先服务器需要有一个能够接收哀求的入口，在程序根目录 todo_list/ 下的 server.py 就是这个入口。server.py 文件代码如下：

1. \# todo_list/server.py
3. import socket  
4. import threading
6. from todo.config import HOST, PORT, BUFFER_SIZE
8. def process_connection(client):  
9. """处理客户端请求"""  
10. \# 接收请求报文数据  
11. request_bytes = b''  
12. while True:  
13. chunk = client.recv(BUFFER_SIZE)  
14. request_bytes += chunk  
15. if len(chunk) < BUFFER_SIZE:  
16. break
18. \# 请求报文  
19. request_message = request_bytes.decode('utf-8')  
20. print(f'request_message: {request_message}')
22. \# TODO: 解析请求  
23. \# TODO: 返回响应
25. \# 关闭连接  
26. client.close()
28. def main():  
29. """入口函数"""  
30. with socket.socket() as s:  
31. s.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)  
32. s.bind((HOST, PORT))  
33. s.listen(5)  
34. print(f'running on http://{HOST}:{PORT}')
36. while True:  
37. client, address = s.accept()  
38. print(f'client address: {address}')  
39. \# 创建新的线程来处理客户端连接  
40. t = threading.Thread(target=process_connection, args=(client,))  
41. t.start()

复制代码

server.py 程序险些就是之前实现的多线程版 Hello World 服务器程序照搬过来的。为了程序代码更加清晰，这里将服务器的 IP 地点、端口、接收哀求的缓冲区巨细定义为变量写在了设置文件 todo/config.py 中，所以需要在 server.py 文件顶部从设置文件中导入 HOST 、PORT 、BUFFER_SIZE。在 main 函数中，实例化 socket 对象部分的代码也有所改变，这里接纳了 with 语句来实例化 socket 对象，如许能够保证任何情况下退出程序时 socket 都能够被正确关闭。此处 with 语句的用法可以类比文件操纵时的 with 语句。处理客户端连接哀求的 process_connection 函数内部基本逻辑没有改变，此中有两个 TODO 注释表示解析哀求和返回响应的功能暂未实现。
从 server.py 入口程序接收到客户端的哀求以后，需要解析哀求报文，并根据解析出来的哀求报文来决定怎样处理哀求并返回响应。所以接下来我们需要编写解析哀求的代码。
不过在这之前，我先给出 todo/config.py 设置文件的代码，毕竟之后还会用到：

1. \# todo_list/todo/config.py
3. import os
5. \# todo/ 目录绝对路径  
6. BASE_DIR = os.path.dirname(os.path.abspath(\_\_file\_\_))
8. \# IP  
9. HOST = '127.0.0.1'  
10. \# 端口  
11. PORT = 8000
13. \# 缓冲大小  
14. BUFFER_SIZE = 1024

复制代码

设置文件中除了包含前面先容过的表示 IP 地点、端口、接收哀求的缓冲区巨细的几个变量，还有一个 BASE_DIR 变量用来表示 todo/ 目录的绝对路径，方便在程序中获取项目路径。
现在来看下怎样解析哀求，我们可以定义一个 Request 类用来专门解析哀求报文，代码写在 todo/utils.py 文件中：

1. \# todo_list/todo/utils.py
3. class Request(object):  
4. """请求类"""
6. def \_\_init\_\_(self, request_message):  
7. method, path, headers = self.parse_data(request_message)  
8. self.method = method \# 请求方法 GET、POST  
9. self.path = path \# 请求路径 /index  
10. self.headers = headers \# 请求头 {'Host': '127.0.0.1:8000'}
12. def parse_data(self, data):  
13. """解析请求报文数据"""  
14. \# 用请求报文中的第一个 '\\r\\n\\r\\n' 做分割，将得到请求头和请求体  
15. \# 请求体暂时用不到先不处理  
16. header, body = data.split('\\r\\n\\r\\n', 1)  
17. method, path, headers = self.\_parse_header(header)  
18. return method, path, headers
20. def \_parse_header(self, data):  
21. """解析请求头"""  
22. \# 拆分请求行和请求首部  
23. request_line, request_header = data.split('\\r\\n', 1)
25. \# 请求行拆包 'GET /index HTTP/1.1' -> \['GET', '/index', 'HTTP/1.1'\]  
26. \# 因为 HTTP 版本号没什么用，所以用一个下划线 _ 变量来接收  
27. method, path, _ = request_line.split()
29. \# 解析请求首部所有的键值对，组装成字典  
30. headers = {}  
31. for header in request_header.split('\\r\\n'):  
32. k, v = header.split(': ', 1)  
33. headers\[k\] = v
35. return method, path, headers

复制代码

Request 类的初始化方法 __init__ 接收哀求报笔墨符串作为参数。在其内部调用 parse_data 方法将哀求报笔墨符串解析成我们需要的结构化数据。
解析完哀求报文，我们需要根据哀求报文信息来判定怎样返回响应。底子逻辑判定部分的代码可以写在 todo/controllers.py 中：

1. \# todo_list/todo/controllers.py
3. from todo.utils import render_template
5. def index():  
6. """首页视图函数"""  
7. return render_template('index.html')

复制代码

定义在控制器层的函数也叫视图函数，因为它们通常返回视图层的 HTML 内容。index 视图函数用来处理哀求首页的逻辑，它返回 render_template 函数的调用效果，render_template 函数的作用是将 HTML 内容读取成字符串并返回，其定义如下：

1. \# todo_list/todo/utils.py
3. import os
5. from todo.config import BASE_DIR
7. def render_template(template):  
8. """读取 HTML 内容"""  
9. \# 读取 'todo_list/todo/templates' 目录下的 HTML 文件内容  
10. template_dir = os.path.join(BASE_DIR, 'templates')  
11. path = os.path.join(template_dir, template)  
12. with open(path, 'r', encoding='utf-8') as f:  
13. html = f.read()  
14. return html

复制代码

在 todo/controllers.py 文件底部还定义了一个 routes 字典，字典的键为哀求路径，值为一个元组，元组的第一个元素作为处理哀求的函数，第二个元素是一个列表，里面定义处理哀求的函数所答应的哀求方法。index 视图函数能够同时匹配两个路径：/、/index，因为这两个路径通常都代表首页。

1. \# todo_list/todo/controllers.py
3. routes = {  
4. '/': (index, \['GET'\]),  
5. '/index': (index, \['GET'\]),  
6. }

复制代码

读取出 HTML 内容以后，我们就可以构造响应报文并返回给欣赏器了。在 utils.py 文件下，编写一个 Response 类用来构造响应：

1. \# todo_list/todo/utils.py
3. class Response(object):  
4. """响应类"""
6. \# 根据状态码获取原因短语  
7. reason_phrase = {  
8. 200: 'OK',  
9. 405: 'METHOD NOT ALLOWED',  
10. }
12. def \_\_init\_\_(self, body, headers=None, status=200):  
13. \# 默认响应首部字段，指定响应内容的类型为 HTML  
14. \_headers = {  
15. 'Content-Type': 'text/html; charset=utf-8',  
16. }
18. if headers is not None:  
19. \_headers.update(headers)  
20. self.headers = \_headers \# 响应头  
21. self.body = body \# 响应体  
22. self.status = status \# 状态码
24. def \_\_bytes\_\_(self):  
25. """构造响应报文"""  
26. \# 状态行 'HTTP/1.1 200 OK\\r\\n'  
27. header = f'HTTP/1.1 {self.status} {self.reason_phrase.get(self.status, "")}\\r\\n'  
28. \# 响应首部  
29. header += ''.join(f'{k}: {v}\\r\\n' for k, v in self.headers.items())  
30. \# 空行  
31. blank_line = '\\r\\n'  
32. \# 响应体  
33. body = self.body
35. response_message = header + blank_line + body  
36. return response_message.encode('utf-8')

复制代码

Response 类的初始化方法 __init__ 接收三个参数，分别为响应体、响应首部字段、状态码。此中响应体为 str 范例，首页的响应体现实上就是 index.html 文件内容。响应首部字段为 dict 范例，在构造响应报文时，全部的响应首部字段最终按照 HTTP 规范拼接到一起作为响应首部。状态码为数值范例，现在只思量了状态码为 200 正常响应和 405 哀求方法不被答应。
需要注意的是，Response 类定义了 __bytes__ 邪术方法作为构造响应报文的方法。当使用 Python 内置的 bytes 方法转换 Response 实例对象时（bytes(Response())），会主动调用 __bytes__ 邪术方法。
从解析哀求到构造响应报文的代码现在已经基本编写完成。接下来我们将整个处理哀求的流程串联起来，回到 server.py 文件，继续完善代码：

1. \# todo_list/server.py
3. import socket  
4. import threading
6. from todo.config import HOST, PORT, BUFFER_SIZE  
7. from todo.utils import Request, Response  
8. from todo.controllers import routes
10. def process_connection(client):  
11. """处理客户端请求"""  
12. \# 接收请求报文数据  
13. request_bytes = b''  
14. while True:  
15. chunk = client.recv(BUFFER_SIZE)  
16. request_bytes += chunk  
17. if len(chunk) < BUFFER_SIZE:  
18. break
20. \# 请求报文  
21. request_message = request_bytes.decode('utf-8')  
22. print(f'request_message: {request_message}')
24. \# 解析请求报文，构造请求对象  
25. request = Request(request_message)  
26. \# 根据请求对象构造响应报文  
27. response_bytes = make_response(request)  
28. \# 返回响应  
29. client.sendall(response_bytes)
31. \# 关闭连接  
32. client.close()
34. def make_response(request, headers=None):  
35. """构造响应报文"""  
36. \# 默认状态码为 200  
37. status = 200  
38. \# 获取匹配当前请求路径的处理函数和函数所接收的请求方法  
39. \# request.path 等于 '/' 或 '/index' 时，routes.get(request.path) 将返回 (index, \['GET'\])  
40. route, methods = routes.get(request.path)
42. \# 如果请求方法不被允许，返回 405 状态码  
43. if request.method not in methods:  
44. status = 405  
45. data = 'Method Not Allowed'  
46. else:  
47. \# 请求首页时 route 实际上就是我们在 controllers.py 中定义的 index 视图函数  
48. data = route()
50. \# 获取响应报文  
51. response = Response(data, headers=headers, status=status)  
52. response_bytes = bytes(response)  
53. print(f'response_bytes: {response_bytes}')
55. return response_bytes
57. def main():  
58. """入口函数"""  
59. with socket.socket() as s:  
60. s.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)  
61. s.bind((HOST, PORT))  
62. s.listen(5)  
63. print(f'running on http://{HOST}:{PORT}')
65. while True:  
66. client, address = s.accept()  
67. print(f'client address: {address}')  
68. \# 创建新的线程来处理客户端连接  
69. t = threading.Thread(target=process_connection, args=(client,))  
70. t.start()
72. if \_\_name\_\_ == '\_\_main\_\_':  
73. main()

复制代码

首先完成之前未写完的 process_connection 函数。将原来标记 TODO 注释的地方更换成了如下代码：

1. \# 解析请求报文，构造请求对象  
2. request = Request(request_message)  
3. \# 根据请求对象构造响应报文  
4. response_bytes = make_response(request)  
5. \# 返回响应  
6. client.sendall(response_bytes)

复制代码

新增了一个 make_response 函数，方便用来根据哀求对象构造响应报文。函数中我写了比力详细的注释，你可以根据注释内容读懂代码逻辑。
最后给出首页 todo/templates/index.html 的 HTML 代码：

1. <!--todo_list/todo/templates/index.html-->
3. <!DOCTYPE html>
4. <html>  
5. <head>  
6. <meta charset="UTF-8">  
7. <title>Todo List</title>  
8. <style>  
9. \* {  
10. margin: 0;  
11. padding: 0;  
12. }  
13.   
14. ul {  
15. list-style: none;  
16. }  
17.   
18. a {  
19. text-decoration: none;  
20. outline: none;  
21. color: #000000;  
22. }  
23.   
24. h1 {  
25. margin: 20px auto;  
26. }  
27.   
28. .container {  
29. display: flex;  
30. justify-content: center;  
31. align-items: center;  
32. }  
33.   
34. .container ul {  
35. width: 100%;  
36. max-width: 600px;  
37. }  
38.   
39. .container ul li {  
40. height: 40px;  
41. line-height: 40px;  
42. margin-bottom: 4px;  
43. padding: 0 6px;  
44. display: flex;  
45. justify-content: space-between;  
46. background-color: #d2d2d2;  
47. }  
48. </style>  
49. </head>  
50. <body>  
51. <h1 class="container">Todo List</h1>  
52. <div class="container">  
53. <ul>  
54. <li>  
55. <div>Hello World</div>  
56. </li>  
57. </ul>  
58. </div>  
59. </body>  
60. </html>

复制代码

HTML 代码比力简单，此中顶部写了一些底子的 CSS 样式，都很轻易看懂，这里不再解说。
接下来在终端中，进入 todo_list/目录下，使用 Python 运行 server.py 文件，看到如下打印效果说明程序已经正常启动：

运行 Todo List 服务器
打开欣赏器，地点栏输入 http://127.0.0.1:8000/ 或者 http://127.0.0.1:8000/index，你将看到 Todo List 程序首页：

Todo List 首页
至此，Todo List 程序首页初步完成。不过我想许多读者看到这里会产生疑惑，说好的 MVC 呢，现在为止我们并没有编写一行模型层的代码，并且首页的 HTML 内容也不是动态填充的。没错，为了能够尽快让 Todo List 程序跑起来，我有意的避开了这两个题目，下一章我们再来办理这两个题目。
   本章源码：chapter3
  原文出处： https://jianghushinian.cn

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。