AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

用 Python 撸一个 Web 服务器-第4章：动态渲染数据

2023-06-12 93
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
云解析 DNS，旗舰版 1个月
全局流量管理 GTM，标准版 1个月
公共DNS（含HTTPDNS解析），每月1000万次HTTP解析
简介： 用 Python 撸一个 Web 服务器-第4章：动态渲染数据

上一章中为了尽快让 Todo List 程序跑起来，并没有完全按照 MVC 模式编写程序。这一章就让我们一起实现一个完整的 MVC 模式 Todo List 程序首页。

使用模型操作数据

我们来分析下请求 Todo List 程序首页时，模型层需要做哪些事情。当一个请求到达首页视图函数 index 时，它需要做两件事情，首先调用模型层获取全部的 todo 数据，然后将 todo 数据动态填充到 index.html 模板中。

调用模型层获取全部的 todo 数据，只需要在模型层编写读取 todo/db/todo.json 文件数据的代码即可。在这之前，我们需要先确定 todo 在文件中存储的格式。

Todo List 程序中 todo 需要存储的数据只有一个，就是 todo 的内容。所以我们可以将 todo 以如下格式存储到 todo/db/todo.json 文件：

1
2
3
4
5
6
7
8
9
10
11
12
 
// todo_list/todo/db/todo.json
[
    {
"id": 1,
"content": "hello world"
    },
    {
"id": 2,
"content": "你好，世界！"
    }
]

这是一个标准的 JSON 格式，每一个对象代表了一条 todo，content 字段即为 todo 内容，id 作为每条数据的索引不会展示在页面中，方便我们对数据进行排序、快速查找等操作。

为了简化程序，我将数据存储在 JSON 文件中而不是数据库中。存储到文件的格式多种多样，但 JSON 格式是一种非常流行且友好的数据格式，在 Python 中也能够很方便的对 JSON 格式的文件进行读写操作。

注意：

  1. JSON 文件不支持注释，所以如果你打算直接从上面示例中复制数据到 todo.json 文件时，需要去掉顶部文件名注释。
  2. 如果 todo/db/todo.json 文件内容为空，使用 Python 读取时会抛出 JSONDecodeError 异常，起码要保证其内部有一个空数组 [] 存在，才能正常读取。

确定了 todo/db/todo.json 文件数据格式，就可以编写在模型层读取 todo 数据的代码了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
# todo_list/todo/models.py
import os
import json
from todo.config import BASE_DIR
classTodo(object):
"""
    Todo 模型类
    """
def__init__(self, **kwargs):
        self.id = kwargs.get('id')
        self.content = kwargs.get('content', '')
    @classmethod
def_db_path(cls):
"""获取存储 todo 数据文件的绝对路径"""
# 返回 'todo_list/todo/db/todo.json' 文件的绝对路径
        path = os.path.join(BASE_DIR, 'db/todo.json')
return path
    @classmethod
def_load_db(cls):
"""加载 JSON 文件中所有 todo 数据"""
        path = cls._db_path()
with open(path, 'r', encoding='utf-8') as f:
return json.load(f)
    @classmethod
defall(cls, sort=False, reverse=False):
"""获取全部 todo"""
# 这一步用来将所有从 JSON 文件中读取的 todo 数据转换为 Todo 实例化对象，方便后续操作
        todo_list = [cls(**todo_dict) for todo_dict in cls._load_db()]
# 对数据按照 id 进行排序
if sort:
            todo_list = sorted(todo_list, key=lambda x: x.id, reverse=reverse)
return todo_list

定义 Todo 模型类来操作 todo 数据。Todo 模型类的 all 方法用来读取全部的 todo 数据，在其内部将所有从 JSON 文件中读取的 todo 数据转换为 Todo 实例化对象并组装成 list 返回。all 方法还可以对数据进行排序，排序操作实际上转发给了 Python 内置的 sorted 函数来完成。

有了全部的 todo 数据，下一步操作就是将 todo 数据动态填充到 todo/templates/index.html 模板中。

使用模板引擎渲染 HTML

