PythonWeb开发技术与应用（Flask版）（微课版）（第2版）-课件全套 第1-7章-Flask开发基础- - 实例简易博客系统

01CHAPTERFlask开发基础搭建开发环境，跑通第一个Web应用，理解请求—响应与状态管理4学时共21页《PythonWeb开发技术与应用》（Flask版·微课版·第2版）本章导览1.1Flask概述1.2Flask的安装与配置1.3一个简单的Web应用1.4请求与响应（请求信息/状态响应/Cookie/Session）1.5—1.7小结·习题·AI+拓展本章学时4学时理论讲授与机房实验交替推进，每节配套同步实操任务。PythonWeb开发技术与应用·第1章Flask开发基础02/21教学目标本章结束后，学生应能独立完成Flask环境搭建与一个带状态管理的简单应用。了了解静态页面与动态页面的区别；Web框架的作用与“微框架”的含义；HTTP请求—响应模型。理理解Flask与Django的定位差异；Flask对Jinja2与Werkzeug的依赖；HTTP无状态特性及其影响。掌掌握Python、pip镜像源、Flask、PyCharm的安装与配置；应用初始化、运行应用、路由与视图函数绑定。熟熟练掌握动态路由的定义与参数传递；request对象获取请求信息；状态码响应；Cookie与Session的读写与删除。PythonWeb开发技术与应用·第1章Flask开发基础03/21教学重点与难点重点要以现场编码反复强化，难点要用对比演示讲透。教学重点·Flask应用三大核心要素：应用初始化、运行应用、路由与视图函数绑定。·request对象获取请求信息（IP、路径、系统与浏览器）。·Cookie与Session的读写、删除操作。·动态路由的定义与参数传递。教学难点·Cookie与Session的区别与各自适用场景。·Session的安全存储方式：必须配置SECRET_KEY密钥。·HTTP无状态特性为何需要引入状态管理机制。·调试模式与生产模式的区别。PythonWeb开发技术与应用·第1章Flask开发基础04/21本章知识结构先见森林：本章沿着“认识框架→搭建环境→跑通应用→理解请求与状态”推进。1.1Flask概述微框架理念→1.2环境搭建pip·PyCharm→1.3第一个应用初始化·路由→1.4请求与响应request对象→1.4状态管理Cookie/Session三大核心要素：应用初始化、运行应用、路由与视图函数绑定。HTTP无状态→需要Cookie与Session维持会话。所有操作均在PyCharm中同步完成，讲练结合。PythonWeb开发技术与应用·第1章Flask开发基础05/211.1Flask概述Flask是当前最流行的PythonWeb框架之一，相较Django更为灵活、易用。Flask是什么使用Python编写的轻量级Web框架，专注于Web开发的核心能力，上手门槛低，生态活跃。微框架理念Flask仅提供核心功能，其他大部分功能以扩展模块的形式按需引入应用，结构更灵活。两大核心依赖默认依赖Jinja2模板引擎与WerkzeugWSGI工具箱，分别负责页面渲染与底层协议处理。与Django的对比Django自带全套组件、开箱即用；Flask轻巧灵活、可自由选型，更适合入门与中小型项目。PythonWeb开发技术与应用·第1章Flask开发基础06/211.2开发环境与软件版本版本统一是团队协作与课堂同步的前提，请严格按表中版本安装。软件版本说明Chrome140.0.7339.81开发环境浏览器，兼容性相对较优Python3.13.2Flask的运行基础，安装时勾选Addpython.exetoPATHFlask3.1.1Web框架主程序PyCharm20集成开发环境，专业版包含Flask开发优化Jinja23.1.4模板引擎，Flask默认依赖Werkzeug3.1.2WSGI工具箱，Flask默认依赖PythonWeb开发技术与应用·第1章Flask开发基础07/211.2.3配置镜像源并安装Flask先配置阿里云镜像源提升下载速度，再以管理员身份运行命令提示符安装指定版本。镜像源配置完成后需重新打开命令提示符才会生效。固定版本号安装，避免与教材示例出现行为差异。出现Successfullyinstalled…且无红色报错即安装成功。PythonWeb开发技术与应用·第1章Flask开发基础08/21#pip.ini（Windows路径：C:\Users\你的用户名\pip\pip.ini）[global]index-url=http:///pypi/simple/[install]trusted-host=

#以管理员身份运行命令提示符后执行pipinstallflask==3.1.1jinja2==3.1.4itsdangerous==2.2.0\markupsafe==2.1.5werkzeug==3.1.21.3应用初始化与运行应用创建所有Flask项目之前都必须先创建应用实例，这一过程称为应用初始化。__name__用于获取当前代码文件的文件名称。if__name__=="__main__"用于判断当前文件是否被直接运行。debug=True开启调试模式，代码修改后服务器自动重启。PythonWeb开发技术与应用·第1章Flask开发基础09/21fromflaskimportFlask

