写了一个类似与豆瓣的电影的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 ...
随机推荐
- VBA_50段代码总结
'' 30个有用的VBA代码 '目录: '1--合理使用数组:'2--一次保存并关闭所 ...
- JavaScript封装一个函数效果类似内置方法concat()
JavaScript封装一个函数效果类似内置方法concat() 首先回忆concat()的作用: concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个 ...
- vs code远程开发
VS Code如何配置远程开发 你是如何远程开发的?还在使用FTP/SFTP同步文件?那你out了,有了宇宙第一IDE:VS就不需要这么麻烦了,一起学习一下吧. 第一步,安装Remote SSH插件 ...
- ubutun 服务器中文设置
在连接到服务器时,我们看不到图形界面,按照常规的安装搜狗输入法行不通,查阅相关的资料找到一篇可以解决的 sudo apt-get update 如果出现 E: 无法下载 404 Not Found I ...
- 认识Redis集群——Redis Cluster
前言 Redis集群分三种模式:主从模式.sentinel模式.Redis Cluster.之前没有好好的全面理解Redis集群,特别是Redis Cluster,以为这就是redis集群的英文表达啊 ...
- HDU100题简要题解（2010~2019）
HDU2010 水仙花数 题目链接 Problem Description 春天是鲜花的季节,水仙花就是其中最迷人的代表,数学上有个水仙花数,他是这样定义的: "水仙花数"是指一个 ...
- 单线程的Redis有哪些慢动作？
持续原创输出,点击上方蓝字关注我 目录 前言 为什么 Redis 这么火? 键和值的保存形式? 为什么哈希表操作变慢了? 集合的操作效率? 有哪些数据结构? 不同操作的复杂度? 总结 前言 现在一提到 ...
- sql bypass waf fuzz python
从freebuf copy过来的,先保存,有空再改 #encoding=utf-8 import requests url = "http://127.0.0.1/index.php?id= ...
- PHP中的变量覆盖漏洞
简介 今天利用周六整理了一下 php覆盖的漏洞 榆林学院的同学可以使用协会内部实验平台进行实验操作. 1.extract()变量覆盖 1.extract() extract() 函数从数组中将变量导入 ...
- C语言中的const用法
Const是什么? const是一个C语言的关键字,它限定一个变量不允许被改变.使用const在一定程度上可以提高程序的健壮性,另外,在观看别人代码的时候,清晰理解const所起的作用,对理解对方的程 ...