豆瓣案例

效果图

这是我们点击更多进到的电影页面

豆瓣案例（上）的代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="{{url_for('static',filename = 'css/base.css') }}"><link rel="stylesheet" href="{{url_for('static',filename = 'css/item.css') }}">
</head>
<body>
{% macro itemGroup(src,title,rating) %}<div class="item-group"><img src={{src}} alt="" class="thumbnail"><p class="item-title">{{title}}</p><p class="item-rating">{%set lights = ((rating|int)/2)|int %}{%set halflight = (rating|int)%2 %}{%set grays = 5-lights-halflight %}{% for light in range(0,lights) %}<img src="{{url_for('static',filename='images/rate_light.png')}}" alt="">{% endfor %}{% for light in range(0,halflight) %}<img src="{{url_for('static',filename='images/rate_half.jpg')}}" alt="">{% endfor %}{% for light in range(0,grays)%}<img src="{{url_for('static',filename='images/rate_gray.png')}}" alt="">{% endfor %}{{ rating }}</p></div>{% endmacro%}<h1>豆瓣评分</h1><div class="container"><div class="search-group"><input type="text" class="search-input"></div><div class="item-list-group"><div class="item-list-top"><span class="moudle-title">电影</span><a href="#" class="more-btn">更多</a></div><div class="list-group">{% for movie in movies[0:3] %}{{ itemGroup(movie.thumbnail,movie.title,movie.rating) }}{% endfor %}</div><div class="item-list-top"><span class="moudle-title">电视剧</span><a href="#" class="more-btn">更多</a></div><div class="list-group">{% for tvs in tvs[0:3] %}{{ itemGroup(tvs.thumbnail,tvs.title,tvs.rating) }}{% endfor %}</div></div></div></body>
</html>

py文件

from flask import Flask,render_templateapp = Flask(__name__)#电影
movies = [{'id': '11211','thumbnail': 'https://img3.doubanio.com/view/movie_poste r_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/movie_post er_cover/lpst/public/p2499793218.webp','rating': u'7.6','comment_count': 39450,'authors': u'艾伦/⻢丽/沈腾'},{'id': '394558','title': u'情圣','thumbnail': u'https://img3.doubanio.com/view/movie_post er_cover/mpst/public/p2409022364.jpg','rating': u'6.3','comment_count': 38409,'authors': u'肖央 / 闫妮 / ⼩沈阳'},{'id': '9384089','title': u'全球⻛暴','thumbnail': u'https://img3.doubanio.com/view/movie_post er_cover/lpst/public/p2501863104.webp','rating': u'7.4','comment_count': 4555,'authors': u'杰拉德·巴特勒/吉姆·斯特'},{'id': '26921827','title': u'⼤卫⻉肯之倒霉特⼯熊','thumbnail': u'https://img3.doubanio.com/view/movie_post er_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_post er_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_post er_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_post er_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_post er_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_post er_cover/lpst/public/p2371503632.jpg','rating': u'7.6','comment_count': 25532,'authors': u'杰⻄·普莱蒙 / 莫莉·⾹侬 / 布莱德利·惠特福德 / Maud e Apatow / ⻨迪逊·⻉蒂 /'},{'id': '48373095','title': u'全员单恋','thumbnail': u'https://img1.doubanio.com/view/movie_post er_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_post er_cover/lpst/public/p2380194237.jpg','rating': u'8.2','comment_count': 23456,'authors': u'托⻢斯·哈登·丘奇 / 泰伦斯·霍华德 / 波伊德·霍布鲁克 / 瑞斯·维克菲尔德 / ⻢尔洛·托⻢斯 /'}
]@app.route('/')
def douban():context = {'movies':movies,'tvs':tvs}return render_template('index.html',**context)if __name__=='__main__':app.run(debug=True)

因为还有重复的地方，所以我们继续用宏来优化程序

创建一个宏

{% macro listGroup(moudle-title,items)%}<div class="item-list-top"><span class="moudle-title">{{moudle-title}}</span><a href="#" class="more-btn">更多</a></div><div class="list-group">{% for item in items[0:3] %}{{ itemGroup(item.thumbnail,item.title,item.rating) }}{% endfor %}</div>
{% endmacro%}

优化后的代码

<h1>豆瓣评分</h1><div class="container"><div class="search-group"><input type="text" class="search-input"></div><div class="item-list-group">{{listGroup('电影',movies)}}<hr>{{listGroup('电视剧',tvs)}}</div></div>

