当前位置： 首页 > ops >正文

Python学习之Flask框架（二）

ops 2025/8/20 1:09:08

上一篇简单介绍了flask，现在接着学习模板引擎和表单处理。

Python学习之Flask框架（一）-CSDN博客

一、Jinja2 模板引擎

Jinja2 是 Flask 的默认模板引擎，允许开发者将动态数据嵌入到 HTML 中，生成富有交互性的页面。它支持变量、控制结构（如 for 循环和 if 判断）以及宏（类似于函数的代码片段，可以复用）。

1. 导入与使用

Flask通过render_template来实现模板的渲染，要使用这个方法，我们需要导入from flask import rander_template，模板中注释需放在{# #}中

在模板文件 templates/index2.html 中：

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><title>你好</title></head><body><h1>Hello, {{ name }}!</h1></body>
</html>

在 Flask 应用中使用这个模板：

from flask import render_template
from gevent.local import localfrom flask_base import FlaskBaseclass Test1(FlaskBase):@staticmethod@FlaskBase.app.route("/", methods=['GET'])def index():name = '张三'# 以键值对的形式传参给模板index2.htmlreturn render_template('index2.html', name=name)# 如果有多个变量需要传递，直接使用**locals()替代我们在当前视图函数中定义的所有变量# return render_template('index2.html', **locals())if __name__ == '__main__':test1 = Test1()test1.run()

2. 控制语句

jinja2模板引擎中也可使用if和for控制语句，但是语句需要放置在{% %}中；

在模板文件 templates/index3.html 中：

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><title>你好</title></head><body>{% if data.name=='张三' %}<h1>你是张三！</h1>{% if data.name=='李四' %}<h1>你是李四！</h1>{% else %}<h1>你是谁！</h1>{% endif %}{% endif %}{% for item in data.list %}<p>目标：{{item}}</p>{% endfor %}</body>
</html>

在 Flask 应用中使用这个模板：

from flask import render_templatefrom flask_base import FlaskBaseclass Test1(FlaskBase):@staticmethod@FlaskBase.app.route("/", methods=['GET'])def index():data = {'name': '张三','list': [1, 2, 3]}return render_template('index3.html', data=data)if __name__ == '__main__':test1 = Test1()test1.run()

3. 过滤器

可以使用内置过滤器前端模板内{{ 内容 | 过滤器 }}的" | "后使用

也可以使用add_template_filter(函数方法名,'过滤器名')来自定义过滤器；

在模板文件 templates/index4.html 中：

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><title>你好</title></head><body><!-- 过滤器的使用 --><!-- 全大写 -->{{ 'hello world' | upper }}<br><!-- 单词首字母大写 -->{{ 'hello world' | title }}<br><!-- 替换左边的内容为右边的内容 -->{{ 'hello world' | replace('hello','hi') }}<br><!-- 调用自定义的过滤器 -->list列表：{{ data.list | li2 }}</body>
</html>

在 Flask 应用中使用这个模板：

from flask import render_templatefrom flask_base import FlaskBaseclass Test1(FlaskBase):@staticmethod@FlaskBase.app.route("/", methods=['GET'])def index():data = {'name': '张三','list': [1, 2, 3]}return render_template('index4.html', data=data)# 自定义过滤器def list_step(li):# 返回列表，步长为2return li[::2]# 注册模板过滤器（filter）# 参数1为该过滤器调用的函数，参数2为在前端中调用该过滤器使用的名称FlaskBase.app.add_template_filter(list_step, 'li2')if __name__ == '__main__':test1 = Test1()test1.run()

4. 宏

  • 宏的定义是为了将前端模板中需要反复创建的模块变成一个方便调用的“函数”，可以传参，但不能有返回值
  • 宏的定义以macro标志开始，以endmacro结束，同样需要在{% %}中进行

定义宏：macro.html

<!-- 不带参数的宏定义, 像定义一个函数一样 -->
{% macro input1() %}<!-- 宏内执行的操作，生成一个input表单项 --><label>表单项1：<input type="text" name='username' value=''><br></label>
{% endmacro %}<!-- 带参数的宏定义，在括号添加参数和默认值 -->
{% macro input2(name, value='', type='text', size=30) %}<!-- 同样是宏内执行的操作，生成一个input表单项 --><!-- 此处双括号内的参数，指向我们在定义时设定的参数，调用时没有传值就使用设定的默认值 --><label>表单项2：<input type="{{ type }}" name="{{ name }}" value="{{ value }}" size="{{ size }}"><br></label>
{% endmacro %}

在模板中使用上述定义在外部文件中的宏

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><title>你好</title></head><body>{% import 'macro.html' as func %}<div><!-- 调用导入的宏模板文件中的宏，实现登录页面构建 --><p>用户名：{{func.input2('username')}}</p><p>密码：{{func.input2('password',type='password')}}</p><p>登录：{{func.input2('submit',type='submit',value='登录')}}</p></div><!-- 另一种导入方式 -->{% from 'macro.html' import input2 %}<div><!-- 此时直接调用input2即可 --><p>用户名：{{input2('username')}}</p><p>密码：{{input2('password',type='password')}}</p><p>登录：{{input2('submit',type='submit',value='登录')}}</p></div></body>
</html>

5. include

  • include用于在一个模板的指定位置导入另一个模板的内容，区别于宏的调用，include更像从另一个模板“复制+粘贴”；
  • include同样在{% %}中使用，采用语句{% include 模块名 %}，需要注意两点：
  • include是直接将目标模板中的所有内容直接“copy”在当前位置，所以被导入的模板如果有head和body部分也将被导入过来；
  • include和import都是在templates这个目录下搜索的，所以使用路径时不需要添加相对路径：上级目录 “ …/ ” 和当前目录 “ ./ ” ；

 头部模版：

<nav><div class="top">这是顶部</div>
</nav>

底部模版：

<footer><div class="bottom">这是底部<!-- 说明：子模板中可以直接使用父模板的变量，不需要其他操作因为这一代码是被复制到父模板中去运行的 -->作者：{{ data.name }}</div>
</footer>

使用：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>{% include "common/header.html" %}<div class="content">中间的</div>{% include "common/footer.html" %}
</body>
</html>

6. 加载静态文件

在static文件目录下定义名为css、image和js的文件夹分别存储这些静态文件。通常配合url_for函数使用(需要在双括号内调用)，将模板标签的src、herf属性通过url_for(静态文件名称)设置为反转url要比使用相对路径更好。

<head><!-- 导入js文件 --><script type="text/javascript" src="{{url_for('static',filename='js/jquery-3.5.1/jquery-3.5.1.js')}}"></script><!-- 导入css文件 --><link rel="stylesheet" href="{{url_for('static',filename='css/test.css')}}">
</head>
<body><!-- 导入图片 --><img alt="" src="{{ url_for('static',filename='image/test.jpg') }}"/>
</body>

7. extends

有别于include中我们在后端导入的父模板，将子模板插入到父模板中需要的地方。extend中我们在后端导入子模板，将父模板的框架（页面布局）拿来显示子模板

父模板：

<!DOCTYPE html>
<html lang="en">
<head><!--除了装载部分，其他部分子模板一律安照当前父模板的定义显示--><meta charset="UTF-8"><title><!--标题中子模板内容的装载位置-->{% block title %}{% endblock %}-我的网站</title>
</head>
<body><!--主体中子模板内容的装载位置-->{% block body %}这是基类中的内容{% endblock %}
</body>
</html>

子模板1：

<!--继承的父类模板文件名称-->
{% extends "father.html" %}
<!--插入到父类代码的title区块的内容-->
{% block title %}网站首页
{% endblock %}
<!--插入到父类代码的body区块的内容-->
{% block body %}<!--保留父模板该block中原本的内容-->{{ super() }}<h4>这是网站首页的内容！</h4>
{% endblock %}

子模板2：

<!--继承的父类模板文件名称-->
{% extends "father.html" %}
<!--插入到父类代码的title区块的内容-->
{% block title %}产品列表页
{% endblock %}
<!--插入到父类代码的body区块的内容-->
{% block body %}<h4>这是产品列表页的内容！</h4>取得网页标题的内容:<!--调用当前模板中其他block的内容 --><h4>{{ self.title() }}</h4>
{% endblock %}

二、表单处理

设计一个用户登录功能

1. 基础表单处理

表单数据接收及业务处理

from flask import render_template, request, redirect, url_for, sessionfrom flask_base import FlaskBaseclass Test1(FlaskBase):FlaskBase.app.secret_key = 'your_secret_key_here'@staticmethod@FlaskBase.app.route('/login', methods=['GET', 'POST'])def login():if request.method == 'POST':username = request.form.get('username')password = request.form.get('password')# 验证用户名和密码if username == 'admin' and password == 'secret':session['username'] = username  # 将用户名存入 sessionreturn redirect(url_for('dashboard'))else:error = '无效的用户名或密码'return render_template('login.html', error=error)# GET请求显示表单return render_template('login.html')@staticmethod@FlaskBase.app.route('/dashboard')def dashboard():# 检查用户是否已登录（通过 session）if 'username' not in session:return redirect(url_for('login'))  # 未登录则重定向到登录页return render_template('common/dashboard.html', username=session['username'])@staticmethod@FlaskBase.app.route('/logout')def logout():session.pop('username', None)  # 清除 sessionreturn redirect(url_for('login'))if __name__ == '__main__':test1 = Test1()test1.run()

login.html

<!DOCTYPE html>
<html>
<head><title>登录</title>
</head>
<body><h1>登录</h1>{% if error %}<p style="color: red;">{{ error }}</p>{% endif %}<form method="post"><div><label>用户名：</label><input type="text" name="username" required></div><div><label>密码：</label><input type="password" name="password" required></div><button type="submit">登录</button></form>
</body>
</html>

dashboard.html

<!DOCTYPE html>
<html>
<head><title>登录成功页面</title>
</head>
<body><h1>欢迎, {{ username }}!</h1><p>这是您登录后的主界面。</p><a href="{{ url_for('logout') }}">退出登录</a>
</body>
</html>

 运行结果：

 2. Flask-WTF扩展

对于复杂表单，推荐使用Flask-WTF扩展，它结合了WTForms库，提供了表单验证、CSRF保护等功能。

安装Flask-WTF

pip install flask-wtf

# 2.3.0以后的WTForms已经不支持email验证器,所以需要单独安装

pip show email_validator

WTForms提供了丰富的验证器：

  • DataRequired：字段不能为空
  • Email：必须是有效的电子邮件地址
  • Length：字符串长度限制
  • NumberRange：数值范围限制
  • EqualTo：字段必须与另一个字段值相等（如密码确认）
  • URL：必须是有效的URL
  • Regexp：必须匹配正则表达式

 

表单数据接收及处理

from flask import render_template, redirect,request, url_for, session
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, Email, Length
from flask_base import FlaskBaseclass LoginForm(FlaskForm):email = StringField('邮箱', validators=[DataRequired(), Email(), Length(1, 256)])password = PasswordField('密码', validators=[DataRequired(), Length(min=6)])submit = SubmitField('登录')class Test1(FlaskBase):FlaskBase.app.secret_key = 'your_secret_key_here'@staticmethod@FlaskBase.app.route('/login', methods=['GET', 'POST'])def login():form = LoginForm()if request.method == 'POST' and form.validate():  # 移除可能冲突的验证方式# 表单验证通过email = form.email.datasession['username'] = email  # 将用户名存入 session# 处理登录逻辑return redirect(url_for('dashboard'))return render_template('login_wtf.html', form=form)@staticmethod@FlaskBase.app.route('/dashboard')def dashboard():# 检查用户是否已登录（通过 session）if 'username' not in session:return redirect(url_for('login'))  # 未登录则重定向到登录页return render_template('common/dashboard.html', username=session['username'])@staticmethod@FlaskBase.app.route('/logout')def logout():session.pop('username', None)  # 清除 sessionreturn redirect(url_for('login'))if __name__ == '__main__':test1 = Test1()test1.run()

login_wtf.html

<!DOCTYPE html>
<html>
<head><title>登录</title>
</head>
<body><h1>登录</h1><form method="post">{{ form.hidden_tag() }}<div>{{ form.email.label }}{{ form.email }}{% if form.email.errors %}<ul>{% for error in form.email.errors %}<li>{{ error }}</li>{% endfor %}</ul>{% endif %}</div><div>{{ form.password.label }}{{ form.password }}{% if form.password.errors %}<ul>{% for error in form.password.errors %}<li>{{ error }}</li>{% endfor %}</ul>{% endif %}</div>{{ form.submit }}</form>
</body>
</html>

运行结果

3. 文件上传

实现上传

from flask import render_template, request
from werkzeug.utils import secure_filename
import os
from flask_base import FlaskBaseUPLOAD_FOLDER = 'uploads'
ALLOWED_EXTENSIONS = {'txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'}FlaskBase.app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDERdef allowed_file(filename):return '.' in filename and \filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONSclass Test1(FlaskBase):def __init__(self):super().__init__()# 确保上传目录存在os.makedirs(UPLOAD_FOLDER, exist_ok=True)@staticmethod@FlaskBase.app.route('/upload', methods=['GET', 'POST'])def upload_file():if request.method == 'POST':# 检查是否有文件部分if 'file' not in request.files:return '没有文件部分'file = request.files['file']# 如果用户未选择文件，浏览器会提交一个没有文件名的空部分if file.filename == '':return '未选择文件'if file and allowed_file(file.filename):filename = secure_filename(file.filename)file.save(os.path.join(FlaskBase.app.config['UPLOAD_FOLDER'], filename))return f'文件 {filename} 上传成功'return render_template('upload_file.html')if __name__ == '__main__':test1 = Test1()test1.run()

upload_file.html
<title>上传文件</title>
<h1>上传文件</h1>
<form method="post" enctype="multipart/form-data"><input type="file" name="file"><input type="submit" value="上传">
</form>
http://www.xdnf.cn/news/7380.html

相关文章：

  • 【达梦数据库】过程、函数、包头和包体详解零基础
  • Linux串口绑定
  • 佰力博与您探讨绝缘材料介电性能测试的方法。
  • Linux权限练习题
  • C++：因子问题
  • 基于SpringBoot的小型民营加油站管理系统
  • 【JAVA】使用javax.mail发送qq邮件
  • Notepad++ 学习（三）使用python插件编写脚本：实现跳转指定标签页（自主研发）
  • [Linux排查] “Permission Denied“？一文解决Linux文件/目录权限不足问题
  • 头歌之软件工程-用例设计
  • 《中国智算中心市场发展研究报告》：算力政策与AI技术双重驱动下的供需两旺
  • 2025年即时通讯APP如何抵御DDoS攻击？全链路防御方案与实战解析
  • 10、底层注解-@Conditional条件装配
  • 绿幕抠图与虚拟背景：直播美颜SDK开发前沿技术探索
  • Keil 调试模式下拷贝Flash，RAM中的数据
  • 双周报Vol.72：字段级文档注释支持、视图类型现为值类型，减少内存分配
  • 实战手册--如何针对衡石分析平台的数据集成详解
  • 配电房值守难题终结者：EdgeView智能监控的7×24小时守护
  • ICU库交叉编译
  • 软件设计师关系代数和元组演算（关联、笛卡尔积、除、映射、分段等问题）考点分析——求三连
  • MCP与通讯模式：理论篇
  • 云服务器开发软件操作步骤
  • 微机系统第二章-题目整理
  • 数据治理进阶：精读45页深入浅出数据治理培训教材【附全文阅读】
  • Nginx基础知识
  • 学习BI---QuickBI介绍
  • 【find / -name “xxx“】为什么有时候搜索范围扩大之后,就无法找到
  • 预训练、指令微调与RLHF如何塑造LLM
  • 【AI论文】端到端视觉标记器调优
  • Typora编写Markdown文档（支持Mermaid）