知识点

如何通过评分计算出星级
使用宏封装每一个影片标签，减少代码
使用继承的方式编写模板
也是用宏封装整个电影标签和电视剧标签，通过url_for实现点击更多跳转到指定的页面

效果图

由于只是模仿，因此影片详情，还有一些页面滑动的样式就先忽略了

前期准备

CSS文件
星星的图片3张（满星，半颗星，灰色星星）
影片的封面（也可以用豆瓣图片的url地址）

创建项目

创建视图文件app.py
创建静态资源文件目录"/static/css"、 “/static/img”，将CSS文件放入css文件夹，在图片放入img文件夹
创建模板目录"/templates"

创建视图

编辑app.py

from flask import Flask
from flask import render_template
from flask import requestapp = Flask(__name__)
app.config['TEMPLATES_AUTO_RELOAD'] = True#　电影
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/movie_poster_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_poster_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_poster_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_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 move_list():“”“更多”“”category = request.args.get("category")items = Noneif category == int(1):items = movieselse:items = tvsreturn render_template("list.html", items=items)if __name__ == '__main__':app.run()

由于没有数据库，因此定义movies和tvs这两个字典的数据，代替从数据库读取数据的操作
index函数是首页的路由
move_list是在首页右边的更多按钮，点击更多之后，路由会传入1或者2（在模板中实现）；当判断为1时，就是从电影点的更多，否则就是从电视剧点的更多，根据这个判断要传入的是电影的清单还是电视剧的清单。

创建模板

1. 创建宏

在templates目录下创建macro.html模板文件。

第一个宏（itemGroup）

写入第一个宏（itemGroup），它主要负责封装影片封面、名字、评分、星级，因此给它3个参数：

thumbnail：封面
title：名字
ratings：评分（星级可以通过评分计算出来，所以不需要）

{% macro itemGroup(thumbnail, title, ratings) %}<div class="item-group"><img src="{{ thumbnail }}" alt="" class="thumbnail"><p class="item-title">{{ title }}</p><p class="item-rating">{# 星级的计算方式 #}{# ratings先取整 #}{# ratings/2 然后取整就可以得到满星的数量 #}{# ratings%2 为1时就是有半颗星,不为1就是没有半颗星 #}{# 最后 5-满星-半星=灰色星星 #}{% set rating = ratings|int %}{% set lights = (rating/2)|int %}{% set halfsb = (rating%2)|int %}{% set grays = 5 - lights - halfsb %}{# 用循环的方式将星星展示出来 #}{# 先循环满星 #}{% for light in range(0, lights) %}<img src="{{ url_for("static", filename="img/rate_light.png") }}" alt="">{% endfor %}{# 半颗星 #}{% for half in range(0,halfsb) %}<img src="{{ url_for("static", filename="img/rate_half.jpg") }}" alt="">{% endfor %}{# 灰色星星 #}{% for gray in range(0,grays) %}<img src="{{ url_for("static", filename="img/rate_gray.png") }}" alt="">{% endfor %}{# 最后显示评分 #}{{ ratings }}</p></div>
{% endmacro %}

第二个宏（listGroup）

第二个宏稍稍有点复杂，它主要负责将首页的整块电影或电视剧模块封装起来，也就是这块

它也需要3个参数

module_title：模块的名称（电影或者电视剧）
items：电影列表或者电视剧列表，数据在app.py里已经定义好了。
category：这个参数用于判断是在电影这块点的更多按钮，还是在电视剧点的更多按钮

{% macro listGroup(module_title, items, category=category) %}<div class="item-list-group"><div class="item-list-top"><span class="module-title">{{ module_title }}</span><a href="{{ url_for("move_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></div>
{% endmacro %}

这里有个重点，这个a标签是用来跳转到电影或者电视剧的更多页面，因此它用到了url_for方法，第一参数是视图文件（app.py）的move_list函数，然后会将category作为查询参数以?category=X 的方式传入到move_list中，接着move_list就可以根据接收到的值来判断应该传些什么内容到模板里。

<a href="{{ url_for("move_list", category=category) }}" class="more-btn">更多</a>

2. 创建父模板

在templates目录下创建base.html模板文件。

{% from "imitate_douban/macro.html" import itemGroup %}
{% from "imitate_douban/macro.html" import listGroup %}<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>{% block title %}{% endblock %}</title>{#    加载CSS文件   #}<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"><div class="search-group"><input type="text" class="search-input"></div>{% block content %}{% endblock %}</div>
</body>
</html>

由于子模板都需要用到宏，因此父模板可以提前把宏先导入，然后由于css样式也是相同的，因此也可以将CSS文件也导入。
需要用到用到block的地方有：
- head标签下的title
- 内容的主题header_title
- 最后是内容content

3. 创建首页模板

在templates目录下创建index.html模板文件。

{% extends "imitate_douban/base.html" %}{% block title %}首页
{% endblock %}{% block content %}{{ listGroup("电影", movies, 1) }}<hr>{{ listGroup("电视剧", tvs, 2) }}
{% endblock %}

在子模板中用extends继承父模板，然后根据父模板的block重写页面的内容
这里关键的地方是block content，这里重写了父模板并且调用了listGroup这个宏并且传入了3个参数

4. 创建“更多”页面模板