#应用初始化app=Flask(__name__)

@app.route('/')

def

hello_world():

return

'HelloWorld!'

#启动服务器，运行应用

if

__name__

==

'__main__':app.run(debug=True)1.3路由与视图函数绑定路由用于使Flask找到并映射URL对应的内容；被app.route装饰的函数即视图函数。URL解析Flask对用户请求中的URL进行解析，找到相应内容并返回浏览器。装饰器绑定@app.route()定义路由，确定URL与Python函数的映射关系。返回值视图函数可以返回简单字符串，也可以返回复杂的HTML页面。PythonWeb开发技术与应用·第1章Flask开发基础10/21@app.route('/')

def

hello_world():

return

'HelloWorld!'1.3动态路由URL中可变的部分用尖括号占位，访问时自动作为参数传入视图函数。访问/user/HsOjo时返回ThisisHsOjo。尖括号中的username为占位符，其值传入同名参数。常用于用户主页、文章详情页等“一物一址”的场景。PythonWeb开发技术与应用·第1章Flask开发基础11/21@app.route('/user/<username>')

def

user(username):

return

'Thisis%s'

%username1.4HTTP请求与响应HTTP是一个简单的“请求—响应”协议，属于无状态协议，对事务处理没有记忆能力。浏览器

发送请求Request→服务器

接收请求Flask→服务器

处理并返回Response→浏览器

渲染结果Render每一次交互都是完全独立的，服务器无法判断两次访问是否来自同一用户。无状态特性正是Cookie与Session存在的理由。理解这一点，就理解了Web开发的半壁江山。PythonWeb开发技术与应用·第1章Flask开发基础12/211.4.1请求信息request对象封装了本次请求的全部信息，是视图函数中获取数据的主要入口。获取IP地址request.remote_addr返回客户端的IP地址。获取请求路径request.path返回当前请求的路径部分。获取客户端环境request.user_agent可解析操作系统与浏览器信息。获取请求方法request.method返回GET或POST等请求方法。PythonWeb开发技术与应用·第1章Flask开发基础13/21fromflaskimportrequest

@app.route('/request')

def

request_info():

return

'IP：%s<br>路径：%s'

%(request.remote_addr,request.path,)1.4.2状态响应与常见状态码状态码用于告诉浏览器本次请求的处理结果，是最直接的调试线索。200OK请求成功，服务器已返回所请求的页面或数据，是最常见的响应状态。302Found重定向，服务器引导浏览器跳转到新地址，常用于登录后跳转。404NotFound请求的资源不存在，常见于URL输入错误或路由未定义。500ServerError服务器内部错误，常见于代码抛出异常且未被捕获处理。PythonWeb开发技术与应用·第1章Flask开发基础14/211.4.3Cookie的设置与读取Cookie保存在客户端浏览器中，适合存放非敏感的偏好信息。Cookie存储在客户端，用户可见可改，禁止存放密码等敏感信息。删除Cookie使用resp.delete_cookie("username")。PythonWeb开发技术与应用·第1章Flask开发基础15/21fromflaskimportmake_response,request

@app.route('/set_cookie')

def

set_cookie():resp=make_response('已设置Cookie')resp.set_cookie('username','admin')

returnresp

@app.route('/get_cookie')

def

get_cookie():

return

'Cookie：%s'

%request.cookies.get('username')1.4.4Session的机制与使用Session数据保存在服务器端，客户端只持有签名的sessionid，使用前必须设置SECRET_KEY。SECRET_KEY用于对会话内容签名，缺失时Session不可用。登录状态、购物车、权限信息等敏感数据应写入Session。PythonWeb开发技术与应用·第1章Flask开发基础16/21fromflaskimportsession

app.config['SECRET_KEY']=

'Chapter1'

@app.route('/login')

def

login():session['username']=

'admin'

return

'已记录登录状态'

@app.route('/logout')

def

logout():session.pop('username',None)

return

