《Python Web开发项目教程》教学设计 第3章 模板-教学设计

博学谷——让IT教学更简单，让IT学习更有效PAGE12PAGE7《PythonWeb开发项目教程》教学设计课程名称：___________________授课年级：___________________授课学期：___________________教师姓名：___________________年月课题名称第3章模板计划课时4课时教学引入虽然在Flask程序的视图函数中可以直接编写HTML代码，但实际开发Web应用时，完整页面往往有上百行甚至上千行HTML代码。如果将HTML代码全部嵌入视图函数中，这样不仅会导致项目代码变得冗余杂乱，而且使后续的修改和维护变得困难。为了规避这种情况，我们通常会将每个页面的HTML代码独立保存到专门的模板文件中，使程序的展示逻辑与业务逻辑分离开、也就是模板专注于页面的结构和渲染，视图函数专注于业务流程。本章将针对模板的相关内容进行介绍。教学目标使学生了解模板与模板引擎Jinja2，能够表述模板引擎和模板的作用使学生掌握模板变量的基本用法，能够在Jinja2模板中定义模板变量使学生掌握过滤器的使用方式，能够在Jinja2模板中使用过滤器过滤模板变量保存的数据使学生掌握选择结构的使用方式，能够在Jinja2模板中使用选择结构实现分支判断的功能使学生掌握循环结构的使用方式，能够通过循环结构对模板中的变量进行遍历使学生掌握宏的定义方式，能够通过macro和endmacro定义宏使学生掌握宏的调用方式，能够在Jinja2模板文件中灵活调用定义的宏使学生掌握消息闪现的实现方式，能够通过flash()函数和get_flashed_messages()函数实现消息闪现使学生掌握静态文件的加载方式，能够在Jinja2模板文件中加载静态文件使学生掌握模板继承机制，能够解决模板文件中的代码冗余问题教学重点模板变量过滤器选择结构循环结构消息闪现模板继承教学难点模板变量过滤器选择结构循环结构宏的定义教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程第一课时（模板与模板引擎Jinja2、模板变量、过滤器）复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。创设情境，导入新课同学们，在之前的Flask开发中，我们直接在视图函数里返回HTML代码，不仅代码杂乱，修改页面样式也十分麻烦。而模板技术能让我们把页面展示和业务逻辑彻底分开，Jinja2作为Flask自带的模板引擎，正是实现这一目标的核心工具。想要在页面中动态显示用户信息或者商品数据，模板变量可以帮我们传递数据；想要快速调整数据格式，比如给字符串首字母大写、给数字取绝对值，通过过滤器能够实现。今天我们就从模板与Jinja2的基础入手，学习模板变量的使用和过滤器的应用，让Flask页面开发更简洁、更灵活！三、新课讲解知识点1-模板与模板引擎Jinja2教师通过PPT结合实际操作的方式讲解模板与模板引擎Jinja2。（1）什么是模板与模板引擎模板：本质上就是基于文本格式的文件，支持HTML、XML、CSV等多种格式，实际开发中大部分为HTML格式，专门用于定义Web页面的展示形式。模板引擎：是连接模板与视图函数的核心工具，负责解析模板文件、处理动态内容并生成最终HTML。（2）使用模板eq\o\ac(○,1)创建模板eq\o\ac(○,2)使用Jinja2模板引擎渲染模板eq\o\ac(○,3)教师通过实操的形式讲解如何在Flask程序中使用模板。知识点2-模板变量教师通过PPT的方式讲解模板变量。（1）模板变量的概念模板变量是一种特殊的占位符，它专门用于标识模板中会动态变化的数据位置，当模板被渲染时，模板引擎会自动将模板中的变量替换为由视图函数传递的真实数据。（2）模板变量的语法格式变量名称应与视图函数中传递的关键字参数的名称相同。模板变量的命名规则与Python变量的命名规则相同。（3）演示在Flask程序中使用模板变量（4）特殊类型的模板变量若变量保存的数据是列表，则可以通过索引获取列表中的某个元素。若变量保存的数据是字典，则可以通过字典的键获取相应的值。若变量保存的数据是对象，则可以通过点字符访问对象中的属性或方法。知识点3-过滤器教师通过PPT结合实操的方式讲解什么是过滤器以及如何使用过滤器。（1）过滤器的作用过滤器是一种用于处理和转换模板变量的特殊函数，它允许开发者直接在模板中对变量进行格式化、转换或其他操作，不需要在视图函数中预先处理。（2）过滤器的语法格式（3）常用的内置过滤器abs()：返回数值变量的绝对值random()：从给定列表、元组等其他可迭代对象中随机返回一个元素safe()：将字符串变量标记为安全HTML,保证渲染时不进行转义tojson()：将给定对象转换为JSON格式的字符串escape()：将HTML特殊字符&、<、>、'、"转换为安全实体length()：返回变量值的长度sort()：对可迭代对象进行升序排序,内部调用Python的sorted()函数join()：使用指定符号将字符串中的字符连接成一个字符串,默认符号为空字符串int()：将值转换为整数，如果转换不起作用，返回0float()：将值转换为浮点数，如果转换不起作用，返回0.0capitalize()：将字符串变量的首字母转为大写,其余字母转为小写trim()：去除字符串变量开头和结尾的所有空白字符,包括空格、制表符、换行符等upper()：将字符串变量的所有字母转为大写（4）演示内置过滤器的使用（5）自定义过滤器自定义过滤器实质上是一个Python函数。使用装饰器app.template_filter()可以将自定义过滤器注册到过滤器列表中。（6）自定义过滤器的使用自定义过滤器的使用方式与内置过滤器的使用方式相同。四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第二课时（选择结构、循环结构、宏的定义、宏的调用）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、创设情境，导入新课同学们，上节课我们用模板变量和过滤器实现了简单的动态数据展示，但实际开发中还会遇到更复杂的场景——比如根据用户权限显示不同功能按钮、批量展示商品列表、重复使用表单输入框代码。这些需求该如何高效实现呢？今天我们就来学习Jinja2模板的核心逻辑控制与代码复用技巧，掌握选择结构实现分支判断、循环结构遍历批量数据，以及通过宏的定义与调用复用重复代码，让模板开发更高效、逻辑更清晰！新课讲解知识点1-选择结构教师通过PPT的方式讲解选择结构。（1）选择结构的作用Jinja2支持选择结构，选择结构是对模板中的动态内容进行逻辑控制的工具，它能够根据给定的条件选择性展示不同的页面内容。（2）选择结构的组成Jinja2提供了if、elif、else、endif，其中if、elif、else与Python关键字if、elif、else的含义相同，endif用于标识选择结构的末尾。（3）选择结构的语法格式if、elif、else、endif均使用{%%}进行包裹if和endif可以构建简单的单分支语句，它们与elif、else搭配可以构建更复杂的多分支语句。选择结构必须以{%endif%}结尾。（4）演示选择结构的使用知识点2-循环结构教师通过PPT的方式讲解循环结构。（1）循环结构的作用循环结构作用是循环遍历变量中的每个元素，以便在模板文件中使用这些元素。（2）循环结构的语法格式for、endfor均使用{%%}进行包裹。for标识循环结构的起始位置，endfor标识循环结构的结束位置。for、endfor都不能省略。（3）循环结构的使用（4）循环结构中常用的特殊变量loop.index：当前循环的迭代数，从1开始计数loop.index0：当前循环的迭代数，从0开始计数loop.revindex：当前反向循环的迭代数，从1开始计数loop.revindex0：当前反向循环的迭代数，从0开始计数loop.first：判断当前循环是否为第一次迭代,若是则返回Trueloop.last：判断当前循环是否为最后一次迭代,若是则返回Trueloop.length：当前循环的总迭代次数,对应所遍历的可迭代对象包含的元素数量loop.previtem：获取上一次迭代的元素,首次迭代时不可用,可能触发错误loop.nextitem：获取下一次迭代的元素,最后一次迭代时不可用,可能触发错误知识点3-宏的定义教师通过PPT的方式讲解宏的定义。（1）什么是宏模板中的宏与Python函数类似，它可以传递参数，但没有返回值。（2）宏的定义模板中的宏以macro标识开始，以endmacro标识结束。宏内部可以嵌套使用前文介绍的过滤器、选择结构、循环结构等。（3）宏的使用知识点4-宏的调用教师通过PPT结合实操的方式讲解宏的调用。（1）调用宏的语法格式（2）演示在程序中如何调用宏四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第三课时（消息闪现、静态文件的加载、模板继承）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、创设情境，导入新课同学们，前两节课我们掌握了模板的基础语法和逻辑控制，能实现动态数据展示，但实际Web开发中还需解决这些问题：用户操作后如何给出一次性反馈提示？页面中的CSS、图片等静态资源该如何规范加载？多个页面的导航栏、页脚等通用部分如何避免重复编码？今天我们就聚焦这些实战需求，学习消息闪现实现交互反馈、静态文件加载的规范方式，以及模板继承复用通用页面结构，让Flask模板开发更贴合实际项目场景！三、新课讲解知识点1-消息闪现教师通过PPT结合实操的方式讲解消息闪现。（1）什么是消息闪现Flask框架提供了一种简洁高效的反馈机制--消息闪现,它允许在当前请求完成后存储一条消息,并在下一次请求时将其展示给用户。（2）消息闪现的实现方式在视图函数中使用flash()函数发送消息。在模板中通过get_flashed_messages()函数获取消息。（3）获取消息闪现教师通过实操的形式在Flask程序中，通过flash()函数发送消息和get_flashed_messaged()函数获取消息闪现。知识点2-静态文件的加载教师通过PPT结合实操的方式讲解静态文件的加载。（1）加载静态文件的方式eq\o\ac(○,1)在项目中创建项目static文件夹，在该文件夹下添加静态文件。eq\o\ac(○,2)在模板文件中使用url_for()函数解析静态文件的URL，静态文件的URL规则默认为/static/<path:filename>。（2）加载静态文件的示例教师通过实操的形式在Flask程序的模板中加载test.png和test.css文件。知识点3-模板继承教师通过PPT的方式讲解模板继承。（1）模板继承机制的核心逻辑模板继承机制允许开发人员先在一个模板中定义多个页面的通用内容和样式，再以该模板为基础来拓展模板。包含通用内容和样式的模板称为基模板，继承基模板的模板称为子模板。（2）模板继承的方式模板继承通过block和extends实现，其中block用于标识与继承机制相关的代码块，extends用于指定子模板所继承的基模板。（3）模板继承的语法格式{%extends%}必须位于子模板的第一行，当模板引擎解析到{%extends%}时，模板引擎会将基模板中的内容完整的复制到子模板中。（4）定义块代码{%endblock%}中的块名称是为了避免块的混乱而使用的，也可省略。在同一个模板文件中，不能定义同名的块。若子模块与基模块的块名称相同，则会使用子模块的内容覆盖基模块的内容。四、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第四课时（上机练习）

上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的熟练程度。上机：（考察知识点为：模板变量、过滤器、选择结构、循环结构、消息闪现、模板继承）形式：单独完成1.实验目的（1）掌握模板变量的使用。（2）掌握过滤器的使用。（3）掌握选择结构的使