只有这么简短，真神奇！！
既然我们要点击更多，进入到新的页面，那么我们就应该创建一个新的视图函数
py文件

@app.route('/list/')
def movie_list():return render_template('list.html')

在创建list.html文件
我们上次是写的右边的，现在写的是左边的，看起来非常相似，我们是不是可以直接复制粘贴过去呢
但是考虑到优化的问题，我们不能这么去做
所以我们这个时候用到了模板继承
我们创建一个父模板base.html在创建一个放宏的模板macro.html
我们将这部分代码放到macro.html中

{% macro listGroup(moudle-title,items)%}<div class="item-list-top"><span class="moudle-title">{{moudle-title}}</span><a href="#" class="more-btn">更多</a></div><div class="list-group">{% for item in items[0:3] %}{{ itemGroup(item.thumbnail,item.title,item.rating) }}{% endfor %}</div>
{% endmacro%}

将这部分代码放到base.html中

<h1>豆瓣评分</h1><div class="container"><div class="search-group"><input type="text" class="search-input"></div><div class="item-list-group">{{listGroup('电影',movies)}}<hr>{{listGroup('电视剧',tvs)}}</div></div>

因为子模板中一定会重写这部分，所以这部分就不要了

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>{% block title%}Title{% endblock %}</title>
</head>
<body>{% block header_title%}<h1>豆瓣评分</h1>{% endblock %}<div class="container"><div class="search-group"><input type="text" class="search-input"></div><div class="item-list-group">{% block content%}           #####添加一个空白模板以供书写{% endblock %}</div></div>
</body>
</html>

完善我们的父模板，导入宏

{% from 'macro.html' import itemGroup,listGroup%}#####导入宏
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>{% block title%}Title{% endblock %}</title><link rel="stylesheet" href="{{url_for('static',filename = 'css/base.css') }}">#####<link rel="stylesheet" href="{{url_for('static',filename = 'css/item.css') }}">#####
</head>
<body>{% block header_title%}<h1>豆瓣评分</h1>{% endblock %}<div class="container">                       #####这只是样式不用更改，所以不需要使用block<div class="search-group"><input type="text" class="search-input"></div><div class="item-list-group">{% block content%}{% endblock %}</div></div>
</body>
</html>

我们的子模板index.html中只留下这一块

index.html
{{listGroup('电影',movies)}}
<hr>
{{listGroup('电视剧',tvs)}}

现在开始导入父模板，并继承父模板

{% extends 'base.html'%} #####导入父模板{% block header_title%}  #####更改标题
<h1>豆瓣评分</h1>
{% endblock %}{% block content%}       #####写入数据
{{listGroup('电影',movies)}}
<hr>
{{listGroup('电视剧',tvs)}}
{% endblock %}

运行网址

优化成功！

现在我们直接把index中的代码拿到list中,把豆瓣评分换成电影

list.html
{% extends 'base.html'%}{% block header_title%}<h1>电影</h1>
{% endblock %}{% block content%}{{listGroup('电影',movies)}}<hr>{{listGroup('电视剧',tvs)}}
{% endblock %}

上面的代码执行时错误的，我们一会再做修改
现在我们开始继续写点击更多之后的代码
首先修改已经有的宏，让我们点击更多跳转页面，并且分辨出我们点击的是电影的更多还是电视剧的更多
用url_for获取路由，再传入一个参数category用于区分电影分区的更多，和电视剧分区的更多

{% macro listGroup(moudle_title,items,category)%}<div class="item-list-top"><span class="moudle-title">{{moudle_title}}</span><a href="{{url_for('movie_list',category=category)}}" class="more-btn">更多</a></div><div class="list-group">{% for item in items[0:3] %}{{ itemGroup(item.thumbnail,item.title,item.rating) }}{% endfor %}</div>{% endmacro%}

然后再py文件中进行响应获取，并判断

from flask import Flask,render_template,request   ##导入request模块
@app.route('/list/')
def movie_list():#/list/?category=xxxcategory = request.args.get('category')if category==1:pass   ###逻辑先没有写，一会写else:passreturn render_template('list.html')

打开网址，它就会通过base.html和macro.html来获取到我们的category
我们再修改index.html文件中电影和电视剧分区的参数（因为新传入了一个参数）