'已清除登录状态'Cookie与Session辨析二者都用于维持状态，但存储位置与安全级别完全不同，选择时以数据敏感性为准。对比项CookieSession存储位置客户端浏览器服务器端，客户端仅保存sessionid安全性较低，用户可查看与篡改较高，敏感数据不落地到客户端前置条件无需额外配置必须配置SECRET_KEY密钥典型用途记住用户名、主题偏好登录状态、购物车、权限信息生命周期可设置过期时间长期保存随会话结束或服务器清理而失效PythonWeb开发技术与应用·第1章Flask开发基础17/21本章配套实验实验以当堂验收方式评定，需提交可运行代码与简要说明。实验一验证型2学时Flask开发环境搭建、路由与请求响应：完成Chrome、Python、pip镜像源、Flask、PyCharm的安装配置，在PyCharm中创建并运行项目；实现动态路由页面，读取请求信息，完成Cookie与Session的写入、读取与删除。PythonWeb开发技术与应用·第1章Flask开发基础18/21课程思政与AI+拓展一章一融入：技术之外，建立工程态度与AI素养。课程思政融入点对比国内外IDE与开源框架生态，引导学生认识自主软件生态的重要性；通过统一版本、规范配置与规范命名，培养严谨细致的工程态度。AI+拓展活动在PyCharm中安装AI编程助手插件，由AI生成Flask路由与视图函数代码，再逐行验证其正确性与安全性，讨论AI生成代码的潜在隐患。PythonWeb开发技术与应用·第1章Flask开发基础19/21本章小结与作业本章完成了从环境到状态管理的完整闭环。1Flask是轻量级微框架，默认依赖Jinja2与Werkzeug，功能以扩展形式按需引入。2三大核心要素：应用初始化、运行应用、路由与视图函数绑定。3动态路由用尖括号占位，把URL中的可变部分作为参数传入视图函数。4request对象承载请求信息；状态码反映处理结果。5HTTP无状态，Cookie存客户端、Session存服务器端，敏感状态一律用Session。课后作业完成教材1.6单选题与判断题；独立实现一个包含动态路由与Session登录状态的小应用，并提交运行截图与源码。PythonWeb开发技术与应用·第1章Flask开发基础20/21本节内容到此结束思考·练习·动手下一章：第2章Web前端基础02CHAPTERWeb前端基础HTML·CSS·JavaScript·Bootstrap，构建规范美观的响应式页面8学时共22页《PythonWeb开发技术与应用》（Flask版·微课版·第2版）本章导览2.1Web前端概述2.2HTML基础（语法·标题·文本/图像/链接·表格·表单·CSS·JavaScript）2.3Bootstrap前端框架（使用·网格系统·表单美化）2.4—2.6小结·习题·AI+拓展本章学时8学时理论讲授与机房实验交替推进，每节配套同步实操任务。PythonWeb开发技术与应用·第2章Web前端基础02/22教学目标本章是全课程的“门面工程”：先会写结构，再会调样式，最后用框架提效。了了解HTML、CSS、JavaScript三者在Web开发中的分工；Bootstrap框架的定位与优势。理理解HTML头部与主体的划分；内联样式、内部样式表、外部样式表的差异；响应式设计的基本原理。掌掌握标签对语法与常用元素（标题、文本、图像、链接、表格、表单）的编写；CSS选择器；JavaScript事件绑定。熟熟练掌握Bootstrap5.3.8静态资源引入、12列网格系统、多端断点类（col-md-/col-sm-）与表单美化。PythonWeb开发技术与应用·第2章Web前端基础03/22教学重点与难点表单与网格系统是本章的两大支柱，也是后续章节反复使用的工具。教学重点·表单元素（input、textarea、select）与form提交机制。·Bootstrap12列网格系统与容器、行、列的组织方式。·HTML标签对语法与常用元素的规范书写。·CSS三种引入方式与选择器。教学难点·响应式断点类名（col-xs-到col-xxl-）的组合使用。·JavaScript事件（onsubmit、onclick、onchange）的拦截与处理。·HTML头部与主体、行内与外部样式的边界划分。·表格跨行跨列（rowspan/colspan）的布局计算。PythonWeb开发技术与应用·第2章Web前端基础04/22本章知识结构前端三要素各司其职，Bootstrap把三者封装成可复用的组件体系。Web前端技术体系HTML结构骨架CSS视觉样式JavaScript交互行为Bootstrap响应式框架HTML决定页面有什么，CSS决定长什么样，JavaScript决定怎么动。Bootstrap=现成的CSS+JavaScript组件库，网格系统是核心。第3章起，页面统一交给Jinja2模板与Bootstrap-Flask管理。PythonWeb开发技术与应用·第2章Web前端基础05/222.1Web前端概述一个网页由三种技术协作完成，理解分工是写出规范页面的第一步。HTML·结构超文本标记语言，用标签对描述页面内容与结构，是页面的骨架。CSS·样式层叠样式表，控制颜色、字体、间距与布局，负责页面的“颜值”。JavaScript·行为脚本语言，绑定事件、校验数据、操作页面元素，负责页面的“动作”。Bootstrap·框架开源前端框架，提供网格系统与成品组件，一套代码适配多种设备。PythonWeb开发技术与应用·第2章Web前端基础06/222.2.1–2.2.2基本语法与页面标题HTML使用标签对描述内容，标签可携带属性；head中放元信息，body中放可见内容。标签绝大多数成对出现：...，斜杠表示结束。属性写在开始标签中，如lang="zh"、charset="UTF-8"。title显示在浏览器标签页上，是页面的“名字”。PythonWeb开发技术与应用·第2章Web前端基础07/22<!DOCTYPE

