Flask框架四:模板继承以及豆瓣案例
1、模板继承
①为什么会有模板继承而不用include调用模板:include是引用模板的标签,将模板的内容直接显示,但是当页面有变化的时候,比如多了一个侧边栏的内容,或者想改输入框为按钮,这时候就要去改模板或者创建多个include文件,为了简化代码提高代码复用性,模板继承就应运而生,和类的继承一样,可以重写父模板的方法
②子模版只能通过block继承和重写父模板的内容,block可以嵌套使用,但是block的名字一定不能重复,接下来以父、子模板,以及引用模块举例在flask中如何使用模板继承
③父模板(用html写在templates里面,子模板继承的模板,一般都是固定框架,详情页面通过子模版去写)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>{% block title %}Title{% endblock %}</title>
</head>
<body>
{% block header %}<ul><li>首页</li><li>课程详情</li><li>视频教程</li><li>关于我们</li></ul>{% endblock %}{% block content %}<h1>这是首页</h1>
{% endblock %}
<!--block可以嵌套使用但是不能重名-->
{% block footer%}
<div class="footer">{% block little%}这是网站底部{% endblock %}
</div>
{% endblock %}
<!--一个地方需要用到另外一个block中的内容,可以使用self.blockname的方式进行引用-->
<p>{{ self.title() }}</p></body>
</html>
④子模版(用html写在templates里面,继承父模板的内容,写详情页面的逻辑)
{% extends 'father_template.html' %}
<!--模板的继承要放在block的前面,不然定义在extends的内容block会单独显示出来-->
<!--上边的一句话代表继承父模板,子模版只能通过block重写父模板的内容,
单独写的标签不会被渲染出来的,页面不能多继承,只能继承一个父模板-->
{% block title%}
<!--用super可以实现调用父模板中的额标签,类似于python类中的super继承父类的方法-->
{{super()}}
我是子模块标题,我通过title修改了父模板的block
{% endblock %}
{% block content%}
我是子模块标题,我通过title修改了父模板的block
{% endblock %}
<!--可以根据父模板的block的名字修改内容,子模板只能改父模板的内容-->
{% block little%}
heiheihei
{% endblock %}
⑤py文件(调用子模块显示页面内容,实现逻辑要求,运行python文件就可以看到效果)
from flask import Flask,render_templateapp = Flask(__name__)
app.config['TEMPLATES_AUTO_RELOAD']=True
# 配置自动加载模板文件,调试模式下会自动开启
@app.route('/')
def index():# return render_template('index.html')# return render_template('father_template.html')return render_template('son_template.html')@app.route('/list/')
def list_article():return render_template('list.html')if __name__ == '__main__':app.run(debug=True) # 开启调试模式
2、静态文件的配置
使用CSS样式文件、JavaScript脚本文件、图片文件、字体文件等静态资源使得页面变得更加的美观。在Jinja中加载静态文件非常简单,只需要通过url_for全局函数就可以实现,要注意flask中的文件,源码中都固定好了它的名称(也可以通过改参数修改文件名称,但是最好不要变),默认文件层级关系如下,通过app = Flask( __ name__,static_folder=‘C:\static’)可以修改文件名称,点击ctrl+鼠标左键也可以去查看flask的源码,它的init初识化方法已经限定了很多默认值(可以修改),一般用默认值就好
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="{{ url_for('static', filename='css/index.css')}}"><script src="{{ url_for('static', filename='js/index.js')}}"></script>
</head>
<body>
<ul><li>首页</li><li>课程详情</li><li>视频教程</li><li>关于我们</li>
</ul><h1>这是列表页面</h1>
<img src="{{url_for('static',filename='images/hh.png')}}" alt="">
<div class="footer">这是网站底部
</div>
</body>
</html>
3、案例实现(模拟豆瓣跳转界面的实现)
①目录结构(通过继承,以及宏for语句等flask模板语法实现简单界面搭建以及跳转功能,主要实现代码优化,使得层级分明,为以后的大案例做思想铺垫)
②css样式(文件太多就以图片方便展现)
③宏文件
④html文件
⑤python代码
from flask import Flask,render_template,requestapp = Flask(__name__)
# 电影
movies = [{'id': '11211','thumbnail': 'https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2499792043.webp','title': u'王牌特工2:黄金圈','rating': u'7.3','comment_count': 12000,'authors': u'科林·费尔斯 / 塔伦·埃格顿 / 朱丽安·摩尔'},{'id': '34532','title': u'姜子牙','thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2621219978.webp','rating': u'6.9','comment_count': 39450,'authors': u'艾伦/马丽/沈腾'},{'id': '394558','title': u'情圣','thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/mpst/public/p2409022364.jpg','rating': u'6.3','comment_count': 38409,'authors': u'肖央 / 闫妮 / 小沈阳'},{'id': '9384089','title': u'夺冠','thumbnail': u'https://img2.doubanio.com/view/photo/s_ratio_poster/public/p2620083313.webp','rating': u'7.3','comment_count': 4555,'authors': u'杰拉德·巴特勒/吉姆·斯特'},{'id': '26921827','title': u'大卫贝肯之倒霉特工熊','thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/mpst/public/p2408893200.jpg','rating': u'4.3','comment_count': 682,'authors': u'汤水雨 / 徐佳琪 / 杨默'},{'id': '26287884','title': u'追龙','thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2499052494.webp','rating': u'7.5','comment_count': 33060,'authors': u'查理兹·塞隆 / 阿特·帕金森 / 拉尔夫·费因斯'}
]
# 电视剧
tvs = [{'id': '235434','title': u'鬼吹灯之精绝古城','thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2404604903.jpg','rating': u'8.4','comment_count': 49328,'authors': u'靳东 / 陈乔恩 / 赵达 / 付枚 / 金泽灏 /'},{'id': '9498327','title': u'孤芳不自赏','thumbnail': u'https://img1.doubanio.com/view/movie_poster_cover/lpst/public/p2407425119.jpg','rating': u'3.7','comment_count': 8493,'authors': u'钟汉良 / 杨颖 / 甘婷婷 / 孙艺洲 / 亓航 /'},{'id': '26685451','title': u'全球风暴','thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2501769525.webp','rating': u'8.2','comment_count': 345,'authors': u' 卢克·崔德威 / 琼安·弗洛加特 / 露塔·格德米纳斯 / 安东尼·海德 / 卡罗琳·古多尔 /'},{'id': '235434','title': u'其他人','thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2371503632.jpg','rating': u'7.6','comment_count': 25532,'authors': u'杰西·普莱蒙 / 莫莉·香侬 / 布莱德利·惠特福德 / Maude Apatow / 麦迪逊·贝蒂 /'},{'id': '48373095','title': u'全员单恋','thumbnail': u'https://img1.doubanio.com/view/movie_poster_cover/lpst/public/p2367986708.jpg','rating': u'6.4','comment_count': 2483,'authors': u'伊藤沙莉 / 中川大志 / 上原实矩 / 森绘梨佳 / 樱田通 /'},{'id': '292843','title': u'废纸板拳击手','thumbnail': u'https://img1.doubanio.com/view/movie_poster_cover/lpst/public/p2380194237.jpg','rating': u'8.2','comment_count': 23456,'authors': u'托马斯·哈登·丘奇 / 泰伦斯·霍华德 / 波伊德·霍布鲁克 / 瑞斯·维克菲尔德 / 马尔洛·托马斯 /'}
]
@app.route('/')
def index():context = {'movies':movies,'tvs':tvs,}return render_template('index.html', **context)
@app.route('/list/')
def movie_list():category = int(request.args.get('category'))items = Noneif category==1:items = movieselse:items = tvsreturn render_template('list.html', items=items)if __name__ == '__main__':app.run(debug=True)
Flask框架四:模板继承以及豆瓣案例相关推荐
- Flask框架之模板继承与案例05
Flask框架之模板继承与案例05 一,模版继承 二,静态文件的配置 1.这里列举一个小例子: 三,模版案例(制作豆瓣评分页面) 1.效果图: 2.数据准备: 3.代码链接 一,模版继承 Flask中 ...
- Python全栈 Web(Django框架、模板继承、模型)
模板的继承: 语法: 在父模板中 必须要标识出那些内容在子模板中允许为修改 {% block 名称 %} {% endblock %} 在子模板中 指定继承自那个父模板 {% extends '父模板 ...
- Flask框架Jinjia模板中常用语法
文章目录 1.变量表示 2.判断 3.for循环 4.继承 5.块 6.url链接 7.加载静态文件 1.变量表示 {{ args }} 2.判断 {% if a == 1 %}{% endif %} ...
- Flask框架可视化模板
文章目录 models static templates views manage app子文件 html error.html echarts.html echarts2.html main.htm ...
- flask html 模板继承,Flask框架模板继承实现方法分析
Flask框架模板继承实现方法分析 本文实例讲述了Flask框架模板继承实现方法.分享给大家供大家参考,具体如下: 在模板中,可能会遇到以下情况: 多个模板具有完全相同的顶部和底部内容 多个模板中具有 ...
- flask框架中的Jinja2模板引擎
简介 在flask框架中通常使用Jinja2模板引擎来实现复杂页面的渲染. 本章主要介绍Jinja2模板引擎的基本结构和使用方法. 如何使用flask框架渲染模板 在模板中传递一个或者多个参数 if语 ...
- Flask框架基础入门教程
文章目录 前言 Flask 基础概念和安装 Flask 快速入门小应用 Flask 之模板的使用 后续,待更新.... 前言 最近开始学习flask 框架,本文用于flask 框架的基础入门学习,版本 ...
- 用Pycharm开发Flask框架设置debug模式没有效果的解决办法
debuge模式 在app.run()中传入一个关键字参数debug ,app.run(debug=True),就设置当前项目为debug模式 debug模式的两大功能: 1.当程序出现问题的时候,可 ...
- Flask框架的学习——04—(模版继承、静态文件的配置、豆瓣APP界面案例实现)
1.模版继承 Flask中的模板可以继承,通过继承可以把模板中许多重复出现的元素抽取出来,放在父模板中,并且父模板通过定义block给子模板开一个口,子模板根据需要,再实现这个block,假设现在有一 ...
最新文章
- python3字典升序排序_Python字典和元组总结
- 如何在WPF中通过XAML代码创建菜单项
- SAP 将smartforms的报表转成PDF
- echo,print()和print_r()有什么区别?
- 利用多线程实现linux下C语言的聊天室程序:
- MySQL Mac安装教程
- LeetCode 1390. 四因数
- 下面( )对象表示标准输入对象流。_7000字带你死磕Java I/O流知识
- 60-400-040-使用-binlog-MySQL BinLog入门
- java调用支付宝接口代码介绍
- 如何让应用出现在LINUX的右键/打开方式/更多应用
- matlab yalmip cplex,关于 cplex+matlab+yalmip问题
- 2021计算机学校分数,泰州市博日电脑技术学校2021年招生录取分数线
- Android OpenGL ES(十一):绘制一个20面体
- mysql 占位符使用_Mysql占位符插入
- 2013计算机视觉代码合集三
- Win10添加简体中文美式键盘的方法
- Redis(16) -- Redis集群
- 7-7 狐狸和兔子** (10 分)
- 【TypeScript】对象类型(5)
热门文章
- linux中常用的60个命令及作用详解
- leetcode 1925. Count Square Sum Triples(python)
- Android关闭屏幕时不锁屏
- pygame: libpng warning: iCCP: known incorrect sRGB profile 报错
- python上传钉钉媒体文件_python 上传钉钉图片
- 【阿里云云计算工程师ACP认证】什么是ACP
- 北京区块链技术应用协会第一届第四次会员大会顺利召开
- Excel如何条件求和
- aria2 linux一键安装,Aria2一键安装及管理脚本,搭建AriaNg前端
- win10更新时强制关机会如何