这是我们点击更多进到的电影页面
豆瓣案例（上）的代码 <!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_template app = 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=xxx category = request.args.get('category') if category==1: pass ###逻辑先没有写，一会写 else: pass return 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=xxx category = int(request.args.get('category')) items = None if category==1: items = movies else: items = tvs return 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=xxx items = None category = int(request.args.get('category')) if category==1: items = movies title = '电影' else: items = tvs title = '电视剧' 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 %} 打开网址，点击更多成功！！