html><html

lang="zh"><head><meta

charset="UTF-8"><title>我的第一个网页</title></head><body>

<!--一级标题，页面中最重要的文字--><h1>欢迎使用Flask</h1><h2>二级标题</h2><h3>三级标题</h3></body></html>2.2.3文本、图像与链接文本、图像与超链接是网页最基础的三类内容元素。img的alt属性在图片无法加载时显示，也是无障碍访问的要求。a标签的href可以是外部网址，也可以是站内相对路径。常见文本标签：b加粗、i倾斜、u下划线、br换行。PythonWeb开发技术与应用·第2章Web前端基础08/22<p>这是一段<b>加粗</b>与<i>倾斜</i>的文本。</p>

<!--图像：src指定路径，alt为替代文本--><img

src="static/flask.png"

alt="Flask标志"

width="200">

<!--链接：href指定目标地址，target控制打开方式--><a

href=""

target="_blank">Flask官方文档</a>

<!--无序列表--><ul><li>列表项一</li><li>列表项二</li></ul>2.2.4表格表格由table、tr、th、td组成，rowspan与colspan实现跨行跨列。th为表头单元格，默认加粗居中；td为数据单元格。tr表示一行，单元格数量需与跨行跨列后的布局一致。PythonWeb开发技术与应用·第2章Web前端基础09/22<table

border="1"><tr><th>姓名</th><th>课程</th><th>成绩</th></tr><tr><td>张三</td>

<!--colspan：该单元格横向占据2列--><td

colspan="2">Web开发·95</td></tr><tr>

<!--rowspan：该单元格纵向占据2行--><td

rowspan="2">李四</td><td>Python</td><td>92</td></tr><tr><td>Flask</td><td>88</td></tr></table>2.2.5表单表单是用户与服务器交互的核心载体，form的action与method决定数据去向。name属性是数据提交的键，服务器端按name取值。radio同名互斥单选，checkbox可多选。submit按钮触发提交，数据按method发送到action。PythonWeb开发技术与应用·第2章Web前端基础10/22<form

action="/login"

method="post"><p>用户名：<input

type="text"

name="username"></p><p>密码：<input

type="password"

name="password"></p><p>性别：<input

type="radio"

name="sex"

value="1">男<input

type="radio"

name="sex"

value="2">女</p><p>特长：<input

type="checkbox"

name="skill"

value="dev">软件开发<input

type="checkbox"

name="skill"

value="ops">系统运维</p><p>学历：<select

name="edu"><option

value="0">保密</option><option

value="4">本科及以上</option></select></p><p>简介：<textarea

name="intro"

rows="3"></textarea></p><p><input

type="submit"

value="登录"></p></form>常用表单控件速查type属性决定input的形态，记住高频控件即可覆盖大多数场景。控件写法形态典型用途inputtype="text"单行文本框用户名、标题、搜索关键词inputtype="password"密码框（掩码显示）登录密码inputtype="radio"单选按钮性别、单选项inputtype="checkbox"复选框多选特长、批量选择select/option下拉列表学历、分类选择textarea多行文本域自我介绍、文章内容inputtype="file"文件选择头像、附件上传inputtype="submit"提交按钮触发表单提交PythonWeb开发技术与应用·第2章Web前端基础11/22GET与POST的取舍method决定表单数据的传递方式，也是第4章Flask-WTF的前置知识。对比项GETPOST数据位置拼接在URL后（?key=value）放在请求体中可见性地址栏可见，可被收藏、缓存不显示在地址栏数据量受URL长度限制理论上无限制典型场景搜索、筛选、分页登录、注册、上传文件Flask取值request.argsrequest.formPythonWeb开发技术与应用·第2章Web前端基础12/222.2.6使用CSS调整样式CSS有三种引入方式：内联样式、内部样式表与外部样式表；选择器决定样式作用于谁。内联样式优先级最高，但不利于复用与维护。外部样式表一次编写、多页共享，是项目开发的标准做法。常用属性：color、font-size、background、margin、padding、border。PythonWeb开发技术与应用·第2章Web前端基础13/22<!--1.内联样式：写在标签的style属性中--><p

style="color:#2F80ED;font-size:18px;">蓝色文字</p><head>

<!--2.内部样式表：写在style标签对中--><style>

/*标签选择器*/

p{line-height:1.6;}

/*类选择器*/

.title{color:#0E3A70;font-weight:bold;}

/*id选择器*/

#main{width:960px;margin:0

auto;}</style>