上一章实现的 Todo List 程序返回的首页数据都是固定写死在 todo/templates/index.html 代码中的。现在需要动态填充 todo 内容，我们需要学习一个新的概念叫作 模板渲染。

首先我们编写的 HTML 页面不再是完全使用 HTML 的标签来编写，而需要使用一些占位变量来替换需要动态填充的部分，这样编写出来的 HTML 页面通常称为模板。将 HTML 模板读取到内存中，使用真实的 todo 数据来替换掉占位变量而获得最终将要返回的字符串数据，这个过程称为渲染。能够实现读取 HTML 中的占位变量并正确替换为真实值的代码称为模板引擎。

Todo List 程序首页主体部分代码如下：

1
2
3
4
5
6
7
8
9
10
11
 
<h1class="container">Todo List</h1>
<divclass="container">
<ul>
<li>
<div>Hello World</div>
</li>
<li>
<div>你好，世界！</div>
</li>
</ul>
</div>

其中每一个 li 标签代表一条 todo，显然 todo 的条数是不确定的，所以每一个 li 标签都需要动态生成。根据这段 HTML 代码，可以编写出如下模板：

1
2
3
4
5
6
7
8
9
10
 
<h1class="container">Todo List</h1>
<divclass="container">
<ul>
        {% for todo in todo_list %}
<li>
<div>{{ todo.content }}</div>
</li>
        {% endfor %}
</ul>
</div>

这段模板代码中只保留了一对 li 标签，它被嵌套在 for 循环中，for 语句块从 结束。todo_list 变量是在模板渲染阶段传进来的由所有 todo 对象组成的 list，list 中有多少个元素就会渲染多少个 li 标签。for 循环内部使用了循环变量 todo， 表示获取 todo 变量的 content 属性，这与 Python 中获取对象的属性语法相同。

了解了模板语法，我们还需要有一个能够读懂模板语法的模板引擎。Todo List 程序的 HTML 模板只会用到 for 循环和模板变量这两种语法，所以我们将要实现的模板引擎只需要能够解析这两种语法即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
 
# todo_list/todo/utils.py
classTemplate(object):
"""模板引擎"""
def__init__(self, text, context):
# 保存最终结果
        self.result = []
# 保存从 HTML 中解析出来的 for 语句代码片段
        self.for_snippet = []
# 上下文变量
        self.context = context
# 使用正则匹配出所有的 for 语句、模板变量
        self.snippets = re.split('({{.*?}}|{%.*?%})', text, flags=re.DOTALL)
# 标记是否为 for 语句代码段
        is_for_snippet = False
# 遍历所有匹配出来的代码片段
for snippet in self.snippets:
# 解析模板变量
if snippet.startswith('{{'):
if is_for_snippet isFalse:
# 去掉花括号和空格，获取变量名
                    var = snippet[2:-2].strip()
# 获取变量的值
                    snippet = self._get_var_value(var)
# 解析 for 语句
elif snippet.startswith('{%'):
# for 语句开始代码片段 -> {% for todo in todo_list %}
if'in'in snippet:
                    is_for_snippet = True
                    self.result.append('{}')
# for 语句结束代码片段 -> {% endfor %}
else:
                    is_for_snippet = False
                    snippet = ''
if is_for_snippet:
# 如果是 for 语句代码段，需要进行二次处理，暂时保存到 for 语句片段列表中
                self.for_snippet.append(snippet)
else:
# 如果是模板变量，直接将变量值追加到结果列表中
                self.result.append(snippet)
def_get_var_value(self, var):
"""根据变量名获取变量的值"""
# 如果 '.' 不在变量名中，直接在上下文变量中获取变量的值
if'.'notin var:
            value = self.context.get(var)
# '.' 在变量名中（对象.属性），说明是要获取对象的属性
else:
            obj, attr = var.split('.')
            value = getattr(self.context.get(obj), attr)
# 保证返回的变量值为字符串
ifnot isinstance(value, str):
            value = str(value)