{% extends 'base.html'%}{% block header_title%}
<h1>豆瓣评分</h1>
{% endblock %}{% block content%}{{listGroup('电影',movies,1)}}   #####这个1<hr>{{listGroup('电视剧',tvs,2)}}    #####这个2
{% endblock %}

因为你的宏中有items这个值，用来获取电影或者电视剧的数据，所以我们也要对他进行修改

在py文件中进行修改
先传入items这个值，并给他复制None（空值）
然后写入判断逻辑，如果category等于1，那么就将电影的数据（movies）赋值给items
如果不等于1，那么就像电视剧（tvs）复制给items
然后传入参数，items

@app.route('/list/')
def movie_list():#/list/?category=xxxcategory = int(request.args.get('category'))items = Noneif category==1:items = movieselse:items = tvsreturn render_template('list.html',items=items)

然后再将我们的list.html文件完善

{% extends 'base.html'%}{% block header_title%}<h1>电影</h1>
{% endblock %}{% block content%}{% for item in items%}{{ itemGroup(item.thumnail,item.title,item.rating) }}{% endfor %}
{% endblock %}

在修改标题

@app.route('/list/')
def movie_list():#/list/?category=xxxitems = Nonecategory = int(request.args.get('category'))if category==1:items = moviestitle = '电影'else:items = tvstitle = '电视剧'return render_template('list.html',items=items,title=title)

list.html
{% extends 'base.html'%}{% block header_title%}<h1>{{ title }}</h1>    #####
{% endblock %}{% block content%}{% for item in items%}{{ itemGroup(item.thumnail,item.title,item.rating) }}{% endfor %}
{% endblock %}

打开网址，点击更多

成功！！

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