<!--3.外部样式表：引入独立css文件（推荐）--><link

rel="stylesheet"

href="static/style.css"></head>2.2.7使用JavaScript绑定事件JavaScript通过事件响应用户操作，onsubmit拦截是客户端数据校验的关键。onsubmit返回false时表单不会提交，实现客户端拦截。常用事件：onclick单击、onchange值改变、onmouseover悬停。客户端校验可提升体验，服务器端校验才是安全底线。PythonWeb开发技术与应用·第2章Web前端基础14/22<form

action="/login"

method="post"

onsubmit="return

checkForm()"><input

type="text"

id="username"

name="username"><input

type="password"

id="password"

name="password"><input

type="submit"

value="登录"></form><script>

function

checkForm(){

varu=document.getElementById('username').value;

varp=document.getElementById('password').value;

if(u===

''

||p===

''){

alert('用户名和密码不能为空');

return

false;//返回false阻止表单提交}

return

true;}</script>2.3.1使用Bootstrap引入Bootstrap静态资源后，即可直接使用其网格类与组件类。viewport设置保证移动端正确缩放，是响应式的前提。class即“类名”，如btn-primary一行代码获得成品样式。本书使用Bootstrap5.3.8本地静态资源。PythonWeb开发技术与应用·第2章Web前端基础15/22<!DOCTYPE

html><html

lang="zh"><head><meta

charset="UTF-8"><meta

name="viewport"

content="width=device-width,initial-scale=1">

<!--引入Bootstrap样式--><link

rel="stylesheet"

href="static/bootstrap.min.css"><title>Bootstrap入门</title></head><body><div

class="container"><h1

class="text-centertext-primary">标题居中并着色</h1><button

class="btnbtn-primary">主要按钮</button></div>

<!--引入Bootstrap脚本（含交互组件）--><script

src="static/bootstrap.bundle.min.js"></script></body></html>2.3.2网格系统所有行（row）都放在容器（container）内，每行最多划分12列，超过自动换行。container负责整体定位与尺寸，row划分行，col划分列。col-md-3表示在md及以上设备占3/12宽度。列内可再嵌套row，实现复杂布局。PythonWeb开发技术与应用·第2章Web前端基础16/22<div

class="container"><div

class="row">

<!--中型及以上设备：左3列+右9列--><div

class="col-md-3"><h4>第一列</h4><p>这是一段文字。</p></div><div

class="col-md-9"><h4>第二列：内部再分为两列</h4><div

class="row"><div

class="col-md-6"><p>子列一</p></div><div

class="col-md-6"><p>子列二</p></div></div></div></div></div>响应式断点类对照col-断点-列数：断点表示“该宽度及以上”生效，小屏未指定时自动单列堆叠。缩写设备断点宽度col-xs-超小型设备（手机竖屏）小于576pxcol-sm-小型设备（手机横屏）≥576pxcol-md-中型设备（平板）≥768pxcol-lg-大型设备（笔记本）≥992pxcol-xl-超大型设备（台式机）≥1200pxcol-xxl-超超大型设备≥1400pxPythonWeb开发技术与应用·第2章Web前端基础17/222.3.3表单美化同样的表单，用Bootstrap类名几乎零成本获得规整的布局与交互状态。原生表单的问题·各浏览器默认样式不一致，观感参差。·控件间距、对齐需要手写大量CSS。·校验错误提示没有统一样式。·不同分辨率下布局容易错乱。Bootstrap的做法·form-control一行让输入框获得统一圆角与聚焦效果。·row+col控制标签与控件的比例。·btnbtn-primary生成成品按钮。·第4章Bootstrap-Flask的render_form直接复用这套体系。PythonWeb开发技术与应用·第2章Web前端基础18/22本章配套实验两个设计型实验，产出直接作为第4章表单开发的页面素材。实验二设计型2学时HTML页面结构与表单设计：综合运用标题、文本、图像、链接、表格与表单元素，完成一个结构完整的登录页面。实验三设计型2学时CSS、JavaScript与Bootstrap响应式布局：为登录页面添加外部样式表与onsubmit客户端校验，并用网格系统重构，实现PC端三列、移动端单列。PythonWeb开发技术与应用·第2章Web前端基础19/22课程思政与AI+拓展技术之外：页面为谁而做？课程思政融入点从页面可用性与信息无障碍切入，讨论alt属性、对比度、键盘可达性，培养“以用户为中心”的设计伦理与信息普惠意识。AI+拓展活动使用Vercelv0、Builder.io等AI前端生成工具，由自然语言生成原型页面，评估生成结果是否符合无障碍标准并动手优化。PythonWeb开发技术与应用·第2章Web前端基础20/22本章小结与作业从手写结构到框架提效，前端三要素+Bootstrap构成完整工具链。1HTML提供结构：标签对语法、标题、文本、图像、链接、表格、表单。2表单通过form提交，name是数据的键；GET拼URL，POST走请求体。3CSS三种引入方式，选择器决定作用范围；外部样式表是项目首选。4JavaScript通过事件响应用户，onsubmit返回false可拦截提交。5Bootstrap网格系统：container→row→col-断点-列数，一行最多12列。课后作业完成教材2.5习题；用Bootstrap重构第1章登录页面，实现PC端三列、移动端单列，并截图对比重构前后效果。PythonWeb开发技术与应用·第2章Web前端基础21/22本节内容到此结束思考·练习·动手下一章：第3章

使用灵活的模板03CHAPTER使用灵活的模板Jinja2模板引擎：变量注入、控制结构、继承复用与Bootstrap-Flask6学时共20页《PythonWeb开发技术与应用》（Flask版·微课版·第2版）本章导览3.1模板简介3.2Jinja2模板引擎（语法·变量·链接·控制结构·继承·宏·过滤器）3.3Bootstrap-Flask3.4—3.6小结·习题·AI+拓展本章学时6学时理论讲授与机房实验交替推进，每节配套同步实操任务。PythonWeb开发技术与应用·第3章

使用灵活的模板02/20教学目标模板是前后端的接口层：把“写死的HTML”变成“会呼吸的页面”。了了解静态资源与动态资源的区别；模板解决的问题；Bootstrap-Flask相比手工引入的优势。理理解templates与static目录的组织约定；模板继承与包含的差异与适用边界。掌掌握三种基本语法；变量注入；url_for()生成链接；if/for控制结构。熟熟练掌握extends与block基本模板；include与macro复用片段；注册全局对象；内置与自定义过滤器。PythonWeb开发技术与应用·第3章

使用灵活的模板03/20教学重点与难点“一次修改、全局生效”是模板的核心价值，也是本章反复强调的抽象思维。教学重点·render_template()渲染模板并注入变量。·模板继承模式下公共内容（导航栏、页尾）的抽象与复用。·宏指令批量生成列表项。·url_for()生成静态资源与视图链接。教学难点·super()的调用时机：保留父模板内容再追加。·块嵌套与宏指令传参。·过滤器的链式调用与safe的安全边界。·继承与包含的选型：结构复用用继承，片段复用用包含。PythonWeb开发技术与应用·第3章

使用灵活的模板04/20本章知识结构从“渲染一个模板”到“搭起整站骨架”，层层递进。3.1模板简介templates目录→3.2基础语法变量与链接→3.2控制结构if/for→3.2继承与宏复用骨架→3.3Bootstrap-Flask组件化渲染视图函数准备数据→模板负责展示，实现前后端分工。继承解决“整页骨架复用”，宏解决“片段批量生成”。本章的base.html将直接用于第7章博客项目。PythonWeb开发技术与应用·第3章

使用灵活的模板05/203.1模板简介没有模板的Web开发，等于把HTML硬编码在Python字符串里。痛点页面写死在视图函数中，HTML与Python混杂，修改一处要动多处，无法复用。模板的定位templates目录中的HTML文件，负责页面结构；视图函数把数据“注入”模板完成渲染。静态资源static目录存放CSS、JavaScript、图片等固定文件，由url_for()生成访问链接。目录约定项目根目录下建立templates与static两个目录，Flask按约定自动查找。PythonWeb开发技术与应用·第3章

使用灵活的模板06/203.2.1–3.2.3渲染模板与变量注入Jinja2三种语法各司其职：变量输出、语句控制、注释说明。双花括号输出变量或表达式，百分号花括号书写语句，井号花括号书写注释。注入的变量名与模板中的名字一一对应。模板文件默认放在templates目录下。PythonWeb开发技术与应用·第3章

使用灵活的模板07/20#视图函数：render_template渲染模板并注入变量

@app.route('/user/<name>')

def

user(name):

returnrender_template('user.html',username=name)

<!--模板文件templates/user.html-->

<h1>你好，{{username}}</h1>{#这是注释，渲染后不会出现在页面中#}{%

ifusername==

'admin'

%}

<p>欢迎回来，管理员。</p>{%endif%}3.2.4生成链接用url_for()生成链接，路由变更时页面链接自动跟随，避免硬编码。第一个参数是视图函数名（endpoint），后续以关键字参数填充路由变量。static是Flask内置端点，filename指定static目录下的相对路径。推荐所有链接一律用url_for()，禁止手写死路径。PythonWeb开发技术与应用·第3章

使用灵活的模板08/20<!--链接到视图函数-->

<ahref="{{url_for('user',name='HsOjo')}}">用户主页</a>

<!--链接到静态资源-->

<linkrel="stylesheet"href="{{url_for('static',filename='bootstrap.min.css')}}">

<scriptsrc="{{url_for('static',filename='bootstrap.bundle.min.js')}}">

</script>3.2.5控制结构if/for让模板具备逻辑能力，循环变量loop提供索引与奇偶信息。if/elif/else与Python语义一致。for可遍历列表、字典；loop变量提供index、first、last等。循环体支持else分支：序列为空时执行。PythonWeb开发技术与应用·第3章

使用灵活的模板09/20{%

ifnum>

0

%}

<p>共{{num}}篇文章</p>{%

elifnum==

0

%}

<p>暂无文章</p>{%

else

%}

<p>参数非法</p>{%endif%}<ul>{%

forarticleinarticles%}{#loop.index从1开始递增，loop.index0从0开始#}

<liclass="{{'odd'ifloop.indexisdivisibleby(2)else

'even'}}">{{loop.index}}.{{article.title}}

