写了一个类似与豆瓣的电影的flask小demo

先展示页面

基本的功能是都已经实现了，更多那个地方是可以点的。只不过视频上面还用的宏，哎呀，感觉麻烦。有多麻烦呢，需要先定义一个宏，然后进行引用。我们才能是用，以我的观点，还不如直接是一个循环完事。。。

下面贴整个项目的结构图：

前端页面

　　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传参的一个特殊的地方。

　　因为我之前也学过前端，对前端实在是提不起兴趣了，还是做后端吧，这个项目关于前端的，我都是随意做，大致的功能完成就好了。没必要是非要扣前端，前端会有专门的人做。

写了一个类似与豆瓣的电影的flask小demo的更多相关文章

自己写了一个类似百度空间自动保存草稿的程序 php+jquery
可以异步加载mysql中的草稿~,异步更新草稿列表~ 下载地址:http://download.csdn.net/source/3479156 代码: demo.php <?php mysql_ ...
用c#写的一个局域网聊天客户端类似小飞鸽
用c#写的一个局域网聊天客户端类似小飞鸽摘自: http://www.cnblogs.com/yyl8781697/archive/2012/12/07/csharp-socket-udp.htm ...
写一个类似淘宝的ios app需要用到哪些技术？
写一个类似淘宝的ios app需要用到哪些技术? 让我想起了有人私信我,说不缺钱,做个类似知乎的东西,包括加运营,需要多少钱. 扯淡结束,正好最近看了一点这方面的东西,也许对题主来说有点帮助. 手机淘 ...
vnpy源码阅读学习(4)：自己写一个类似vnpy的UI框架
自己写一个类似vnpy的界面框架概述通过之前3次对vnpy的界面代码的研究,我们去模仿做一个vn.py的大框架.巩固一下PyQt5的学习. 这部分的代码相对来说没有难度和深度,基本上就是把PyQt ...
制作一个类似苹果VFL的格式化语言来描述UIStackView
在项目中总是希望页面上各处的文字,颜色,字体大小甚至各个视图控件布局都能够在发版之后能够修改以弥补一些前期考虑不周,或者根据统计数据能够随时进行调整,当然是各个版本都能够统一变化.看到这样的要求后,第 ...
如何制作一个类似Tiny Wings的游戏(2) Cocos2d-x 2.1.4
在第二篇<如何制作一个类似Tiny Wings的游戏>基础上,增加添加主角,并且使用Box2D来模拟主角移动,原文<How To Create A Game Like Tiny Wi ...
Huginn实现自动通过slack推送豆瓣高分电影
博客搬迁至https://blog.wangjiegulu.com RSS订阅:https://blog.wangjiegulu.com/feed.xml 原文链接:https://blog.wang ...
基础爬虫，谁学谁会，用requests、正则表达式爬取豆瓣Top250电影数据！
爬取豆瓣Top250电影的评分.海报.影评等数据! 本项目是爬虫中最基础的,最简单的一例: 后面会有利用爬虫框架来完成更高级.自动化的爬虫程序. 此项目过程是运用requests请求库来获取h ...
iOS-如何写好一个UITableView
如何写好一个UITableView 字数5787 阅读3745 评论25 喜欢69 本文是直播分享的简单文字整理,直播共分为上.下两部分.第一部分:优酷 Or YouTube,第二部分:优酷 Demo ...

随机推荐

quic 2 ietf-transport-draft-ietf-quic-transport-09
quic的优点 Low-latency connection establishment Multiplexing without head-of-line blocking Authenticate ...
python之路《模块》
1.time模块 FUNCTIONS asctime(...) asctime([tuple]) -> string Convert a time tuple to a string, e.g. ...
高性能arm运行ceph存储基准测试
关于arm 之前wdlab对外发布过一次约500个节点的arm的ceph集群,那个采用的是微集群的结构,使用的是双核的cortex-a9 ARM处理器,运行速度为1.3 GHz,内存为1 GB,直接焊 ...
xpth定位元素
C语言复习系列-转义字符
C语言复习系列-转义字符准备学习stm32单片机,感觉需要复习一下C语言,翻看了菜鸟教程,竟然有不少地方看不懂,真让人汗颜······ 转义字符大部分语言里面都有,至少我学过的里面都有,在这些语言中 ...
如何获取流式应用程序中checkpoint的最新offset
对于流式应用程序,保证应用7*24小时的稳定运行,是非常必要的.因此对于计算引擎,要求必须能够适应与应用程序逻辑本身无关的问题(比如driver应用失败重启.网络问题.服务器问题.JVM崩溃等),具有 ...
VulnHub靶场学习_HA:Forensics
HA:Forensics Vulnhub靶场下载地址:https://www.vulnhub.com/entry/ha-forensics,570/ 背景: HA: Forensics is an ...
springboot实战开发全套教程，让开发像搭积木一样简单！Github星标已上10W＋！
前言先说一下,这份教程在github上面星标已上10W,下面我会一一给大家举例出来全部内容,原链接后面我会发出来!首先我讲一下接下来我们会讲到的知识和技术,对比讲解了多种同类技术的使用手日区别,大家 ...
在CorelDRAW2019创建对称绘图模式
对称绘图模式是CorelDRAW 2018推出的全新功能,在2019的版本中又得到了极大的完善,通过对称绘图模式可以创建平衡.和谐.独一无二的效果,对称在大自然中随处可见,因此设计元素很可能将依靠于它 ...
怎么用导图软件iMindMap整理C语言知识点
C语言是一门非常基础的编程语言,学习它的难点不在于语言的理解,而在于繁琐的记忆点,而当我们使用思维导图将细碎的知识点拉到框架中去后,C语言的难度就大大降低了. 接下来就为大家介绍一下我使用iMindM ...

写了一个类似与豆瓣的电影的flask小demo

写了一个类似与豆瓣的电影的flask小demo的更多相关文章

随机推荐

热门专题