4999元的“惊喜”，三星Galaxy S20 FE 5G这样打动消费者
备受关注的三星Galaxy S20 FE 5G终于来到国内，作为Galaxy S20 5G家族的全新成员，Galaxy S20 FE 5G自曝光以来便收获了不小的关注度。那么它的性能表现如何？性价比是否有优势呢？ 由于上半年发布的Galaxy S20 5G系列表现优异&#x…...
2024/5/9 8:05:59
element UI 修改Checkbox复选框绑定值的默认选中值的类型
在单一的el-checkbox元素中定义v-model绑定变量，v-model默认绑定的值为boolean，即选中时为true，当我们不想让其选中时为true，那么我们就需要用到true-label参数。 // 如，我希望选中是的值是1，未选中时的值…...
2024/4/14 20:33:09
leetcode 刷题，推荐使用VS Code,Failed to sign in. Please open the output channel for details错误解决方法
leetcode 刷题，推荐使用VS Code, 第一步，安装 VS code, 而不是 visual studio , 两个是不同的软件。区别如下：https://zhidao.baidu.com/question/693962620594591724.html 第二步，安装node.js https://www.runoob.com/nod…...
2024/5/9 2:35:44
何时使用 Rust
当性能很重要时，例如在处理大量数据时，Rust 是一个不错的选择。此外，Rust 为您提供了对线程行为以及线程之间资源共享方式的细粒度控制。另一方面，Rust 具有陡峭的学习曲线，并且由于内存安全性的额外复杂性而减慢了开…...
2024/5/8 22:35:18
阿里双11 同款，流量防卫兵 Sentinel go 源码解读
作者 | 于雨 apache/dubbo-go 项目负责人本文作者系 apache/dubbo-go 项目负责人，目前在 dubbogo 项目中已内置可用 sentinel-go，如果想单独使用可参考在 dubbo-go 中使用 sentinel 一文，若有其他疑问可进 dubbogo社区【钉钉群 23331795】…...
2024/4/6 10:09:44
面试题总结
一、逻辑回归...
2024/5/8 23:24:12
POI SXSSFWorkbook mac下查看poifiles生成的临时文件
POI SXSSFWorkbook mac下查看poifiles生成的临时文件问题描述：解决方案：导出成功后poi.xml文件顺利删除！问题描述： 在使用SXSSFWorkbook作为excel导出方法使用时（poi-ooxml-3.14.jar）,当导出的文件过大&am…...
2024/4/21 1:23:19
服务器安全问题汇总
服务器安全问题汇总阿里云服务器木马文件路径: jQueryServer.php阿里云服务器木马文件路径: jQueryServer.php 参考链接：thinkcmf5.0 jqueryserver.php爆出后门总结：删除没有影响，需要确认业务上是否有一些后台逻辑。...
2024/5/8 22:03:56
【PAT甲级】1005 Spell It Right
题目链接：1005 Spell It Right #include <iostream> using namespace std; int main(){string s, english[10] {"zero", "one", "two", "three", "four", "five", "six", "seve…...
2024/5/9 8:21:07
「极客中心」www.geekzl.com网站上线了
「极客中心」www.geekzl.com网站上线了最近，小伙伴 Andy 的站点极客中心终于上线了。内容简介极客中心技术博客，专注于分享IT前沿技术、干货知识、热点资讯等，同时分享硬运营实战. 写作计划 Andy 打算分享自己的技术实践、高效办公技…...
2024/5/8 15:39:00
详细分析 Java 中启动线程的正确和错误方式
欢迎阅读本文，如有写的不足的，请见谅，请大家多多指教。本文同时也收录在了我的个人博客网站： www.xilikeli.cn 中，欢迎大家来访(#.#) 也欢迎访问我的 Github 主页, 其中我的个人博客已开源在其中, 感兴趣的小伙伴可以…...
2024/5/9 1:09:33
Spring Cloud Alibaba Sentinel 流量管理
Hi，我是空夜！ 本节示例代码在 https://github.com/laolunsi/spring-boot-examples 首先下载 sentinel jar包：https://github.com/alibaba/Sentinel/releases java -jar sentinel-xx.jar 运行，打开浏览器，输入默认地址…...
2024/4/6 10:09:37
InstallShield Build Error -1014: Cannot rename directory ＜PATH＞ to ＜PATH＞\folder.Bak.
InstallSheild执行Build结果错误： 错误详细信息： Cannot rename directory <PATH> to <PATH>\folder.Bak. Windows Explorer or a DOS prompt may be pointing to a subfolder of the release output folder (Disk1) or to the Interim fold…...
2024/5/8 23:59:37
2020-10-21 protobuf+java
1.github下载protobuf编译器： https://github.com/protocolbuffers/protobuf/releases windows64位选择 “protoc-版本号-win64.zip” 2.解压。 3.编写.proto文件，如PersonMsg.proto: syntax "proto2"; message Person {// ID&#xff08…...
2024/5/9 3:24:02
谈谈关于CDN缓存
一、CDN是什么？ 谈到CDN的作用，可以用8年买火车票的经历来形象比喻： 8年前，还没有火车票代售点一说，12306.cn更是无从说起。那时候火车票还只能在火车站的售票大厅购买，而我所住的小县城并不通火车&#…...
2024/5/8 20:50:58
LeetCode每日一题 925. 长按键入
题目链接 class Solution { public:bool isLongPressedName(string name, string typed) {int n1 name.size();int n2 typed.size();int l 0, r 0;while (r < n2 && l < n1) {if (typed[r] name[l]) l;else if (!r || typed[r] ! typed[r-1]) return false…...
2024/5/9 5:55:40
cocos 报错 3804
3804 getComponent: Type must be non-nil 某些引擎模块没有勾选...
2024/5/8 19:31:46
Elasticsearch超详细笔记
Elasticsearch超详细笔记引言： 本文主要分享了有关Elasticsearch（简称ES）的知识，包括：ES的简介、基本概念、倒序索引、ES的安装以及使用、Kibana可视化工具的安装与使用、分词的使用、使用可视化工具Kibana实现索引和…...
2024/5/8 21:09:35
北航计算机学院往年夏令营+考研面试题目汇总
以下是我在网络上找到的北航计算机学院往年面试题目，将其汇总到一篇文章，如果大家找到新的，欢迎大家在评论区提醒我，我会不断补充。 18夏令营面试计算机是如何启动的：BIOS->主引导记录->硬盘启动->操作系统…...
2024/5/9 5:11:45
docker下载镜像新建容器打包容器打包tar加载tar
首先查看下现有的容器和image docker ps #已启动的所有容器 docker ps -a #所有容器，包括未启动的 docker images #当前已有的镜像一、查找images 例：查找nvidia相关的image [rootlocalhost ~]# docker search -s 10 nvidia Flag --stars has …...
2024/4/6 6:25:16

python全栈05-----豆瓣案例（下）

豆瓣案例

相关文章

最新文章