先展示页面
基本的功能是都已经实现了，更多那个地方是可以点的。只不过视频上面还用的宏，哎呀，感觉麻烦。有多麻烦呢，需要先定义一个宏，然后进行引用。我们才能是用，以我的观点，还不如直接是一个循环完事。。。
下面贴整个项目的结构图：
前端页面
css部分
base.css
*{ margin: 0; padding: 0; } .container { width: 375px; height: 600px ; background: pink; } .search-group{ padding : 14px 8px ; background: #41be57; } .search-group .search-input { background: #fff; display: block; width: 100%; height: 30px; border-radius: 5px; outline: none; border: none; } .item-list-group .item-list-top{ overflow: hidden; } .item-list-top .modeule-title{ float: left; padding : 10px; } .item-list-top .more-btn{ float: right; } .list-group { overflow: hidden; } .list-group .item-group{ float: left; margin-right: 10px; padding: 0px 10px; } .item-group .thumbnail{ display: block; width: 100px; } .item-group .item-title{ font-size: 12px; text-align: center; } .item-group .item-rating{ font-size: 12px; text-align: center; } .item-rating img{ width: 10px; height: 10px; }
html部分
base.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="{{ url_for('static' , filename = 'css/base.css') }}"> </head> <body> {# 这是一个继承的模板，需要我们去认真写#} <div class="container"> <div class="search-group"> <input type="text" , class="search-input" , placeholder="搜索"> </div> {% block item %} {% endblock %} </div> </body> </html>
index.html
{% extends 'base.html' %} {% block item %} <div class="item-list-group"> <div class="item-list-top"> <span class="modeule-title">电影</span> <a href="{{ url_for('list' , list =2) }}" class="more-btn">更多</a> </div> <div class="list-group"> {% for i in range(0,4) %} <div class="item-group"> <img src="{{ url_for('static' , filename = 'images/shbl.webp') }}" alt="" class="thumbnail"> <p class="item-title">{{ name }}</p> <p class="item-rating">{{ fenshu }} <br/> {# 这个地方是让写小星星的 ，写小行星的顺序依次是，亮，灰，不亮#} {% set lights = '7.5' %} {% set light = (((lights | int) /2) | int ) %} {% set grey_light =((lights | int) % 2 )%} {% set mie_ligt = 5 - grey_light - light %} {% for i in range(0,light) %} {# 先打印亮的灯#} <img src="{{ url_for('static' , filename = 'images/timg.jpg') }}" alt=""> {% endfor %} {# 开始写灰色的#} {% for i in range(0,grey_light) %} <img src="{{ url_for('static' , filename = 'images/timg2.jpg') }}" alt=""> {% endfor %} {% for i in range(0 , mie_ligt) %} <img src="{{ url_for('static' , filename = 'images/timg1.jpg') }}" alt=""> {% endfor %} </p> </div> {% endfor %} </div> </div> <div class="item-list-group"> <div class="item-list-top"> <span class="modeule-title">电视剧</span> <a href="{{ url_for('list' ,list =1)}}" class="more-btn">更多</a> </div> <div class="list-group"> {% for i in range(0,4) %} <div class="item-group"> <img src="{{ url_for('static' , filename = 'images/shbl.webp') }}" alt="" class="thumbnail"> <p class="item-title">{{ name }}</p> <p class="item-rating">{{ fenshu }} <br/> {# 这个地方是让写小星星的 ，写小行星的顺序依次是，亮，灰，不亮#} {% set lights = '7.5' %} {% set light = (((lights | int) /2) | int ) %} {% set grey_light =((lights | int) % 2 )%} {% set mie_ligt = 5 - grey_light - light %} {% for i in range(0,light) %} {# 先打印亮的灯#} <img src="{{ url_for('static' , filename = 'images/timg.jpg') }}" alt=""> {% endfor %} {# 开始写灰色的#} {% for i in range(0,grey_light) %} <img src="{{ url_for('static' , filename = 'images/timg2.jpg') }}" alt=""> {% endfor %} {% for i in range(0 , mie_ligt) %} <img src="{{ url_for('static' , filename = 'images/timg1.jpg') }}" alt=""> {% endfor %} </p> </div> {% endfor %} </div> </div> {% endblock %}
list.html
{% extends 'base.html'%}
{#差点忘了写block#}
{% block item %}
这就是一个列表页
{% endblock %}
后端页面
app.py
#!/usr/bin/env python #-*- coding:utf-8 -*- # @Time : 2019/8/15 20:08 # @Author : "你们的饭不好吃" from flask import Flask,render_template,url_for app = Flask(__name__) movie = { 'name' : '上海堡垒sdaffa', 'fenshu' : '8.5', } @app.route('/') def hello_world(): return render_template('index.html' , **movie) @app.route('/list/') def list(): return render_template('list.html') if __name__ == '__main__': app.run(debug=True)
这个项目没什么难度，大家看看笑笑就好。哦，对了，里面的那个评论是三张图片，图片可以从网上找，宕下来就可以了。亮、不亮、灭灯三张图片，然后写个循环就可以解决那个图片评分的问题。刚开始还以为有过滤器用法，结果里面也没有用到过滤器。。。所以没啥难度，就是list=1那个传参的地方需要注意一下，这个是flask传参的一个特殊的地方。
因为我之前也学过前端，对前端实在是提不起兴趣了，还是做后端吧，这个项目关于前端的，我都是随意做，大致的功能完成就好了。没必要是非要扣前端，前端会有专门的人做。