效果图
首先我们创建douban文件夹再在douban文件夹中创建templates文件夹，放入我们的html模板再在douban文件夹中创建static文件夹，放入我们的静态文件配置 在static文件夹中创建css文件夹，images文件夹，对我们的静态文件配置分类在douban文件夹中创建douban.py文件 from flask import Flask,render_template app = Flask(__name__) @app.route('/') def douban(): return render_template('index.html') if __name__=='__main__': app.run(debug=True) 创建index,html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html> 在body标签中写入标题：豆瓣评分再将配置文件导入 <!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> <h1>豆瓣评分</h1> </body> </html> 打开网站 标题显示成功，配置文件导入成功接下来调用css文件 base.css 这是base.css文件中的一部分用于展示 .container{ width: 375px; height: 600px; background: pink; } <body> <h1>豆瓣评分</h1> <div class="container"> </div> </body> 打开网址背景变为粉色
继续载入搜索框 <body> <h1>豆瓣评分</h1> <div class="container"> <div class="search-group"> <input type="text" class="search-input"> </div> </div> </body> 打开网址 我们继续写入电影和更多 <body> <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> #####这是跳转网页的变迁，href后可以写入网址，这里先忽略 </div> </div> </div> </body> 打开网址这个#就是点击更多后跳转的网址，这里忽略用#代替
导入图片 <body> #创建标题 <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"> <div class="item-group"> <img src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2621473195.webp" alt=""> </div> </div> </div> </div> </body> 打开网址图片太大了，我们需要添加一个限制
<img src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2621473195.webp" alt="" class="thumbnail"> 打开网址 接下来我们再图片下面添加电影名称和评分 <div class="item-group"> <img src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2621473195.webp" alt="" class="thumbnail"> <p class="item-title">七号房的礼物</p> <p class="item-rating">3.4</p> </div> 打开网址 我们继续导入星星，并且计算星星的数量，显示出整个的星星 <div class="item-group"> <img src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2621473195.webp" alt="" class="thumbnail"> <p class="item-title">七号房的礼物</p> <p class="item-rating"> {%set rating = 3.4%} #定义rating，把评分赋值给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 %} </p> </div> 打开网址 我们继续计算半个的和空的星星，并显示出来 {%set rating = 3.4%} {%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 }} 打开网址 接下来我们添加更多的电影图片、名称和评分我们通过复制粘贴操作 修改起来过于麻烦，所以这个时候我们就需要定义一个宏来快速解决这些问题了（并且加强一下对宏的理解）我们定义一个宏，命名为itemGroup（scr，title，rating），并且把我们需要重复复制粘贴的div标签复制过来，对他进行修改scr为图片地址title为电影名称rating为评分，参与星星的计算 {% macro itemGroup(src,title,rating) %} <div class="item-group"> <img src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2621473195.webp" 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%} 我们只需要调用三次宏就可以完成导入三次电影的信息，代码的数量远比三次复制粘贴少，而且修改起来更加方便，只需要更改三个参数即可 <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"> {{ itemGroup('https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2621038906.webp','掬水月在手',8.1) }} {{ itemGroup('https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2621038906.webp','掬水月在手',8.1) }} {{ itemGroup('https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2621038906.webp','掬水月在手',8.1) }} </div> </div> 打开网址： 现在我们获得到了我们想展示的所有电影数据 我们如何导入进去呢我们需要在douban（）函数下定义context @app.route('/') def douban(): context = { 'movie':movies } return render_template('index.html',**context) 然后再模板中进行循环遍历 <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 %} ##### {{ itemGroup(movie.thumbnail,movie.title,movie.rating) }} ##### {% endfor %} ##### </div> </div> 打开网址由于图片链接失效，所以没有显示图片
但是一次性显示的太多了，我们想只让他显示3个 <div class="list-group"> {% for movie in movies[0:3] %} {{ itemGroup(movie.thumbnail,movie.title,movie.rating) }} {% endfor %} </div> 打开网址成功！！！
接下来我们要编写电视剧的代码在py文件中导入tvs数据 @app.route('/') def douban(): context = { 'movies':movies, 'tvs':tvs } return render_template('index.html',**context) 然后在html文件中复制粘贴前面写过的类似的代码 然后再稍作修改，将电影的数据换成电视剧的即可 <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> 打开网址成功！！