return value
def_parse_for_snippet(self):
"""解析 for 语句片段代码"""
# 保存 for 语句片段解析结果
        result = []
if self.for_snippet:
# 解析 for 语句开始代码片段
# '{% for todo in todo_list %}' -> ['for', 'todo', 'in', 'todo_list']
            words = self.for_snippet[0][2:-2].strip().split()
# 从上下文变量中获取 for 语句中的可迭代对象
            iter_obj = self.context.get(words[-1])
# 遍历可迭代对象
for i in iter_obj:
# 遍历 for 语句片段的代码块
for snippet in self.for_snippet[1:]:
# 解析模板变量
if snippet.startswith('{{'):
# 去掉花括号和空格，获取变量名
                        var = snippet[2:-2].strip()
# 如果 '.' 不在变量名中，直接将循环变量 i 赋值给 snippet
if'.'notin var:
                            snippet = i
# '.' 在变量名中（对象.属性），说明是要获取对象的属性
else:
                            obj, attr = var.split('.')
# 将对象的属性值赋值给 snippet
                            snippet = getattr(i, attr)
# 保证变量值为字符串
ifnot isinstance(snippet, str):
                        snippet = str(snippet)
# 将解析出来的循环变量结果追加到 for 语句片段解析结果列表中
                    result.append(snippet)
return result
defrender(self):
"""渲染"""
# 获取 for 语句片段解析结果
        for_result = self._parse_for_snippet()
# 将渲染结果组装成字符串并返回
return''.join(self.result).format(''.join(for_result))
defrender_template(template, **context):
"""渲染模板"""
# 读取 'todo_list/todo/templates' 目录下的 HTML 文件内容
    template_dir = os.path.join(BASE_DIR, 'templates')
    path = os.path.join(template_dir, template)
with open(path, 'r', encoding='utf-8') as f:
# 将从 HTML 中读取的内容传递给模板引擎
        t = Template(f.read(), context)
# 调用模板引擎的渲染方法，实现模板渲染
return t.render()

Template 类就是我们为 Todo List 程序实现的模板引擎。模板引擎的代码有些复杂，我写了比较详细的注释来帮助你理解。模板渲染的大概过程如下：

首先实例化 Template 对象，Template 对象的初始化方法 __init__ 需要传递两个参数，分别是 HTML 字符串和保存了模板所需变量的 dict，在初始化时会解析出 HTML 中所有的 for 语句和模板变量，模板变量直接被替换为对应的值，for 语句代码段则被暂存起来，等到需要真正渲染模板时，调用模板引擎实例对象的 render 方法，完成 for 语句的解析和值替换，最终将渲染结果组装成字符串并返回。

render_template 函数的代码也做了相应的调整，它的功能不再只是读取 HTML 内容，而是需要在内部调用模板引擎获取渲染结果。

对于基础薄弱的读者来说可能模板引擎部分的代码不太好理解，那么暂时先不必深究，你只需要知道模板引擎干了什么，明白它的原理无非是将 HTML 字符串中的模板语法全部找出来，然后根据语法规则将其替换成真正的变量值，最后渲染成正确的 HTML。本质上还是字符串的拼接，就像 Python 字符串的 format 方法一样，它能够找到字符串中的花括号 {}，然后替换成传递给它的参数值。

MVC 模式的 Todo List 程序首页

我们已经介绍了使用模型操作数据和使用模板引擎渲染 HTML，现在就可以用动态渲染的 HTML 首页替换之前的静态首页了。

修改首页 todo/templates/index.html 的 HTML 代码为一个模板：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<!-- todo_list/todo/templates/index.html -->
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>Todo List</title>
</head>
<body>
<h1class="container">Todo List</h1>
<divclass="container">
<ul>
        {% for todo in todo_list %}
<li>
<div>{{ todo.content }}</div>
</li>
        {% endfor %}
</ul>
</div>
</body>
</html>

这里我暂时去掉了 HTML 顶部的 CSS 样式，因为我们的模板引擎不支持这种直接将 CSS 嵌入在 HTML 中的写法，之后我会介绍如何通过 link 标签来引入外部样式。