</li>{%endfor%}

</ul>3.2.6模板包含把公共内容拆到独立文件，用include加载到需要的页面中。include_nav.html是独立的导航栏文件，被多个页面包含。修改导航栏只需改这一个文件，所有页面同时生效。包含适合复用“片段”，如导航栏、页尾、分页条。PythonWeb开发技术与应用·第3章

使用灵活的模板10/20<!--页面文件：在需要的位置加载导航栏-->

<!DOCTYPEhtml>

<htmllang="zh">

<head>

<metacharset="UTF-8">

<title>模板包含演示</title>

<linkrel="stylesheet"href="{{url_for('static',filename='bootstrap.min.css')}}">

</head>

<body>{%include'include_nav.html'

%}

<divclass="container">

<h1>页面正文</h1>

</div>

</body>

</html>3.2.6模板继承基准页用block预留区块，子模板extends后只填充自己的内容。block定义区块，子模板同名覆盖；多级继承可搭出整站骨架。super()用于保留父模板内容：常用于追加脚本与样式。继承解决“整页骨架复用”，是公共导航栏的最佳载体。PythonWeb开发技术与应用·第3章

使用灵活的模板11/20<!--基准页base.html：定义可被修改的区块-->

<html>

<head>

<title>{%blocktitle%}{%endblock%}</title>{%blockhead%}{%endblock%}

