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 ...
随机推荐
- 浅析 pagehelper 分页
之前项目一直使用的是普元框架,最近公司项目搭建了新框架,主要是由公司的大佬搭建的,以springboot为基础.为了多学习点东西,我也模仿他搭了一套自己的框架,但是在完成分页功能的时候,确遇到了问题. ...
- drf框架 - 解析模块 | 异常模块 | 响应模块
解析模块 为什么要配置解析模块 1)drf给我们提供了多种解析数据包方式的解析类 2)我们可以通过配置,来控制前台提交的哪些格式的数据后台在解析,哪些数据不解析 3)全局配置就是针对每一个视图类,局部 ...
- 2019/7/18----2.1.tomcat启动报错问题
问题描述:java.lang.UnsupportedClassVersionError: filters/SetCharacterEncodingFilter : Unsupported major. ...
- 共享库的使用（.so）文件
1.共享库的概念 2.创建共享库命令 gcc -shared -fpci -o lib/libmath.so obj/mymath.o 具体加不加 fpci 这个要看平台支持吧支持:具体详情可以查阅 ...
- C语言实现金字塔
#include <stdio.h> int main(void) { int i=0, j =0, k= 0, line; printf("请输入金字塔的总行数:") ...
- [TJOI2019]甲苯先生和大中锋的字符串
有个叫asuldb的神仙来嘲讽我 说这题SAM水题,而且SA过不了 然后我就用SA过了 显然是一个Height数组上长为k的滑块,判一下两边,差分一下就可以了 #include"cstdio ...
- 2017.10.1 国庆清北 D1T2 两个逗比捉迷藏
题目描述 你是能看到第二题的friends呢. ——laekov Hja和Yjq在玩捉迷藏.Yjq躲了起来,Hja要找他.在他们玩游戏的房间里,只有一堵不透明的墙和一个双面的镜子.Hja和Yjq可以看 ...
- AtCoder Grand Contest 005题解
传送门 \(A\) 咕咕 const int N=5e5+5; char s[N];int res,n,sum; int main(){ scanf("%s",s+1),res=n ...
- 64位内核开发第十讲,IRQL中断级别了解
目录 中断级别IROL了解 一丶IRQL 1.了解什么是中断 2.IROL中断级别. 3.遵守IROL编程规范的方式 中断级别IROL了解 一丶IRQL 1.了解什么是中断 中断就是产生的一个电信号. ...
- BurpSuite经常拦截firefox报文如success.txt的解决办法
因为工作需要经常使用Burp对收发报文进行检测,平时习惯使用火狐浏览器,但是火狐浏览器经常进行一些登录状态的检测,导致Burp拦截中出现大量的火狐报文,如http://detectportal.fir ...