我们还要对 index 视图函数做些修改，在视图函数内部调用 Todo 模型的 all 方法来获取所有 todo，然后传递给模板引擎对 HTML 进行渲染，得到最终结果。修改后的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
# todo_list/todo/controllers.py
from todo.utils import render_template
from todo.models import Todo
defindex():
"""首页视图函数"""
# 倒序排序，最近添加的 todo 排在前面
    todo_list = Todo.all(sort=True, reverse=True)
    context = {
'todo_list': todo_list,
    }
return render_template('index.html', **context)

在终端中进入项目根目录 todo_list/ 下，使用 Python 运行 server.py 文件，将得到经过动态渲染的 Todo List 程序首页：

Todo List 首页

现在 Todo List 程序首页已经是动态渲染的了，下一章我们就来解决样式问题。

本章源码：chapter4

文章标签：
云解析DNS
Python
前端开发
索引
数据格式
数据库
存储
JSON
关键词：
Python web
云服务器 ECS数据
Python数据
web python
python云服务器 ECS
江湖十年007
目录
相关文章
Deephub
|
5天前
|
机器学习/深度学习 数据采集 算法
数据稀缺条件下的时间序列微分：符号回归(Symbolic Regression)方法介绍与Python示例
有多种方法可以处理时间序列数据中的噪声。本文将介绍一种在我们的研究项目中表现良好的方法,特别适用于时间序列概况中数据点较少的情况。
Deephub
20 1
数据稀缺条件下的时间序列微分：符号回归(Symbolic Regression)方法介绍与Python示例
众所周知
|
1天前
|
SQL 安全 数据库
深度揭秘：Python Web安全攻防战，SQL注入、XSS、CSRF一网打尽！
在Web开发领域，Python虽强大灵活，但安全挑战不容小觑。本文剖析Python Web应用中的三大安全威胁：SQL注入、XSS及CSRF，并提供防御策略。通过示例代码展示如何利用参数化查询、HTML转义与CSRF令牌构建安全防线，助您打造更安全的应用。安全是一场持久战，需不断改进优化。
众所周知
10 3
sunrr
|
5天前
|
机器学习/深度学习 算法 开发工具
Python Web开发工具
Python Web开发工具
sunrr
14 3
Star时光
|
8天前
|
Python
使用Python和Flask构建简单的Web应用
使用Python和Flask构建简单的Web应用
Star时光
19 6
龙大吉
|
8天前
|
SQL 安全 数据库
从入门到精通：Python Web安全守护指南，SQL注入、XSS、CSRF全防御！
【9月更文挑战第13天】在开发Python Web应用时，安全性至关重要。本文通过问答形式，详细介绍如何防范SQL注入、XSS及CSRF等常见威胁。通过使用参数化查询、HTML转义和CSRF令牌等技术，确保应用安全。附带示例代码，帮助读者从入门到精通Python Web安全。
龙大吉
29 6
东方睿赢
|
8天前
|
算法 Python
揭秘！Python数据魔术师如何玩转线性回归，让你的预测精准到不可思议
【9月更文挑战第13天】在数据科学领域，线性回归以其优雅而强大的特性，将复杂的数据关系转化为精准的预测模型。本文将揭秘Python数据魔术师如何利用这一统计方法，实现令人惊叹的预测精度。线性回归假设自变量与因变量间存在线性关系，通过拟合直线或超平面进行预测。Python的scikit-learn库提供了简便的LinearRegression类，使模型构建、训练和预测变得简单直接。
东方睿赢
22 5
龙大吉
|
9天前
|
SQL 安全 JavaScript
告别Web安全小白！Python实战指南：抵御SQL注入、XSS、CSRF的秘密武器！
【9月更文挑战第12天】在Web开发中，安全漏洞如同暗礁，尤其对初学者而言，SQL注入、跨站脚本（XSS）和跨站请求伪造（CSRF）是常见挑战。本文通过实战案例，展示如何利用Python应对这些威胁。首先，通过参数化查询防止SQL注入；其次，借助Jinja2模板引擎自动转义机制抵御XSS攻击；最后，使用Flask-WTF库生成和验证CSRF令牌，确保转账功能安全。掌握这些技巧，助你构建更安全的Web应用。
龙大吉
14 5
东方睿赢
|
10天前
|
存储 算法 测试技术
预见未来？Python线性回归算法：数据中的秘密预言家
【9月更文挑战第11天】在数据的海洋中，线性回归算法犹如智慧的预言家，助我们揭示未知。本案例通过收集房屋面积、距市中心距离等数据，利用Python的pandas和scikit-learn库构建房价预测模型。经过训练与测试，模型展现出较好的预测能力，均方根误差（RMSE）低，帮助房地产投资者做出更明智决策。尽管现实关系复杂多变，线性回归仍提供了有效工具，引领我们在数据世界中自信前行。
东方睿赢
27 5
请看我回答~
|
7天前
|
jenkins 测试技术 持续交付
自动化测试的高效之路：如何利用Python进行Web应用测试
【9月更文挑战第13天】在软件开发的快节奏中，自动化测试是确保质量和效率的关键。本文将引导你了解如何使用Python语言及其强大的测试框架来提升Web应用的测试效率。我们将一起探索编写简洁而强大的测试脚本的技巧，以及如何通过持续集成（CI）实现自动化测试流程。准备好让你的测试工作飞一般的感觉！
请看我回答~
10 0
飞天小橘子
|
Web App开发 数据采集 Windows
Python3网络爬虫——（3）代理服务器设置（IP代理使用）
代理服务器设置 西刺代理IP URL：http://www.xicidaili.com/ 使用request.
飞天小橘子
1756 0

