先展示页面

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

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

前端页面

　　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的更多相关文章

  1. 自己写了一个类似百度空间自动保存草稿的程序 php+jquery

    可以异步加载mysql中的草稿~,异步更新草稿列表~ 下载地址:http://download.csdn.net/source/3479156 代码: demo.php <?php mysql_ ...

  2. 用c#写的一个局域网聊天客户端 类似小飞鸽

    用c#写的一个局域网聊天客户端 类似小飞鸽 摘自: http://www.cnblogs.com/yyl8781697/archive/2012/12/07/csharp-socket-udp.htm ...

  3. 写一个类似淘宝的ios app需要用到哪些技术？

    写一个类似淘宝的ios app需要用到哪些技术? 让我想起了有人私信我,说不缺钱,做个类似知乎的东西,包括加运营,需要多少钱. 扯淡结束,正好最近看了一点这方面的东西,也许对题主来说有点帮助. 手机淘 ...

  4. vnpy源码阅读学习(4)：自己写一个类似vnpy的UI框架

    自己写一个类似vnpy的界面框架 概述 通过之前3次对vnpy的界面代码的研究,我们去模仿做一个vn.py的大框架.巩固一下PyQt5的学习. 这部分的代码相对来说没有难度和深度,基本上就是把PyQt ...

  5. 制作一个类似苹果VFL的格式化语言来描述UIStackView

    在项目中总是希望页面上各处的文字,颜色,字体大小甚至各个视图控件布局都能够在发版之后能够修改以弥补一些前期考虑不周,或者根据统计数据能够随时进行调整,当然是各个版本都能够统一变化.看到这样的要求后,第 ...

  6. 如何制作一个类似Tiny Wings的游戏(2) Cocos2d-x 2.1.4

    在第二篇<如何制作一个类似Tiny Wings的游戏>基础上,增加添加主角,并且使用Box2D来模拟主角移动,原文<How To Create A Game Like Tiny Wi ...

  7. Huginn实现自动通过slack推送豆瓣高分电影

    博客搬迁至https://blog.wangjiegulu.com RSS订阅:https://blog.wangjiegulu.com/feed.xml 原文链接:https://blog.wang ...

  8. 基础爬虫，谁学谁会，用requests、正则表达式爬取豆瓣Top250电影数据！

    爬取豆瓣Top250电影的评分.海报.影评等数据!   本项目是爬虫中最基础的,最简单的一例: 后面会有利用爬虫框架来完成更高级.自动化的爬虫程序.   此项目过程是运用requests请求库来获取h ...

  9. iOS-如何写好一个UITableView

    如何写好一个UITableView 字数5787 阅读3745 评论25 喜欢69 本文是直播分享的简单文字整理,直播共分为上.下两部分.第一部分:优酷 Or YouTube,第二部分:优酷 Demo ...

随机推荐

  1. 用npm安装插件时报错： fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents)

    在做前端项目的时候执行命令: npm install --save-dev file-loader@1.1.6 --registry=https://registry.npm.taobao.org 出 ...

  2. 探索 .Net Core 的 SourceLink

    介绍 Source Link是一组软件包和一个规范, 它将一些元数据添加到PDB文件,以将本地文件重新映射到GitHub上的文件,因此Visual Studio可以在这需要时下载文件, 该项目的目的是 ...

  3. [UNCTF2020]BetterCpu WriteUp

    这题不同前一题虚拟机ezvm一样,指令很多而且复杂,需要通过写文档和脚本来化简过程. 直接丢进IDA7.2(如果使用IDA7.0则虚拟机的emulator部分会分析出错)查看. 进入main函数后按F ...

  4. 好学易懂 从零开始的插头DP（一）

    好学易懂 从零开始的插头DP(一) 写在前面 这是一篇,以蒟蒻视角展开的梳理总结.更改了一些顺序,变化了一些细节.方便蒟蒻学习理解(起码本蒟蒻是这样).大佬们可以直接看其它大佬的博客,可以学的更快. ...

  5. Mysql binlog备份数据及恢复数据，学会这个，我在也不怕删库跑路啦~

    导读 我一直都主张,技多不压身(没有学不会的技术,只有不学习的人),多学一项技能,未来就少求人一次.网上经常听到xxx删库跑路,万一真的遇到了,相信通过今天的学习,也能将数据再恢复回来~~~ 当然啦, ...

  6. [原题复现+审计][SUCTF 2019] WEB CheckIn(上传绕过、.user.ini)

    简介  原题复现:https://github.com/team-su/SUCTF-2019/tree/master/Web/checkIn  考察知识点:上传绕过..user.ini  线上平台:h ...

  7. ABBYY FineReader 15如何比较文档？

    ABBYY FineReader 15 OCR文字识别软件能帮助用户快速地对比两个文档间的差异,适合用于审阅.修改文档,发现新旧版本差异,预防输出错误版本等情况.此功能既能用于对比同一格式文档的不同版 ...

  8. 如何使用ABBYY FineReader 用户词典识别专业术语？

    ABBYY FineReader 15可以说是比较新的版本,在这个版本中能运用强大的光学字符识别技术对PDF文档扫描件.图像等文件进行OCR识别.在识别的过程中,会使用其内置的词典检查识别文字,以获得 ...

  9. zabbix agent 编译安装

    zabbix 安装包下载地址 https://www.zabbix.com/download 解压好之后进入zabbix目录 执行编译安装 ./configure --prefix=/usr/loca ...

  10. oracle整表数据被误删除之寻踪

    问题描述 开发同事在在14点左右发现任务表task_info数据不正确,3个小时之前的数据消失了,数据截至时间11:38:27 问题分析 查询过dba_source,只找到一个删除该表的存储过程,而且 ...