版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
讲师：李粤平Flask课程——第三章模板了解静态网页与动态网页的区别掌握Jinja2模板引擎的使用方法掌握Flask-Bootstrap的使用方法学习目标Flask-Bootstrap模板简介Jinja2模板引擎小结模板简介01概念解释什么是模板？模板是一种通用的布局或结构，用于创建多个具有相似风格和功能的内容。在计算机编程和设计领域，模板是一个预定义的框架，其中包含了一些固定的元素、样式、格式或占位符，以便在特定场景中填充内容。使用模板可以帮助保持一致性、提高效率，并降低开发的重复性。简单来说的话，模板的作用是内容注入、页面继承与包含。Jinja2模板引擎02概念解释jinja2模板引擎是什么？Jinja2是一个流行的Python模板引擎，用于在Python应用程序中生成动态内容。模板引擎是一种将数据和模板结合，生成最终输出的工具。Jinja2允许开发者将动态数据嵌入到静态模板中，以生成HTML、XML、JSON等格式的输出。安装依赖我们在第一章的时候，已经把Jinja2模板一同下载了下来，如果有不清楚的话，可以打开cmd(命令提示符)，输入代码：pipinstalljinja2==2.11.3在使用模板时，所有静态资源应放置在“static”资源目录下，而模板页面应放置在“templates”模板目录下。我们要遵循一个思路，每当写一个模板页面，都要写他对应的视图函数，不然写了的页面就没法被浏览到。Jinja2模板引擎我们来举一个简单的例子，首先在“templates”模板目录下创建一个模板页面文件，如下图所示。Jinja2模板引擎然后在视图函数里面的代码如下所示。fromflaskimportFlask,render_template@app.route('/value')defvalue(username=None):returnrender_template('value.html')render_template用于渲染模板文件然后下面就是渲染名为'value.html'的模板文件，并将渲染后的内容返回给用户的浏览器。效果如下图所示。基本语法以下是3种基本语法，在接下来的代码中将会经常出现。（1）“{%...%}”为“控制”语句，常用于编写结构控制，定义模板、变量等。（2）“{{...}}”为“表达式”语句，常用于输出变量，调用宏指令、对象函数等。（3）“{#...#}”为“注释”语句，用于添加代码注解。基本语法（1）“{{...}}”为“表达式”语句，常用于输出变量，调用宏指令、对象函数等。代码例子如下<!DOCTYPEhtml><html><head><title>测试</title></head><body><h1>Hello,{{user}}</h1><p>Yourageis{{age}}</p></body></html>在这个示例中，使用表达式语句输出了user和age变量的值。基本语法（2）“{%...%}”为“控制”语句，常用于编写结构控制，定义模板、变量等。代码例子如下<!DOCTYPEhtml><html><head><title>测试</title></head><body>{%ifuser%}<h1>Hello,{{user}}!</h1>{%else%}<h1>Welcome,Guest!</h1>{%endif%}</body></html>在这个示例中，根据user变量的值，使用控制语句实现了一个简单的条件语句。基本语法（3）“{#...#}”为“注释”语句，用于添加代码注解。代码例子如下<!DOCTYPEhtml><html><head><title>测试</title></head><body><h1>Hello,{{user}}</h1>{#这是一个提示。下面会显示你的年龄#}<p>Yourageis${{age}}</p></body></html>在这个示例中，使用注释语句添加了一个代码注解，不会在最终输出中显示语法使用注释的使用方法和其他语言的注释用法一样，这里就略过注释用法，举例控制和表达式的使用方法。表达式的用法，拿注入变量举例，首先得从视图函数注入变量，再将需要显示到页面的变量在模板文件中使用“表达式”语句输出变量。视图函数代码如下@app.route('/value')@app.route('/value/<string:username>')defvalue(username=None):returnrender_template('value.html',username=username)表达式语句输入代码如下<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><title>注入变量</title></head><body>{#在"表达式"语句中，可使用"or"为变量添加默认值#}<h1>{{usernameor'游客'}}</h1><h2>欢迎使用！！！</h2></body></html>语法使用效果如下图所示无username的示例图有username的示例图语法使用控制用法，简单来说就像其他语言的if判断，举个文章列表的简单例子，也是先写视图函数，再写模板内容，视图函数代码如下。@app.route('/control')@app.route('/control/<int:num>')defcontrol(num=0):#此处使用list模拟文章列表articles=[]foriinrange(1,num+1):articles.append({'title':'文章%d标题'%i,'content':('文章%d的内容'%i)*i,})returnrender_template('control.html',num=num,articles=articles)语法使用模板(control.html)的代码如下，可以看到这些语句与Python的控制语句相似，同时又类似于HTML标签，控制语句需要使用如“{%endxxx%}”的格式，对前面的语句进行闭合。<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><title>控制结构</title></head><body><h1>文章列表</h1>{%ifnum<=0%}<h2>文章数量为0，没有内容可展示。</h2>{%else%}{%forarticleinarticles%}<h2>{{article.title}}</h2><p>{{article.content}}</p>{%endfor%}{%endif%}</body></html>语法使用效果图如下图所示。根据路径后面的参数，来改变效果模板的包含与继承前文提到，模板可以用于解决公共内容的冗余问题。例如，将公共部分的内容分离到一个单独的文件，再将模板加载到需要使用的页面中。如果按这种模式进行开发，在修改公共部分内容时，仅需要修改公共部分内容所处的文件，即可修改所有使用公共部分内容的页面，大大缩短修改各个页面的时间。模板的包含与继承模板的包含：模板的包含允许您将一个模板嵌入到另一个模板中，从而实现模块化和代码重用。这对于在多个页面中使用相同的组件或块非常有用。假设我们有一个简单的header.html模板，表示网站的页头部分，代码如下。<!DOCTYPEhtml><html><head><title>{{title}}</title></head><body><header><h1>testTitle</h1></header></body>模板的包含与继承demo.html的代码如下<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body>{%include'header.html'%}<p>Welcometoourwebsite!</p></body></html>{%include'header.html'%}这句代码就是代表着我们可以在不同的页面中引用这个页头部分。模板的包含与继承效果如下图所示。这便是模板的包含。模板的包含与继承模板的继承：模板的继承允许我们创建一个基础模板（称为父模板），定义其中的共同结构和占位符，然后创建子模板来填充实际内容。假设我们有一个简单的base.html模板，表示父模板，代码如下。<!DOCTYPEhtml><html><head><title>{%blocktitle%}DefaultTitle{%endblock%}</title></head><body><header><h1>{%blockheader%}DefaultHeader{%endblock%}</h1></header><main>{%blockcontent%}{%endblock%}</main></body></html>模板的包含与继承然后创建一个子模版来填充具体内容，同时覆盖掉父模板的内容，代码如下{%extends'base.html'%}{%blocktitle%}PageTitle{%endblock%}{%blockheader%}WelcometoMySite{%endblock%}{%blockcontent%}<p>Thisisthemaincontentofthepage.</p><p>Additionalcontentgoeshere.</p>{%endblock%}{%extends'base.html'%}这个就是用来继承我们的父模板在子模版使用，通过这种方式，我们可以将页面的结构和内容分开，使代码更加模块化和易于维护。父模板定义了整体结构，而子模板填充了特定内容。模板的包含与继承效果如下图所示。宏指令我们前面碰到的基本都是需要多次修改的静态内容，总不能想改动东西就天天去修改源码，那么如果我们想动态实现添加，删除，那该怎么办呢，我们就迎来一个新的概念，宏指令。比方说，我们要做一个常见的任务，比如创建一个HTML按钮，但稍后可能会用到不止一次。在这种情况下，我们可以使用Jinja2的宏来实现这一点。拿文章的增加和删除举例。我们按照视图函数，然后再写页面的思路来写，视图函数的代码如下。@app.route('/macro')@app.route('/macro/<int:num>')defmacro(num=0):#此处使用list模拟文章列表articles=[]foriinrange(1,num+1):articles.append({'title':'文章%d标题'%i,'content':('文章%d的内容'%i)*i,})returnrender_template('macro.html',num=num,num_prev=num-1,num_next=num+1,articles=articles)宏指令宏指令(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%}宏指令使用宏代码(macro.html)网页文件代码如下。{#宏指令可以定义在单独的文件，然后被其他文件所引入#}{%import'macro_define.html'asmacro%}{%blocktitle%}宏指令{%endblock%}{%blockinner_content%}{#宏指令的使用方法类似于函数#}{{macro.article_list(articles,num)}}{%ifnum>0%}<ahref="{{url_for('macro',num=num_prev)}}"class="btnbtn-primary">-1</a>{%endif%}<ahref="{{url_for('macro',num=num_next)}}"class="btnbtn-primary">+1</a>{%endblock%}宏指令效果如下图所示。可以看到，写好了宏，就只需要在网页去点击就能进行增加和删除内容，只需调用宏，而不必重复编写网页代码。注册全局对象在Jinja2模板引擎中，有的时候可以通过函数调用来获取数据，但是在继承的模板里面，如果需要调用某个固定的函数，通常需要在每一个使用被继承模板的视图函数中注入相应的函数（变量），但这显然不是推荐的操作方法。这时，需要注册全局对象。用到的函数是:app.add_template_global(需要注册的函数名，’别名’)。例子代码如下图所示。视图代码如下：#注册全局对象的类型不限，可以是任何类型（函数亦可）defrange_list(x):#该函数生成了数量为x的intlist（从0开始）returnlist(range(x))#将函数注册到全局对象中app.add_template_global(range_list,'global_test')@app.route('/global')defglobal_():returnrender_template('global.html')注册全局对象模板文件代码如下：{%blocktitle%}注册全局对象{%endblock%}{%blockinner_content%}{#此处将数字列表输出到页面中#}{{global_test(10)}}{%endblock%}效果如下图所示。变量过滤器变量过滤器是Jinja2中一种用于在模板中对变量进行修改或格式化的功能。您可以使用过滤器对变量进行操作，使其适应您的需求，如格式化日期、将文本转换为大写、截取字符串等。这个用到的函数：app.add_template_filterer(‘过滤器名称’)，视图函数代码如下：importtimedefconvert_time(t):returntime.strftime('%Y-%m-%d%H:%M:%S',time.localtime(t))#注册模板变量过滤器app.add_template_filter(convert_time)@app.route('/demo')defglobal_():returnrender_template('demo.html')变量过滤器页面代码(demo.html)如下：{#自定义变量过滤器，时间可通过time.time()获取#}<p>{{1572497288.095447|convert_time}}</p>效果如下图所示：Flask-Bootstrap03概念解释Flask-Bootstrap是什么？前面的内容中提到了Bootstrap前端框架，同时也通过手动引用、构建模板的方式，使用了Bootstrap框架。而在快速开发场景中，这种从零开始配置的方式并不适用。Flask-Bootstrap提供了一系列的基本模板，包含对资源的引用、一些快捷宏指令等。Flask-Bootstrap安装Flask-Bootstrap的方式和之前一样，打开命令提示符输入以下代码pipinstallflask-bootstrap==3.3.7安装成功如下图所示使用方法首先需要引入Flask-Bootstrap包中的Bootstrap类，然后在应用初始化之后，对Bootstrap实例进行初始化。代码如下fromflaskimportFlask,render_templatefromflask_bootstrapimportBootstrapapp=Flask(__name__)#flask_bootstrap初始化代码bootstrap=Bootstrap()bootstrap.init_app(app)#使用本地资源，禁用cdnbootstrap_cdns=app.extensions['bootstrap']['cdns']bootstrap_cdns['bootstrap']=bootstrap_cdns['local']bootstrap_cdns['jquery']=bootstrap_cdns['local']使用方法视图函数代码如下@app.route('/bootstrap')defbootstrap_flask():returnrender_template('bootstrap_flask.html')使用方法由于我们的模板文件代码继承了bootstrap的模板，为方便使用（定制），我们在Python安装目录/site-packages/flask_bootstrap/templates”中找到需要用的模板文件复制到当前项目。如下图所示。使用方法模板文件(bootstrap_flask.html)代码如下{%exte
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2025年合资协议签约样式格式范本
- 二零二五年度进口货车车辆买卖与售后服务保障合同3篇
- 二零二五年风机发电机组性能优化合同3篇
- 二零二五年度预制件加工与品牌建设合同3篇
- 2025年蔬菜配送与农产品电商合作合同范本2篇
- 2025贷款担保合同书模板范本
- 二零二五年度医院病房楼装修及医疗设备安装合同4篇
- 二零二五版建设工程施工担保合同参考范本3篇
- 空压机租赁合同范本
- 工程项目居间协议书
- GB/T 34241-2017卷式聚酰胺复合反渗透膜元件
- GB/T 12494-1990食品机械专用白油
- 运输供应商年度评价表
- 成熙高级英语听力脚本
- 北京语言大学保卫处管理岗位工作人员招考聘用【共500题附答案解析】模拟试卷
- 肺癌的诊治指南课件
- 人教版七年级下册数学全册完整版课件
- 商场装修改造施工组织设计
- 统编版一年级语文上册 第5单元教材解读 PPT
- 加减乘除混合运算600题直接打印
- ASCO7000系列GROUP5控制盘使用手册
评论
0/150
提交评论