python flask豆瓣微信小程序案例
项目步骤
定义首页模板index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>豆瓣微信小程序</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.container{
width: 375px;
height:600px;
background: pink;
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
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')
if __name__ == '__main__':
app.run()
运行效果
完整的一个例子
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>豆瓣微信小程序</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.container{
width: 375px;
height:600px;
background: pink;
}
.search-group{
padding: 14px 8px;
background: #41be57;
}
.search-group .search-input{
display: block;
height: 30px;
width: 100%;
box-sizing: border-box;
background: #fff;
border: none;
outline: none;
border-radius: 5px;
}
.item-list-group .item-list-top{
overflow: hidden;
padding: 10px;
}
.item-list-top .module-title{
float: left;
}
.item-list-top .more-btn{
float: right;
}
.list-group{
overflow: hidden;
}
.list-group .item-group{
float: left;
margin-right: 10px;
}
.item-group .thumbnail{
display: block;
padding-left: 10px;
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/p2537158013.webp" alt="" class="thumbnail">
<p class="item-title">毒液</p>
<p class="item-rating">
{% set rating=7.3 %}
<!--全亮星星-->
{% set lights=((rating|int)/2)|int %}
<!--半亮星星-->
{% set halfs=(rating|int)%2 %}
<!--不亮星星-->
{% 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.jpg') }}" alt="">
{% endfor %}
{% for gray in range(0,grays) %}
<img src="{{ url_for("static",filename='images/rate_gray.png') }}" alt="">
{% endfor %}
{{ rating }}
</p>
</div>
<div class="item-group">
<img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2537158013.webp" alt="" class="thumbnail">
<p class="item-title">毒液</p>
<p class="item-rating">
{% set rating=7.3 %}
<!--全亮星星-->
{% set lights=((rating|int)/2)|int %}
<!--半亮星星-->
{% set halfs=(rating|int)%2 %}
<!--不亮星星-->
{% 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.jpg') }}" alt="">
{% endfor %}
{% for gray in range(0,grays) %}
<img src="{{ url_for("static",filename='images/rate_gray.png') }}" alt="">
{% endfor %}
{{ rating }}
</p>
</div>
<div class="item-group">
<img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2537158013.webp" alt="" class="thumbnail">
<p class="item-title">毒液</p>
<p class="item-rating">
{% set rating=7.3 %}
<!--全亮星星-->
{% set lights=((rating|int)/2)|int %}
<!--半亮星星-->
{% set halfs=(rating|int)%2 %}
<!--不亮星星-->
{% 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.jpg') }}" 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>
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')
if __name__ == '__main__':
app.run()
运行app.py
效果如下：
重构上面的代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>豆瓣微信小程序</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.container{
width: 375px;
height:600px;
background: pink;
}
.search-group{
padding: 14px 8px;
background: #41be57;
}
.search-group .search-input{
display: block;
height: 30px;
width: 100%;
box-sizing: border-box;
background: #fff;
border: none;
outline: none;
border-radius: 5px;
}
.item-list-group .item-list-top{
overflow: hidden;
padding: 10px;
}
.item-list-top .module-title{
float: left;
}
.item-list-top .more-btn{
float: right;
}
.list-group{
overflow: hidden;
}
.list-group .item-group{
float: left;
margin-right: 10px;
}
.item-group .thumbnail{
display: block;
padding-left: 10px;
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>
<!--定义宏-->
{% 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 %}
<!--不亮星星-->
{% 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.jpg') }}" 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>
app.py
from flask import Flask,render_template
app = Flask(__name__)
#模板改完后自动加载
app.config['TEMPLATES_AUTO_RELOAD']=True
# 电影
movies = [
{
',
'thumbnail': 'https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2499792043.webp',
'title': u'王牌特工2：黄金圈',
'rating': u'7.3',
'comment_count': 12000,
'authors': u'科林·费尔斯 / 塔伦·埃格顿 / 朱丽安·摩尔'
},
{
',
'title': u'羞羞的铁拳',
'thumbnail': u'https://img1.doubanio.com/view/movie_poster_cover/lpst/public/p2499793218.webp',
'rating': u'7.6',
'comment_count': 39450,
'authors': u'艾伦/马丽/沈腾'
},
{
',
'title': u'情圣',
'thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/mpst/public/p2409022364.jpg',
'rating': u'6.3',
'comment_count': 38409,
'authors': u'肖央 / 闫妮 / 小沈阳'
},
{
',
'title': u'全球风暴',
'thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2501863104.webp',
'rating': u'7.4',
'comment_count': 4555,
'authors': u'杰拉德·巴特勒/吉姆·斯特'
},
{
',
'title': u'大卫贝肯之倒霉特工熊',
'thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/mpst/public/p2408893200.jpg',
'rating': u'4.3',
'comment_count': 682,
'authors': u'汤水雨 / 徐佳琪 / 杨默'
},
{
',
'title': u'追龙',
'thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2499052494.webp',
'rating': u'7.5',
'comment_count': 33060,
'authors': u'查理兹·塞隆 / 阿特·帕金森 / 拉尔夫·费因斯'
}
]
# 电视剧
tvs = [
{
',
'title': u'鬼吹灯之精绝古城',
'thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2404604903.jpg',
'rating': u'8.4',
'comment_count': 49328,
'authors': u'靳东 / 陈乔恩 / 赵达 / 付枚 / 金泽灏 /'
},
{
',
'title': u'孤芳不自赏',
'thumbnail': u'https://img1.doubanio.com/view/movie_poster_cover/lpst/public/p2407425119.jpg',
'rating': u'3.7',
'comment_count': 8493,
'authors': u'钟汉良 / 杨颖 / 甘婷婷 / 孙艺洲 / 亓航 /'
},
{
',
'title': u'全球风暴',
'thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2501769525.webp',
'rating': u'8.2',
'comment_count': 345,
'authors': u' 卢克·崔德威 / 琼安·弗洛加特 / 露塔·格德米纳斯 / 安东尼·海德 / 卡罗琳·古多尔 /'
},
{
',
'title': u'其他人',
'thumbnail': u'https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2371503632.jpg',
'rating': u'7.6',
'comment_count': 25532,
'authors': u'杰西·普莱蒙 / 莫莉·香侬 / 布莱德利·惠特福德 / Maude Apatow / 麦迪逊·贝蒂 /'
},
{
',
'title': u'全员单恋',
'thumbnail': u'https://img1.doubanio.com/view/movie_poster_cover/lpst/public/p2367986708.jpg',
'rating': u'6.4',
'comment_count': 2483,
'authors': u'伊藤沙莉 / 中川大志 / 上原实矩 / 森绘梨佳 / 樱田通 /'
},
{
',
'title': u'废纸板拳击手',
'thumbnail': u'https://img1.doubanio.com/view/movie_poster_cover/lpst/public/p2380194237.jpg',
'rating': u'8.2',
'comment_count': 23456,
'authors': u'托马斯·哈登·丘奇 / 泰伦斯·霍华德 / 波伊德·霍布鲁克 / 瑞斯·维克菲尔德 / 马尔洛·托马斯 /'
}
]
@app.route('/')
def hello_world():
context={
'movies':movies,
'tvs':tvs
}
return render_template('index.html',**context)
if __name__ == '__main__':
app.run()
运行app.py
访问效果如下：
python flask豆瓣微信小程序案例的更多相关文章
- Python flask构建微信小程序订餐系统
第1章 <Python Flask构建微信小程序订餐系统>课程简介 本章内容会带领大家通览整体架构,功能模块,及学习建议.让大家在一个清晰的开发思路下,进行后续的学习.同时领着大家登陆ht ...
- Python flask构建微信小程序订餐系统☝☝☝
Python flask构建微信小程序订餐系统☝☝☝ 一.Flask MVC框架结构 1.1实际项目结构 1.2application.py 项目配置文件 Flask之flask-script模块使 ...
- Python flask构建微信小程序订餐系统✍✍✍
Python flask构建微信小程序订餐系统 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题, ...
- python flask框架学习(三)——豆瓣微信小程序案例(一)templates的使用，宏的使用，前端后台传数据，前端写python语句
目录 一.templates的使用 (1)在templates里创建一个index.html (2)再在app.py里写 (3)展示效果 二.构建第一个电影评分 (1)准备好素材放进static里的i ...
- python flask框架学习(三)——豆瓣微信小程序案例(二)整理封装block，模板的继承
我们所要实现的效果: 点击电影的更多,跳转到更多的电影页面:点击电视剧的更多,跳转到更多的电视剧页面. 三个页面的风格相同,可以设置一个模板,三个页面都继承这个模板 1.在指定模板之前,把css放在一 ...
- Python Flask构建微信小程序订餐系统 学习 资源
一.Flask MVC框架结构 1.1实际项目结构 1.2application.py 项目配置文件Flask之flask-script模块使用 static.py 文件(部署到生成环境不需 ...
- python爬取微信小程序（实战篇）
python爬取微信小程序(实战篇) 本文链接:https://blog.csdn.net/HeyShHeyou/article/details/90452656 展开 一.背景介绍 近期有需求需要抓 ...
- Python爬取微信小程序（Charles）
Python爬取微信小程序(Charles) 本文链接:https://blog.csdn.net/HeyShHeyou/article/details/90045204 一.前言 最近需要获取微信小 ...
- Flask与微信小程序登录(后端)
开发微信小程序时,接入小程序的授权登录可以快速实现用户注册登录的步骤,是快速建立用户体系的重要一步.这篇文章将介绍 python + flask + 微信小程序实现用户快速注册登录方案(本文主要进行后 ...
随机推荐
- 使用min-content实现容器宽度自适应于内部元素
前言 设计师可以分为如下两类: 先做好设计,然后将内容放入静态框架中 优秀的设计师充分考虑内容的各个方面及其上下文,并创建适合于内容的设计 HTML原生就是响应式的(HTML内容在视口内流式的分布). ...
- jquery-fullpage插件
jquery fullpage.js全屏滚动插件/jquery-easing插件 // 前端自动化工具安装插件 在页面引入: <link rel="stylesheet" h ...
- 【起航计划 004】2015 起航计划 Android APIDemo的魔鬼步伐 03 App->Activity->Animation Activity跳转动画 R.anim.×× overridePendingTransition ActivityOptions类
App->Activity->Animation示例用于演示不同Activity切换时动态效果. android 5.0例子中定义了6种动画效果: 渐变Fade In 缩放Zoom In ...
- struts 上传文件 Dynavalidatorform 实例
一.相关jar包 一个空struts工程的jar包: 另上传文件的两个jar包: 二.页面 1.上传页面upload.jsp <%@ page language="jav ...
- Cordova各个插件使用介绍系列（七）—$cordovaStatusbar手机状态栏显示
在项目中发现Android和iOS在手机状态栏样式不一样,然后就查到有一个cordova插件可以解决这个问题 1.下载插件$cordovaStatusbar命令: cordova plugin add ...
- 只为更快、更省、更安全的 Azure CDN
来来来!小编今天要公布一件大事啦: 经过最近一次更新,Azure CDN 高级版服务 HTTPS SSL 证书的申请方式有所改进啦,除了现有的 Azure CDN 代为申请证书外,还支持用户自己申请的 ...
- PHP 简单调用rest WebServices
<?php $ch = curl_init("http://api.cachk.com:8185/Tech-Trans.esPOS4.PosService.UAT/rest/enqui ...
- window下编译ffmpeg
网上关于编译ffmpeg的帖子很多,我也尝试了很多次,但是很多都过不了,一部分原因是版本问题,还有就是有的路劲没说的太明白导致的,经过一天的摸索,最终编译好了,下面把编译方式写下来,希望对看到帖子的人 ...
- svn: 处于冲突状态
svn: 提交失败(细节如下):svn: 提交终止: “/home/usa/svn/aispeech/air201102/branches/opt-vite/wvite” 处于冲突状态 删除文件夹wv ...
- P3740 贴海报
P3740 贴海报 很显然,这个题是让我们维护一个区间的信息 可以考虑线段树.可是这个题,正向思维可能并不可做. 所以我们考虑逆向思维. 打个比方,你是一名保洁人员.面对已经粘在墙上的,大大小小的广告 ...