</head>

<body>{%blockcontent%}{%endblock%}{%blockscript%}{%endblock%}

</body>

</html><!--子模板：继承基准页并填充区块-->{%extends'base.html'

%}{%blocktitle%}模板继承{%endblock%}{%blockcontent%}

<h1>子页面的内容</h1>{%endblock%}{%blockscript%}{{super()}}{#保留父模板该区块的内容，再追加新内容#}

<script>/*页面专属脚本*/</script>{%endblock%}包含与继承的选型两者都为复用而生，但复用的粒度与方向不同。对比项模板包含include模板继承extends复用方向把片段“装进”当前页面子页面“填充”父模板骨架复用粒度局部片段（导航栏、页尾）整页结构（title、head、content）典型场景多个页面都要出现的一小块内容整站统一的布局与资源加载内容覆盖不可覆盖，原样加载block同名覆盖，super()可保留本书实践include_nav.html导航栏base.html→extends_bootstrap.htmlPythonWeb开发技术与应用·第3章

使用灵活的模板12/203.2.7宏指令宏类似Python函数：带参数、可调用、可嵌套，适合批量生成同构内容。宏可定义在独立文件中，用import导入后以别名调用。宏可以嵌套调用：列表宏内部调用条目宏。首页与文章列表页共用article_list，消除重复代码。PythonWeb开发技术与应用·第3章

使用灵活的模板13/20<!--宏定义文件macro_define.html-->{%macroarticle_item(title,content)%}

<h2>{{title}}</h2>

<p>{{content}}</p>{%endmacro%}{%macroarticle_list(articles,article_num)%}{%

ifarticle_num<=

0

%}

<h2>文章数量为0，没有内容可展示。</h2>{%

else

%}{%

forarticleinarticles%}{{article_item(article.title,article.content)}}{%endfor%}{%endif%}{%endmacro%}

<!--使用宏的页面：先导入，再像函数一样调用-->{%

import

'macro_define.html'

asmacro%}{{macro.article_list(articles,num)}}3.2.8注册全局对象把常用函数注册为全局对象后，所有模板无需视图函数注入即可直接调用。注册后所有模板可用，省去逐个视图函数注入的重复劳动。第7章将把load_setting()等函数注册为全局对象。注意：注册操作需在应用初始化阶段完成。PythonWeb开发技术与应用·第3章

使用灵活的模板14/20#注册全局对象的类型不限，函数亦可

def

range_list(x):

#生成元素数量为x的int类型列表

return

list(range(x))

#将函数注册到全局对象app.add_template_global(range_list,'global_test')@app.route('/global')

def

global_():

#模板中可直接调用，视图函数无需注入任何变量

returnrender_template('global.html')

<!--模板中直接调用-->{{global_test(10)}}3.2.9变量过滤器过滤器用竖线调用，对变量做轻量处理；safe与escape涉及安全，务必谨慎。safe只用于可信内容，滥用会引入XSS风险。过滤器可链式调用：value|trim|truncate(10)。convert_time将在第7章文章列表中反复使用。PythonWeb开发技术与应用·第3章

使用灵活的模板15/20{#常用内置过滤器#}{{'test'

|capitalize}}{#首字母大写#}{{'TEST'

|lower}}{{'test'

|upper}}{{'内容'

|trim}}{#清除首尾空格#}{{1.5

|

round}}{#四舍五入#}{{undefined|default('默认值')}}{{'很长的一段内容'

|truncate(8)}}{#安全相关：三者行为完全不同#}{{html_str|safe}}{#保留HTML实体，不转义#}{{html_str|escape}}{#对HTML实体字符转义#}{{html_str|striptags}}{#清除字符串中的HTML标签#}

#自定义过滤器：注册后即可在模板中使用

defconvert_time(t):

returntime.strftime('%Y-%m-%d%H:%M:%S',time.localtime(t))app.add_template_filter(convert_time)3.3Bootstrap-Flask把Bootstrap的引入与组件渲染封装成宏指令，模板里一行代码搞定。bootstrap/base.html已引入全套静态资源，无需手写link与script。render_form等宏指令可一键渲染表单、分页、消息。BOOTSTRAP5_LOCAL_RESOURCES指定本地资源路径。PythonWeb开发技术与应用·第3章

使用灵活的模板16/20#安装：pipinstallbootstrap-flask==2.5.0

fromflask_bootstrapimportBootstrap5

bootstrap=Bootstrap5()bootstrap.init_app(app)

app.config['BOOTSTRAP5_LOCAL_RESOURCES']={

'css':'static/bootstrap.min.css',

'js':'static/bootstrap.bundle.min.js',}<!--模板中使用：继承其基准页，调用宏渲染组件-->{%extends'bootstrap/base.html'

%}{%

from

'bootstrap5/form.html'

importrender_form%}{%blockcontent%}

<divclass="container">{{render_form(form,form_type='basic')}}

</div>{%endblock%}本章配套实验实验四练基本功，实验五练复用能力，产出base.html直接进入第7章。实验四验证型2学时Jinja2模板渲染、变量注入与控制结构：完成render_template渲染、三种语法、url_for与if/for练习。实验五设计型1学时模板继承与包含、宏指令、过滤器与Bootstrap-Flask：建立base.html基本模板，抽象导航栏与页尾，用宏指令渲染文章列表。PythonWeb开发技术与应用·第3章

使用灵活的模板17/20课程思政与AI+拓展抽象即效率，复用即规范。课程思政融入点以“一次修改、全局生效”的抽象思维培养工匠精神与规范化意识；讨论模板与第三方UI资源的开源协议与知识产权，养成尊重原创的习惯。AI+拓展活动调用大模型生成个性化文案，通过模板变量注入页面实现动态内容填充，体验“AI生成内容+模板负责结构”的分工模式。PythonWeb开发技术与应用·第3章

使用灵活的模板18/20本章小结与作业模板层把数据与页面解耦，是全课程工程化的起点。1三种基本语法：双花括号输出变量，百分号花括号写语句，井号花括号写注释。2url_for()统一生成视图与静态资源链接，杜绝硬编码。3包含复用片段，继承复用骨架，super()保留父级内容。4宏指令像函数一样批量生成同构内容，可嵌套、可导入。5过滤器轻量处理变量；safe有安全边界；Bootstrap-Flask组件化渲染。课后作业完成教材3.5习题；为博客项目建立base.html基本模板，抽象导航栏与页尾，并用宏指令渲染一组文章列表。PythonWeb开发技术与应用·第3章

使用灵活的模板19/20本节内容到此结束思考·练习·动手下一章：第4章

如何与用户进行交互04CHAPTER如何与用户进行交互表单交互·Flask-WTF·消息反馈·Flask-CKEditor富文本8学时共20页《PythonWeb开发技术与应用》（Flask版·微课版·第2版）本章导览4.1表单（基本交互·文件上传）4.2Flask-WTF（表单类·渲染·处理与验证）4.3消息反馈（闪现消息·自定义错误页面）4.4Flask-CKEditor（富文本·图像上传）4.5—4.7小结·习题·AI+拓展本章学时8