python flask框架学习(三)——豆瓣微信小程序案例(一)templates的使用，宏的使用，前端后台传数据，前端写python语句
目录
一、templates的使用
(1)在templates里创建一个index.html
(2)再在app.py里写
(3)展示效果
二、构建第一个电影评分
(1)准备好素材放进static里的images里
(2)写html和css
三、使用宏构建更多电影评分
(1)在html写个宏
(2)主内容部分就可以简写
四、将数据从后台传递到前台
1.在后台将数据写入
2.前端就可以直接使用数据
五、继续使用宏构建电视剧评分模块
1.后台构造数据传前端
2.前端再设定宏
一、templates的使用
(1)在templates里创建一个index.html
(2)再在app.py里写
from flask import Flask, render_template app = Flask(__name__)
app.config['TEMPLATES_AUTO_RELOAD'] = True @app.route('/')
def hello_world():
return render_template('index.html') @app.route('/cjs/')
def hello_to_cjs():
return '欢迎访问蔡军帅的网站！' if __name__ == '__main__':
app.run()
(3)展示效果
二、构建第一个电影评分
(1)准备好素材放进static里的images里
(2)写html和css
评分星星的算法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>豆瓣微信小程序</title>
<style>
/*清理网页内部自己的css*/
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.container{
width: 375px;
height: 600px;
background: white;
} .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;
padding: 10px;
}
.item-list-group .module-title{
float: left;
}
.item-list-group .more-btn{
float: right;
} .list-group{
/*清除浮动*/
overflow: hidden;
padding: 10px;
}
.list-group .item-group{
float: left;
margin-right: 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;
}
</style>
</head>
<body>
<div class="container">
<div class="search-group">
<input type="text" class="search-input" placeholder="搜索...">
</div> <div class="item-list-group">
<div class="item-list-top">
<span class="module-title">电影</span>
<a href="#" class="more-btn">更多</a>
</div>
<div class="list-group">
<div class="item-group">
<img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2572166063.webp" alt="" class="thumbnail">
<p class="item-title">少年的你</p>
<p class="item-rating">
{% set rating = 8.4 %}
{% set lights = ((rating|int)/2)|int %}
{% set halfs = (rating|int)%2 %}
<!--输出{{ halfs }}-->
{% set grays = 5-lights-halfs %}
{% for light in range(0,lights) %}
<img src="{{ url_for("static",filename="images/rate_light.png") }}" alt="">
{% endfor %}
{% for half in range(0,halfs) %}
<img src="{{ url_for("static",filename="images/rate_half.png") }}" alt="">
{% endfor %}
{% for gray in range(0,grays) %}
<img src="{{ url_for("static",filename="images/rate_gray.png") }}" alt="">
{% endfor %}
{{ rating }}
</p>
</div>
</div>
</div>
</div>
</body>
</html>
三、使用宏构建更多电影评分
1.在html写个宏
<!--写个宏-->
{% macro itemGroup(thumbnail,title,rating) %}
<div class="item-group">
<img src="{{ thumbnail }}" alt="" class="thumbnail">
<p class="item-title">{{ title }}</p>
<p class="item-rating">
{% set lights = ((rating|int)/2)|int %}
{% set halfs = (rating|int)%2 %}
<!--输出{{ halfs }}-->
{% set grays = 5-lights-halfs %}
{% for light in range(0,lights) %}
<img src="{{ url_for("static",filename="images/rate_light.png") }}" alt="">
{% endfor %}
{% for half in range(0,halfs) %}
<img src="{{ url_for("static",filename="images/rate_half.png") }}" alt="">
{% endfor %}
{% for gray in range(0,grays) %}
<img src="{{ url_for("static",filename="images/rate_gray.png") }}" alt="">
{% endfor %}
{{ rating }}
</p>
</div>
{% endmacro %}
2.主内容部分就可以简写
<div class="list-group">
{{ itemGroup("https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2572166063.webp",'少年的你',8.4) }}
{{ itemGroup("https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2567998580.webp",'我和我的祖国 ',8.0) }}
{{ itemGroup("https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2573582192.webp",'决战中途岛',7.7) }}
</div>
四、将数据从后台传递到前台
1.在后台将数据写入
movies = [
{
'id': '',
'thumbnail': 'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2570059839.webp',
'title': u'天气之子',
'rating': u'7.1',
'comment_count': 12000,
'authors': u'新海诚'
},
{
'id': '',
'thumbnail': 'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2570972919.webp',
'title': u'他们已不再变老',
'rating': u'8.8',
'comment_count': 11068,
'authors': u'彼得·杰克逊'
},
{
'id': '',
'thumbnail': 'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2568577681.webp',
'title': u'攀登者',
'rating': u'6.3',
'comment_count': 14791,
'authors': u'李仁港'
},
{
'id': '',
'thumbnail': 'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2573582192.webp',
'title': u'决战中途岛',
'rating': u'7.7',
'comment_count': 36410,
'authors': u'罗兰·艾默里奇'
},
{
'id': '',
'thumbnail': 'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2572166063.webp',
'title': u'少年的你',
'rating': u'8.4',
'comment_count': 50979,
'authors': u'曾国祥'
},
{
'id': '',
'thumbnail': 'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2572429001.webp',
'title': u'受益人',
'rating': u'6.7',
'comment_count': 23514,
'authors': u'申奥'
}
]
2.前端就可以直接使用数据
五、继续使用宏构建电视剧评分模块
1.后台构造数据传前端
from flask import Flask, render_template app = Flask(__name__)
app.config['TEMPLATES_AUTO_RELOAD'] = True movies = [
{
'id': '',
'thumbnail': 'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2570059839.webp',
'title': u'天气之子',
'rating': u'7.1',
'comment_count': 12000,
'authors': u'新海诚'
},
{
'id': '',
'thumbnail': 'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2570972919.webp',
'title': u'他们已不再变老',
'rating': u'8.8',
'comment_count': 11068,
'authors': u'彼得·杰克逊'
},
{
'id': '',
'thumbnail': 'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2568577681.webp',
'title': u'攀登者',
'rating': u'6.3',
'comment_count': 14791,
'authors': u'李仁港'
},
{
'id': '',
'thumbnail': 'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2573582192.webp',
'title': u'决战中途岛',
'rating': u'7.7',
'comment_count': 36410,
'authors': u'罗兰·艾默里奇'
},
{
'id': '',
'thumbnail': 'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2572166063.webp',
'title': u'少年的你',
'rating': u'8.4',
'comment_count': 50979,
'authors': u'曾国祥'
},
{
'id': '',
'thumbnail': 'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2572429001.webp',
'title': u'受益人',
'rating': u'6.7',
'comment_count': 23514,
'authors': u'申奥'
}
]
tvs = [
{
'id': '',
'thumbnail': 'https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2564153546.webp',
'title': u'摩登情爱 第一季',
'rating': u'8.7',
'comment_count': 42220,
'authors': u'约翰·卡尼'
},
{
'id': '',
'thumbnail': 'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2562953341.jpg',
'title': u'长安十二时辰',
'rating': u'8.3',
'comment_count': 30362,
'authors': u'曹盾'
},
{
'id': '',
'thumbnail': 'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2571299085.jpg',
'title': u'战火浮生 第一季',
'rating': u'7.6',
'comment_count': 18374,
'authors': u'亚当·史密斯'
}
] @app.route('/')
def hello_world():
context = {
'movies': movies,
'tvs': tvs
}
return render_template('index.html', **context) @app.route('/cjs/')
def hello_to_cjs():
return '欢迎访问蔡军帅的网站！' if __name__ == '__main__':
app.run()
2.前端再设定宏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>豆瓣微信小程序</title>
<style>
/*清理网页内部自己的css*/
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.container{
width: 375px;
height: 600px;
background: white;
} .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;
padding: 10px;
}
.item-list-group .module-title{
float: left;
}
.item-list-group .more-btn{
float: right;
} .list-group{
/*清除浮动*/
overflow: hidden;
padding: 10px;
}
.list-group .item-group{
float: left;
margin-right: 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;
} .item-group .thumbnail{
width: 100px;
height: 140px;
}
</style>
</head>
<body>
<!--写个宏-->
{% macro itemGroup(thumbnail,title,rating) %}
<div class="item-group">
<img src="{{ thumbnail }}" alt="" class="thumbnail">
<p class="item-title">{{ title }}</p>
<p class="item-rating">
{% set lights = ((rating|int)/2)|int %}
{% set halfs = (rating|int)%2 %}
<!--输出{{ halfs }}-->
{% set grays = 5-lights-halfs %}
{% for light in range(0,lights) %}
<img src="{{ url_for("static",filename="images/rate_light.png") }}" alt="">
{% endfor %}
{% for half in range(0,halfs) %}
<img src="{{ url_for("static",filename="images/rate_half.png") }}" alt="">
{% endfor %}
{% for gray in range(0,grays) %}
<img src="{{ url_for("static",filename="images/rate_gray.png") }}" alt="">
{% endfor %}
{{ rating }}
</p>
</div>
{% endmacro %} {% macro listGroup(module_title,items) %}
<div class="item-list-group">
<div class="item-list-top">
<span class="module-title">{{ module_title }}</span>
<a href="#" class="more-btn">更多</a>
</div>
<div class="list-group">
{% for item in items[0:3] %}
{{ itemGroup(item.thumbnail, item.title, item.rating) }}
{% endfor %}
</div>
</div>
{% endmacro %} <div class="container">
<div class="search-group">
<input type="text" class="search-input" placeholder="搜索...">
</div> {{ listGroup('电影', movies) }}
{{ listGroup('电视剧', tvs) }} </div>
</body>
</html>
python flask框架学习(三)——豆瓣微信小程序案例(一)templates的使用，宏的使用，前端后台传数据，前端写python语句的更多相关文章
- python flask框架学习(三)——豆瓣微信小程序案例(二)整理封装block，模板的继承
我们所要实现的效果: 点击电影的更多,跳转到更多的电影页面:点击电视剧的更多,跳转到更多的电视剧页面. 三个页面的风格相同,可以设置一个模板,三个页面都继承这个模板 1.在指定模板之前,把css放在一 ...
- python flask豆瓣微信小程序案例
项目步骤 定义首页模板index.html <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- 微信小程序案例大全
微信小程序demo:足球,赛事分析 小程序简易导航 小程序demo:办公审批 小程序Demo:电魔方 小程序demo:借阅伴侣 微信小程序demo:投票 微信小程序demo:健康生活 小程序demo: ...
- python flask框架学习(一)——准备工作和环境配置与安装
Flask装备: 学习自:知了课堂Python Flask框架——全栈开发 1.Python版本:3.6 2.Pycharm软件: 3.安装虚拟环境: (1)安装virtualenv: pip ins ...
- python flask框架学习——开启debug模式
学习自:知了课堂Python Flask框架——全栈开发 1.flask的几种debug模式的方法 # 1.app.run 传参debug=true app.run(debug=True) #2 设置 ...
- python flask框架学习(二)——第一个flask程序
第一个flask程序 学习自:知了课堂Python Flask框架——全栈开发 1.用pycharm新建一个flask项目 2.运行程序 from flask import Flask # 创建一个F ...
- mpvue学习笔记-之微信小程序数据请求封装
简介 美团出品的mpvue已经开源出来很久了,一直说要进行一次实践,这不最近一次个人小程序开发就用上了它. 看了微信官方的数据请求模块--request,对比了下get和post请求的代码,发现如果在 ...
- 微信小程序开发系列教程三：微信小程序的调试方法
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个Hel ...
- （三）微信小程序首页的分类功能和搜索功能的实现笔记
就在昨天,微信宣布了微信小程序开发者工具新增“云开发”功能 下载最新的开发者工具,现在无需服务器即可实现小程序的快速迭代! 分类功能和搜索功能的效果图 1.首页分类功能的实现 boxtwo方法(.js ...
随机推荐
- shellshock溢出攻击
实验背景 2014年9月24日,Bash中发现了一个严重漏洞shellshock,该漏洞可用于许多系统,并且既可以远程也可以在本地触发.在本实验中,需要亲手重现攻击来理解该漏洞,并回答一些问题. 什么 ...
- LightOJ - 1245 - Harmonic Number (II)（数学）
链接: https://vjudge.net/problem/LightOJ-1245 题意: I was trying to solve problem '1234 - Harmonic Numbe ...
- 虚拟环境安装及Hello World
学习文章引自: http://www.pythondoc.com/flask-mega-tutorial/helloworld.html 1.安装项目需要的工具包 pip install flask ...
- 悬线法DP总结
悬线法DP总结 问题模型 求满足某种条件(如01交替)的最大矩形(正方形) 思想 先预处理出\(ml[i][j],mr[i][j],mt[i][j]\),分别表示当前位置\((i,j)\)能向左扩展到 ...
- LibreOJ #526. 「LibreOJ β Round #4」子集
二次联通门 : LibreOJ #526. 「LibreOJ β Round #4」子集 /* LibreOJ #526. 「LibreOJ β Round #4」子集 考虑一下,若两个数奇偶性相同 ...
- golang 闭包
说起golang闭包,在官方手册里面看过一次,没怎么用过,还是因为6哥经常用,阅读他的代码好多闭包,emmm,今天就学习一下. 在过去近十年时间里,面向对象编程大行其道,以至于在大学的教育里,老师也只 ...
- python find和index的区别
如果找不到目标元素,index会报错,find会返回-1 >>> s="hello world" >>> s.find("llo&qu ...
- SpringData ：下划线的那些破事
今天写一个查询语句的时候,报错如下 org.springframework.beans.factory.BeanCreationException: Error creating bean with ...
- [代码审计]PHP_Bugs题目总结(2)
写的有点多了,上一篇放在一起显得有点臃肿,就再起一篇吧~ 迷路的老铁点这里:[代码审计]PHP_Bugs题目总结(1) 0x14 intval函数四舍五入 <?php if($_GET[id]) ...
- [内网渗透]lcx端口转发
0x01 简介 lcx是一款端口转发工具,有三个功能: 第一个功能将本地端口转发到远程主机某个端口上 第二个功能将本地端口转发到本地另一个端口上 第三个功能是进行监听并进行转发使用 Lcx使用的前提是 ...