先展示页面

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

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

前端页面

　　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. 【日拱一卒】链表——如何实现lru

    LRU Redis的内存淘汰机制好几种,如ttl.random.lru. lru(less recently used)即最近最少使用策略,表示在最近一段时间内最少被使用到的Redis键,如果遇到内存 ...

  2. 通过JS判断当前浏览器的类型

    通过JS判断当前浏览器的类型,对主流浏览器Chrome.Edge.Firefox.UC浏览器.QQ浏览器.360浏览器.搜狗浏览器的userAgent属性值来判断用户使用的是什么浏览器. 不同浏览器的 ...

  3. rpm命令介绍

    rpm安装不能指定安装位置. 查看系统安装了哪些软件:rpm -qa  rpm -qa |grep keyword      (q:query  a 是all)   查看软件是否安装: rpm -q  ...

  4. WPF窗体中嵌入/使用WinForm类/控件（基于.NET Core）

    如题,WPF中嵌入WinForm的做法,网络上已经很多示例,都是基于.NET XXX版的. 今天King様在尝试WPF(基于.NET Core 3.1)中加入Windows.Forms.ColorDi ...

  5. 对App应用架构搭建的一些思考

    当下随着App开发技术的越来越成熟,多人协同开发必不可少,一个团队中每个人的代码风格.技术栈都存在差异,因此统一一套成熟的开发架构必不可少,可以提高开发效率.统一代码风格.为项目维护提供便利. 当下A ...

  6. python-网络安全编程第四天（数据库编程&网络编程）

    前言 好几天没更因为寒假放假回家放松了几天 嘿嘿 今天继续开始启动学习模式. python数据库编程 Python DB API访问数据库流程 Python DB API包含的内容 什么是 PyMyS ...

  7. NO.A.0002——Git简史及安装教程/创建本地仓库/提交项目到本地仓库/误删还原

    一.Git简史及同类产品对比: 1.git简史:        同生活中的许多伟大事件一样,Git 诞生于一个极富纷争大举创新的年代.Linux 内核开源项目有着为数众广的参与者.绝大多数的 Linu ...

  8. 不会吧！做了这么久开发还有不会NIO的，看看BAT大佬是怎么用的吧

    前言 在将NIO之前,我们必须要了解一下Java的IO部分知识. BIO(Blocking IO) 阻塞IO,在Java中主要就是通过ServerSocket.accept()实现的. NIO(Non ...

  9. Guitar Pro小课堂——如何进行消音

    在我们弹吉他时,消音技术是必须掌握的一项吉他技能.在我们遇到休止符时.乐曲结束时.乐段,乐句中止时.吉他旋律的分句,呼吸处:变换和弦时的低音(尤其是空弦低音).断奏.弹奏强音时其他空弦被激起的共鸣音( ...

  10. CorelDRAW常用工具：羽化工具

    一.什么是羽化 羽化是针对素材中选区的一项编辑处理.有些新手可能还不理解"羽化"的具体效果,其实羽化就是达到素材选区内外衔接部分虚化,起到渐变的作用从而达到自然衔接效果的操作. C ...