热门文章

最新文章

  • 1
    阿里云服务器快速配置安全组放行端口方法
  • 2
    记一次8小时惊心动魄的服务器+网站升级
  • 3
    ECS 打造云端开发/协同办公 “军火库”
  • 4
    阿里云服务器8核16G配置不同实例最新收费标准价格及选择参考
  • 5
    Confluence 6 发送 Confluence 通知到其他 Confluence 服务器
  • 6
    【公测】服务器迁移中心——应用环境、服务器轻松上云
  • 7
    如何实现两台服务器间无密码的传输数据和操作
  • 8
    Linux下DHCP服务器的搭建
  • 9
    阿里云服务器2核8G 4核16G 8核32G配置最新优惠价格及选择建议参考
  • 10
    云服务器选型指南 01 | 内存型数据库上云有哪些痛点？
  • 1
    什么是web与搭建自己的第一个pikachu靶场
    74
  • 2
    【Web系列笔记】Restful
    54
  • 3
    【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的？
    67
  • 4
    【Web 前端】jQuery 里的 each() 是什么函数？你是如何使用它的？
    130
  • 5
    【Web 前端】如何找到所有 HTML select 标签的选中项？
    86
  • 6
    【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同？
    62
  • 7
    【Web 前端】$(document).ready() 是个什么函数？为什么要用它？
    447
  • 8
    【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片？
    167
  • 9
    20：基于EL与JSTL的产品管理页-Java Web
    48
  • 10
    19：Web开发模式与MVC设计模式-Java Web
    71

    • 相关课程

    更多
  • Python Web开发基础
  • Python爬虫实战
  • Python常用数据科学库
  • Python网络爬虫实战
  • Python完全自学手册图文教程
  • Python基础快速入门实战教程

    • 相关电子书

    更多
  • From Python Scikit-Learn to Sc
  • Data Pre-Processing in Python:
  • 双剑合璧-Python和大数据计算平台的结合

    • 相关实验场景

    更多
  • 搭建Node.js编程环境
  • 搭建Java Web开发环境
  • Internet Information Services（IIS）部署Web项目
  • Python新手入门
  • Python入门
  • 基于函数计算快速搭建Zblog等传统应用框架

    • 推荐镜像

    更多
  • python-release
  • nodejs-release
  • linuxmint-packages
    • 下一篇
    通义千问API入门教程