完整版模板项目实战实战演练
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了完整版模板项目实战实战演练相关的知识,希望对你有一定的参考价值。
今天给大家带来的是模板项目实战,先给大家看一下效果图
说明:
-
点击图片后会跳转到对应的详情页面
- 数据:
movies = [
? ?{
? ? ? ?‘id‘: ‘34532‘,
? ? ? ?‘title‘: u‘胖子行动队‘,
? ? ? ?‘thumbnail‘: u‘https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2526215398.webp‘,
? ? ? ?‘rating‘: u‘7.6‘,
? ? ? ?‘comment_count‘: 39450,
? ? ? ?‘authors‘: u‘宝贝儿 / 李成敏 Clara Lee / 文章 Zhang Wen‘
? ?},
? ?{
? ? ? ?‘id‘: ‘394558‘,
? ? ? ?‘title‘: u‘李茶的姑妈‘,
? ? ? ?‘thumbnail‘: u‘https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2533384240.webp‘,
? ? ? ?‘rating‘: u‘6.3‘,
? ? ? ?‘comment_count‘: 38409,
? ? ? ?‘authors‘: u‘钱晨光 / 吴瑾蓉 / 黄才伦‘
? ?},
? ?{
? ? ? ?‘id‘: ‘26921827‘,
? ? ? ?‘title‘: u‘找到你‘,
? ? ? ?‘thumbnail‘: u‘https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2534471408.webp‘,
? ? ? ?‘rating‘: u‘4.3‘,
? ? ? ?‘comment_count‘: 682,
? ? ? ?‘authors‘: u‘姚晨 / 马伊琍 / 袁文康‘
? ?},
? ?{
? ? ? ?‘id‘: ‘26287884‘,
? ? ? ?‘title‘: u‘悲伤逆流成河‘,
? ? ? ?‘thumbnail‘: u‘https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2529701498.webp‘,
? ? ? ?‘rating‘: u‘7.5‘,
? ? ? ?‘comment_count‘: 33060,
? ? ? ?‘authors‘: u‘赵英博 / 任敏 / 辛云来‘
? ?},
? ?{
? ? ? ?‘id‘: ‘26287884‘,
? ? ? ?‘title‘: u‘嗝嗝老师‘,
? ? ? ?‘thumbnail‘: u‘https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2535365481.webp‘,
? ? ? ?‘rating‘: u‘7.5‘,
? ? ? ?‘comment_count‘: 33060,
? ? ? ?‘authors‘: u‘拉妮·玛克赫吉 / 内拉吉·卡比 / 萨钦‘
? ?}
]
# 电视剧
tvs = [
? ?{
? ? ? ?‘id‘: ‘235434‘,
? ? ? ?‘title‘: u‘如懿传‘,
? ? ? ?‘thumbnail‘: u‘https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2460165077.jpg‘,
? ? ? ?‘rating‘: u‘7.4‘,
? ? ? ?‘comment_count‘: 49328,
? ? ? ?‘authors‘: u‘拉妮·玛克赫吉 / 内拉吉·卡比 / 萨钦‘
? ?},
? ?{
? ? ? ?‘id‘: ‘48373095‘,
? ? ? ?‘title‘: u‘奇葩说第五季‘,
? ? ? ?‘thumbnail‘: u‘https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2534020405.jpg‘,
? ? ? ?‘rating‘: u‘8.4‘,
? ? ? ?‘comment_count‘: 2483,
? ? ? ?‘authors‘: u‘伊藤沙莉 / 中川大志 / 上原实矩 / 森绘梨佳 / 樱田通 /‘
? ?},
? ?{
? ? ? ?‘id‘: ‘27005982‘,
? ? ? ?‘title‘: u‘最亲爱的你‘,
? ? ? ?‘thumbnail‘: u‘https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2508399162.jpg‘,
? ? ? ?‘rating‘: u‘7.6‘,
? ? ? ?‘comment_count‘: 25532,
? ? ? ?‘authors‘: u‘杰西·普莱蒙 / 莫莉·香侬 / 布莱德利·惠特福德 / Maude Apatow / 麦迪逊·贝蒂 /‘
? ?},
? ?{
? ? ? ?‘id‘: ‘30290917‘,
? ? ? ?‘title‘: u‘我们无法成为野兽‘,
? ? ? ?‘thumbnail‘: u‘https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2537556934.jpg‘,
? ? ? ?‘rating‘: u‘3.7‘,
? ? ? ?‘comment_count‘: 8493,
? ? ? ?‘authors‘: u‘钟汉良 / 杨颖 / 甘婷婷 / 孙艺洲 / 亓航 /‘
? ?},
? ?{
? ? ? ?‘id‘: ‘292843‘,
? ? ? ?‘title‘: u‘奇遇人生‘,
? ? ? ?‘thumbnail‘: u‘https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2533929218.jpg‘,
? ? ? ?‘rating‘: u‘8.2‘,
? ? ? ?‘comment_count‘: 23456,
? ? ? ?‘authors‘: u‘托马斯·哈登·丘奇 / 泰伦斯·霍华德 / 波伊德·霍布鲁克 / 瑞斯·维克菲尔德 / 马尔洛·托马斯 /‘
? ?}
]
- 说明
-
页面只显示三个
- 下面浅蓝色为背景色。
我们先来完成首页的功能
大家可以先自己试着做一下,然后再看船长的代码:
先新建一个项目microPro
:
app.py
# coding: utf-8
from flask import Flask
import flask
app = Flask(__name__) ?# type: Flask
app.debug = True
# 电影
movies = [
? ?{
? ? ? ?‘id‘: ‘34532‘,
? ? ? ?‘title‘: u‘胖子行动队‘,
? ? ? ?‘thumbnail‘: u‘https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2526215398.webp‘,
? ? ? ?‘rating‘: u‘7.6‘,
? ? ? ?‘comment_count‘: 39450,
? ? ? ?‘authors‘: u‘宝贝儿 / 李成敏 Clara Lee / 文章 Zhang Wen‘
? ?},
? ?{
? ? ? ?‘id‘: ‘394558‘,
? ? ? ?‘title‘: u‘李茶的姑妈‘,
? ? ? ?‘thumbnail‘: u‘https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2533384240.webp‘,
? ? ? ?‘rating‘: u‘6.3‘,
? ? ? ?‘comment_count‘: 38409,
? ? ? ?‘authors‘: u‘钱晨光 / 吴瑾蓉 / 黄才伦‘
? ?},
? ?{
? ? ? ?‘id‘: ‘26921827‘,
? ? ? ?‘title‘: u‘找到你‘,
? ? ? ?‘thumbnail‘: u‘https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2534471408.webp‘,
? ? ? ?‘rating‘: u‘4.3‘,
? ? ? ?‘comment_count‘: 682,
? ? ? ?‘authors‘: u‘姚晨 / 马伊琍 / 袁文康‘
? ?},
? ?{
? ? ? ?‘id‘: ‘26287884‘,
? ? ? ?‘title‘: u‘悲伤逆流成河‘,
? ? ? ?‘thumbnail‘: u‘https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2529701498.webp‘,
? ? ? ?‘rating‘: u‘7.5‘,
? ? ? ?‘comment_count‘: 33060,
? ? ? ?‘authors‘: u‘赵英博 / 任敏 / 辛云来‘
? ?},
? ?{
? ? ? ?‘id‘: ‘26287884‘,
? ? ? ?‘title‘: u‘嗝嗝老师‘,
? ? ? ?‘thumbnail‘: u‘https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2535365481.webp‘,
? ? ? ?‘rating‘: u‘7.5‘,
? ? ? ?‘comment_count‘: 33060,
? ? ? ?‘authors‘: u‘拉妮·玛克赫吉 / 内拉吉·卡比 / 萨钦‘
? ?}
]
# 电视剧
tvs = [
? ?{
? ? ? ?‘id‘: ‘235434‘,
? ? ? ?‘title‘: u‘如懿传‘,
? ? ? ?‘thumbnail‘: u‘https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2460165077.jpg‘,
? ? ? ?‘rating‘: u‘7.4‘,
? ? ? ?‘comment_count‘: 49328,
? ? ? ?‘authors‘: u‘拉妮·玛克赫吉 / 内拉吉·卡比 / 萨钦‘
? ?},
? ?{
? ? ? ?‘id‘: ‘48373095‘,
? ? ? ?‘title‘: u‘奇葩说第五季‘,
? ? ? ?‘thumbnail‘: u‘https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2534020405.jpg‘,
? ? ? ?‘rating‘: u‘8.4‘,
? ? ? ?‘comment_count‘: 2483,
? ? ? ?‘authors‘: u‘伊藤沙莉 / 中川大志 / 上原实矩 / 森绘梨佳 / 樱田通 /‘
? ?},
? ?{
? ? ? ?‘id‘: ‘27005982‘,
? ? ? ?‘title‘: u‘最亲爱的你‘,
? ? ? ?‘thumbnail‘: u‘https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2508399162.jpg‘,
? ? ? ?‘rating‘: u‘7.6‘,
? ? ? ?‘comment_count‘: 25532,
? ? ? ?‘authors‘: u‘杰西·普莱蒙 / 莫莉·香侬 / 布莱德利·惠特福德 / Maude Apatow / 麦迪逊·贝蒂 /‘
? ?},
? ?{
? ? ? ?‘id‘: ‘30290917‘,
? ? ? ?‘title‘: u‘我们无法成为野兽‘,
? ? ? ?‘thumbnail‘: u‘https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2537556934.jpg‘,
? ? ? ?‘rating‘: u‘3.7‘,
? ? ? ?‘comment_count‘: 8493,
? ? ? ?‘authors‘: u‘钟汉良 / 杨颖 / 甘婷婷 / 孙艺洲 / 亓航 /‘
? ?},
? ?{
? ? ? ?‘id‘: ‘292843‘,
? ? ? ?‘title‘: u‘奇遇人生‘,
? ? ? ?‘thumbnail‘: u‘https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2533929218.jpg‘,
? ? ? ?‘rating‘: u‘8.2‘,
? ? ? ?‘comment_count‘: 23456,
? ? ? ?‘authors‘: u‘托马斯·哈登·丘奇 / 泰伦斯·霍华德 / 波伊德·霍布鲁克 / 瑞斯·维克菲尔德 / 马尔洛·托马斯 /‘
? ?}
]
@app.route(‘/‘)
def hello_world():
? ?context = {
? ? ? ?"movies": movies,
? ? ? ?"tvs": tvs
? ?}
? ?return flask.render_template(‘index.html‘, **context)
if __name__ == ‘__main__‘:
? ?app.run()
这里只需要渲染数据即可,即将**context
传给模板。
index.html
<!DOCTYPE html> <html lang="en"> <head> ? ? ?<meta charset="UTF-8"> ? ? ?<title>首页</title> ? ? ?<style> ? ? ? ? *{ ? ? ? ? ? ? padding: 0; ? ? ? ? ? ? ? ? ? ? ? ? margin: 0; ? ? ? ? ? ? list-style: none; ? ? ? ? ? ? ? ? ? ? ? ? text-decoration: none; ? ? ? ? ? ? font-family: "Microsoft Ya Hei"; ? ? ? ? ?} ? ? ? ? .page{ ? ? ? ? ? ? width: 375px; ? ? ? ? ? ? height: 667px; ? ? ? ? ? ? ? ? ? ? ? ? background: #d1fcff; ? ? ? ? ?} ? ? ? ? .page .searich-group{ ? ? ? ? ? ? padding: 14px 8px; ? ? ? ? ? ? background: #41b357; ? ? ? ? ?} ? ? ? ? .page .searich-group .search-input{ ? ? ? ? ? ?{# 块级元素 #} ? ? ? ? ? ? display: block; ? ? ? ? ? ? height: 30px; ? ? ? ? ? ? ? ? ? ? ? ? width: 100%; ? ? ? ? ? ? ? ? ? ? ? ? background: #fff; ? ? ? ? ? ? {# 与盒子整体匹配 #} ? ? ? ? ? ? ? ? ? ? ? ? box-sizing: border-box; ? ? ? ? ? ? {# 搜索框不显示 #} ? ? ? ? ? ? border: none; ? ? ? ? ? ? {# 鼠标点击搜索框后不显示边框 #} ? ? ? ? ? ? outline: none; ? ? ? ? ? ? {# 边框圆角 #} ? ? ? ? ? ? border-radius: 5px; ? ? ? ? ?} ? ? ? ? ? ? ? ? ? ?.list-group{ ? ? ? ? ? ? background: #fff; ? ? ? ? ? ? padding: 17px 18px; ? ? ? ? ?} ? ? ? ? ? ? ? ? ? ?.list-group .group-top{ ? ? ? ? ? ? font-size: 18px; ? ? ? ? ? ? {# 获取浮动元素 #} ? ? ? ? ? ? overflow: hidden; ? ? ? ? ?} ? ? ? ? ? ? ? ? ? ?.group-top .group-title{ ? ? ? ? ? ? float: left; ? ? ? ? ? ? color: #000; ? ? ? ? ?} ? ? ? ? ? ? ? ? ? .group-top .more-btn{ ? ? ? ? ? ? float: right; ? ? ? ? } ? ? ? ? ? ? ? ? ? ?.any-group{ ? ? ? ? ? ? margin-top: 20px; ? ? ? ? ? ? overflow: hidden; ? ? ? ? ?} ? ? ? ? .any-group .item-group{ ? ? ? ? ? ? width: 100px; ? ? ? ? ? ? float: left; ? ? ? ? ? ? margin-right: 8px; ? ? ? ? ?} ? ? ? ? ? ? ? ? ? ?.item-group .thumbnail{ ? ? ? ? ? ? width: 100%; ? ? ? ? ? ? height: 140px; ? ? ? ? ?} ? ? ? ? ? ? ? ? ? ?.item-group .item-title{ ? ? ? ? ? ? text-align: center; ? ? ? ? ? ? margin-top: 12px; ? ? ? ? ?} ? ? ? ? .item-group .item-rating{ ? ? ? ? ? ? color: #acacac; ? ? ? ? ? ? text-align: center; ? ? ? ? ? ? font-size: 12px; ? ? ? ? ?} ? ? ? ? ? ? ? ? ? ?.item-rating img{ ? ? ? ? ? ? width: 10px; ? ? ? ? ? ? height: 10px; ? ? ? ? ?} ? ? ?</style> </head> <body> ?? ? <div class="page"> ?? ? {# 搜索框 #} ?? ? <div class="searich-group"> ?? ? ?? ?<input class="search-input" type="text" placeholder="请输入查询条件"> ? ? ?</div> ?? ? {# 电影 #} ? ? ?<div class="list-group"> ? ? ? ? ?<div class="group-top"> ? ? ? ? ? ? ?<span class="group-title">电影</span> ? ? ? ? ? ? ?<a href="#" class="more-btn">更多</a> ? ? ? ? ?</div> ? ? ? ? ?<div class="any-group"> ? ? ? ? ? ? ?{% for movie in movies[0:3] %} ? ? ? ? ? ? ?? ? <div class="item-group"> ? ? ? ? ? ? ? ? ? ?? <img src="{{ movie.thumbnail }}" class="thumbnail" > ? ? ? ? ? ? ?? ? ?? ?<p class="item-title">{{ movie.title }}</p> ? ? ? ? ? ? ? ? ? ? <p class="item-rating"> ? ? ? ? ? ? ? ? ? ? ?{# 确定整星个数 #} ? ? ? ? ? ? ?? ? ?? ?{% set lights = ((movie.rating|int)/2)|int %} ? ? ? ? ? ? ?? ? ?? ?{# 确定半个星个数 #} ? ? ? ? ? ? ?? ? ?? ?{% set halfs = ((movie.rating|int)%2) %} ? ? ? ? ? ? ?? ? ?? ?{# 灰色星星个数 #} ? ? ? ? ? ? ?? ? ?? ?{% set grays = 5 - lights - halfs %} ? ? ? ? ? ? ?? ? ?? ?{# 渲染高亮星星 #} ? ? ? ? ? ? ?? ? ?? ?{% for light in range(0, lights) %} ? ? ? ? ? ? ?? ? ?? ? ? ?<img src="{{ url_for(‘static‘, filename=‘img/rate_light.png‘) }}"> ? ? ? ? ? ? ? ? ? ? ?{% endfor %} ? ? ? ? ? ? ? ? ? ? ?{# 渲染半高亮星星 #} ? ? ? ? ? ? ? ? ? ? ?{% for light in range(0, halfs) %} ? ? ? ? ? ? ? ? ? ? ? ? ?<img src="{{ url_for(‘static‘, filename=‘img/rate_half.jpg‘) }}"> ? ? ? ? ? ? ? ? ? ? ?{% endfor %} ? ? ? ? ? ? ? ? ? ? ?{# 渲染灰色星星 #} ? ? ? ? ? ? ? ? ? ? ?{% for light in range(0, grays) %} ? ? ? ? ? ? ? ? ? ? ? ? ?<img src="{{ url_for(‘static‘, filename=‘img/rate_gray.png‘) }}"> ? ? ? ? ? ? ? ? ? ? ?{% endfor %} ? ? ? ? ? ? ? ? ? ? ?{{ movie.rating }} ? ? ? ? ? ? ? ? ? ? ?</p> ? ? ? ? ? ? ? ? ?</div> ? ? ? ? ? ? ?{% endfor %} ? ? ? ? ?</div> ? ? ?</div> ? ? ?{# 电视剧 #} ? ? ? ? ? ? ? <div class="list-group"> ? ? ? ? ? ? ? ? ? <div class="group-top"> ? ? ? ? ? ? ? ? ? ? ? <span class="group-title">电视剧</span> ? ? ? ? ? ? ? ? ?? ? ? ? ? <a href="#" class="more-btn">更多</a> ? ? ? ? ? ? ? ? ? </div> ? ? ? ? ? ? ? ? ? ? ? <div class="any-group"> ? ? ? ? ? ? ? ? ? ? ? {% for tv in tvs[0:3] %} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<div class="item-group"> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<img src="{{ tv.thumbnail }}" class="thumbnail" > ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<p class="item-title">{{ tv.title }}</p> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<p class="item-rating"> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?{# 确定整星个数 #} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?{% set lights = ((tv.rating|int)/2)|int %} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?{# 确定半个星个数 #} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?{% set halfs = ((tv.rating|int)%2) %} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?{# 灰色星星个数 #} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?{% set grays = 5 - lights - halfs %} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?{# 渲染高亮星星 #} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?{% for light in range(0, lights) %} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<img src="{{ url_for(‘static‘, filename=‘img/rate_light.png‘) }}"> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?{% endfor %} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?{# 渲染半高亮星星 #} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?{% for light in range(0, halfs) %} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<img src="{{ url_for(‘static‘, filename=‘img/rate_half.jpg‘) }}"> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?{% endfor %} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?{# 渲染灰色星星 #} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?{% for light in range(0, grays) %} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<img src="{{ url_for(‘static‘, filename=‘img/rate_gray.png‘) }}"> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?{% endfor %} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?{{ tv.rating }} ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?</p> ? ? ? ? ? ? ? ? ? ? ? ? ? ?</div> ? ? ? ? ? ? ? ? ? ? {% endfor %} ? ? ? ? ? ? ? ? </div> ? ? ? ? ? ? </div> ? ? ? ? ?</div> ? ? ?</body> </html>
上面代码综合了之前学过的知识,包括:flask for 循环
、set模板赋值
其余都是前端的内容,这里不做过多的阐述。
- 分析优化
观察index.html
中设置星星显示数量代码,我们发现在电影和电视剧两部分的代码是大体一致的,遇到重复代码就要想到优化,这里就可以用到我们学过的宏
来简化上面的代码:
<div class="list-group"> ? ?<div class="group-top"> ? ?<span class="group-title">电影</span> ? ?<a href="#" class="more-btn">更多</a></div><div class="any-group"> ? ?{% for movie in movies[0:3] %} ? ? ? ?<div class="item-group"> ? ? ? ? ? ?<img src="{{ movie.thumbnail }}" class="thumbnail" > ? ? ? ? ? ?<p class="item-title">{{ movie.title }}</p> ? ? ? ? ? ?<p class="item-rating"> ? ? ? ? ? ? ? ?{# 确定整星个数 #} ? ? ? ? ? ? ? ?{% set lights = ((movie.rating|int)/2)|int %} ? ? ? ? ? ? ? ?{# 确定半个星个数 #} ? ? ? ? ? ? ? ?{% set halfs = ((movie.rating|int)%2) %} ? ? ? ? ? ? ? ?{# 灰色星星个数 #} ? ? ? ? ? ? ? ?{% set grays = 5 - lights - halfs %} ? ? ? ? ? ? ? ?{# 渲染高亮星星 #} ? ? ? ? ? ? ? ?{% for light in range(0, lights) %} ? ? ? ? ? ? ? ? ? ?<img src="{{ url_for(‘static‘, filename=‘img/rate_light.png‘) }}"> ? ? ? ? ? ? ? ?{% endfor %} ? ? ? ? ? ? ? ?{# 渲染半高亮星星 #} ? ? ? ? ? ? ? ?{% for light in range(0, halfs) %} ? ? ? ? ? ? ? ? ? ?<img src="{{ url_for(‘static‘, filename=‘img/rate_half.jpg‘) }}"> ? ? ? ? ? ? ? ?{% endfor %} ? ? ? ? ? ? ? ?{# 渲染灰色星星 #} ? ? ? ? ? ? ? ?{% for light in range(0, grays) %} ? ? ? ? ? ? ? ? ? ?<img src="{{ url_for(‘static‘, filename=‘img/rate_gray.png‘) }}"> ? ? ? ? ? ? ? ?{% endfor %} ? ? ? ? ? ? ? ?{{ movie.rating }} ? ? ? ? ? ?</p> ? ? ? ?</div> ? ?{% endfor %}</div>
将以上代码提取出来作为宏,我们发现变化的只有两个——电影
/电视剧
、movies
/tvs
,其余都一样,所以我们可以将这两个作为变量传入:
- 第一次优化——宏
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>首页</title>
? ?<style>
? ? ? ?*{
? ? ? ? ? ?padding: 0;
? ? ? ? ? ?margin: 0;
? ? ? ? ? ?list-style: none;
? ? ? ? ? ?text-decoration: none;
? ? ? ? ? ?font-family: "Microsoft Ya Hei";
? ? ? ?}
? ? ? ?.page{
? ? ? ? ? ?width: 375px;
? ? ? ? ? ?height: 667px;
? ? ? ? ? ?background: #d1fcff;
? ? ? ?}
? ? ? ?.page .searich-group{
? ? ? ? ? ?padding: 14px 8px;
? ? ? ? ? ?background: #41b357;
? ? ? ?}
? ? ? ?.page .searich-group .search-input{
? ? ? ?{# 块级元素 #}
? ? ? ? ? ?display: block;
? ? ? ? ? ?height: 30px;
? ? ? ? ? ?width: 100%;
? ? ? ? ? ?background: #fff;
? ? ? ?{# 与盒子整体匹配 #}
? ? ? ? ? ?box-sizing: border-box;
? ? ? ?{# 搜索框不显示 #}
? ? ? ? ? ?border: none;
? ? ? ?{# 鼠标点击搜索框后不显示边框 #}
? ? ? ? ? ?outline: none;
? ? ? ?{# 边框圆角 #}
? ? ? ? ? ?border-radius: 5px;
? ? ? ?}
? ? ? ?.list-group{
? ? ? ? ? ?background: #fff;
? ? ? ? ? ?padding: 17px 18px;
? ? ? ?}
? ? ? ?.list-group .group-top{
? ? ? ? ? ?font-size: 18px;
? ? ? ?{# 获取浮动元素 #}
? ? ? ? ? ?overflow: hidden;
? ? ? ?}
? ? ? ?.group-top .group-title{
? ? ? ? ? ?float: left;
? ? ? ? ? ?color: #000;
? ? ? ?}
? ? ? ?.group-top .more-btn{
? ? ? ? ? ?float: right;
? ? ? ?}
? ? ? ?.any-group{
? ? ? ? ? ?margin-top: 20px;
? ? ? ? ? ?overflow: hidden;
? ? ? ?}
? ? ? ?.any-group .item-group{
? ? ? ? ? ?width: 100px;
? ? ? ? ? ?float: left;
? ? ? ? ? ?margin-right: 8px;
? ? ? ?}
? ? ? ?.item-group .thumbnail{
? ? ? ? ? ?width: 100%;
? ? ? ? ? ?height: 140px;
? ? ? ?}
? ? ? ?.item-group .item-title{
? ? ? ? ? ?text-align: center;
? ? ? ? ? ?margin-top: 12px;
? ? ? ?}
? ? ? ?.item-group .item-rating{
? ? ? ? ? ?color: #acacac;
? ? ? ? ? ?text-align: center;
? ? ? ? ? ?font-size: 12px;
? ? ? ?}
? ? ? ?.item-rating img{
? ? ? ? ? ?width: 10px;
? ? ? ? ? ?height: 10px;
? ? ? ?}
? ?</style>
</head>
<body>
? ?{% macro listGroup(category, items) %}
? ? ? ?<div class="list-group">
? ? ? ? ? ?<div class="group-top">
? ? ? ? ? ? ? ?<span class="group-title">{{ category }}</span>
? ? ? ? ? ? ? ?<a href="#" class="more-btn">更多</a>
? ? ? ? ? ?</div>
? ? ? ? ? ?<div class="any-group">
? ? ? ? ? ? ? ?{% for item in items[0:3] %}
? ? ? ? ? ? ? ? ? ?<div class="item-group">
? ? ? ? ? ? ? ? ? ?<img src="{{ item.thumbnail }}" class="thumbnail" >
? ? ? ? ? ? ? ? ? ?<p class="item-title">{{ item.title }}</p>
? ? ? ? ? ? ? ? ? ?<p class="item-rating">
? ? ? ? ? ? ? ? ? ? ? ?{# 确定整星个数 #}
? ? ? ? ? ? ? ? ? ? ? ?{% set lights = ((item.rating|int)/2)|int %}
? ? ? ? ? ? ? ? ? ? ? ?{# 确定半个星个数 #}
? ? ? ? ? ? ? ? ? ? ? ?{% set halfs = ((item.rating|int)%2) %}
? ? ? ? ? ? ? ? ? ? ? ?{# 灰色星星个数 #}
? ? ? ? ? ? ? ? ? ? ? ?{% set grays = 5 - lights - halfs %}
? ? ? ? ? ? ? ? ? ? ? ?{# 渲染高亮星星 #}
? ? ? ? ? ? ? ? ? ? ? ?{% for light in range(0, lights) %}
? ? ? ? ? ? ? ? ? ? ? ? ? ?<img src="{{ url_for(‘static‘, filename=‘img/rate_light.png‘) }}">
? ? ? ? ? ? ? ? ? ? ? ?{% endfor %}
? ? ? ? ? ? ? ? ? ? ? ?{# 渲染半高亮星星 #}
? ? ? ? ? ? ? ? ? ? ? ?{% for light in range(0, halfs) %}
? ? ? ? ? ? ? ? ? ? ? ? ? ?<img src="{{ url_for(‘static‘, filename=‘img/rate_half.jpg‘) }}">
? ? ? ? ? ? ? ? ? ? ? ?{% endfor %}
? ? ? ? ? ? ? ? ? ? ? ?{# 渲染灰色星星 #}
? ? ? ? ? ? ? ? ? ? ? ?{% for light in range(0, grays) %}
? ? ? ? ? ? ? ? ? ? ? ? ? ?<img src="{{ url_for(‘static‘, filename=‘img/rate_gray.png‘) }}">
? ? ? ? ? ? ? ? ? ? ? ?{% endfor %}
? ? ? ? ? ? ? ? ? ? ? ?{{ item.rating }}
? ? ? ? ? ? ? ? ? ?</p>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?{% endfor %}
? ? ? ? ? ?</div>
? ? ? ?</div>
? ?{% endmacro %}
? ?<div class="page">
? ? ? ?{# 搜索框 #}
? ? ? ?<div class="searich-group">
? ? ? ? ? ?<input class="search-input" type="text" placeholder="请输入查询条件">
? ? ? ?</div>
? ? ? ?{# 电影 #}
? ? ? ?{{ listGroup(‘电影‘, movies) }}
? ? ? ?{# 电视剧 #}
? ? ? ?{{ listGroup(‘电视剧‘, tvs) }}
? ?</div>
</body>
</html>
上面我们利用宏
将首页代码进行了第一次优化。如果我们现在还有其他页面,试想一下,首页上面的搜索框
以及页面背景
是否可以提取为公用的,其他页面在应用到的时候通过继承来实现呢?答案是肯定的。
所以我们现在新建base.html
文件,并且将页面布局代码,提出,再想一下,既然名为公用也就意味着其他代码也可以继承这个base.html
,那么页面内容:
这部分代码是不是就不可以再在base.html
里了【答:是】,但是我们又要往base.html
这里面插入上图部分代码,那要用什么呀?block
对吧。此外,按照习惯,我们同样将样式style
以文件的形式提取出来,此时头部搜索样式与内容部分样式肯定是不能提取在一个文件里的,因为在一个文件里每次都会加载所有的代码,这样在head
中就没必要加载内容的样式,所以我们把样式分别提取成css
文件,一个是搜索栏和页面背景,命名为base.css
:
*{ ? ?padding: 0; ? ?margin: 0; ? ?list-style: none; ? ? ? ?text-decoration: none; ? ? ? ?font-family: "Microsoft Ya Hei";}.page{ ? ?width: 375px; ? ? ? ?height: 667px; ? ?background: #d1fcff;}.page .searich-group{ ? ?padding: 14px 8px; ? ?background: #41b357;}.page .searich-group .search-input{ ? ?/* {# 块级元素 #} */
? ?display: block; ? ?height: 30px; ? ? ? ?width: 100%; ? ? ? ?background: #fff; ? ?/* {# 与盒子整体匹配 #} */
? ?box-sizing: border-box; ? ?/* {# 搜索框不显示 #} */
? ?border: none; ? ?/* {# 鼠标点击搜索框后不显示边框 #} */
? ?outline: none; ? ?/* {# 边框圆角 #} */
? ?border-radius: 5px;}
另一个是页面样式,命名为index_page.css
:
.list-group{ ? ?background: #fff; ? ?padding: 17px 18px;}.list-group .group-top{ ? ?font-size: 18px; ? ?/* {# 获取浮动元素 #} */
? ?overflow: hidden;}.group-top .group-title{ ? ?float: left; ? ?color: #000;}.group-top .more-btn{ ? ?float: right;}.any-group{ ? ?margin-top: 20px; ? ?overflow: hidden;}.any-group .item-group{ ? ?width: 100px; ? ? ? ?float: left; ? ? ? ?margin-right: 8px;}.item-group .thumbnail{ ? ?width: 100%; ? ? ? ?height: 140px;}.item-group .item-title{ ? ?text-align: center; ? ?margin-top: 12px;}.item-group .item-rating{ ? ?color: #acacac; ? ?text-align: center; ? ? ? ?font-size: 12px;}.item-rating img{ ? ?width: 10px; ? ? ? ?height: 10px;}
在static
文件夹下新建css
文件夹,然后分别新建以上两个文件:
综上,我们最后base.html
文件代码应该如下:
base.html
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>首页</title>
? ?<link rel="stylesheet" href="{{ url_for(‘static‘, filename=‘css/base.css‘) }}">
? ?{% block head %}{% endblock %}
</head>
<body>
? ?<div class="page">
? ? ? ?{# 搜索框 #}
? ? ? ?<div class="searich-group">
? ? ? ? ? ?<input class="search-input" type="text" placeholder="请输入查询条件">
? ? ? ?</div>
? ? ? ?{% block content %}{% endblock %}
? ?</div>
</body>
</html>
其中block head
填充的是内容部分的样式代码。
现在公用部分已经提取好,回到index.html
,我们发现要做的工作只需要
????1.继承base.html
????2. 填充block
即可。
index.html
{% extends ‘base.html‘ %}
{% block head %}
? ?<link rel="stylesheet" href="{{ url_for(‘static‘, filename=‘css/index_page.css‘) }}">
{% endblock %}
{% block content %}
? ?{% macro listGroup(category, items) %}
? ? ? ?<div class="list-group">
? ? ? ? ? ?<div class="group-top">
? ? ? ? ? ? ? ?<span class="group-title">{{ category }}</span>
? ? ? ? ? ? ? ?<a href="#" class="more-btn">更多</a>
? ? ? ? ? ?</div>
? ? ? ? ? ?<div class="any-group">
? ? ? ? ? ? ? ?{% for item in items[0:3] %}
? ? ? ? ? ? ? ? ? ?<div class="item-group">
? ? ? ? ? ? ? ? ? ?<img src="{{ item.thumbnail }}" class="thumbnail" >
? ? ? ? ? ? ? ? ? ?<p class="item-title">{{ item.title }}</p>
? ? ? ? ? ? ? ? ? ?<p class="item-rating">
? ? ? ? ? ? ? ? ? ? ? ?{# 确定整星个数 #}
? ? ? ? ? ? ? ? ? ? ? ?{% set lights = ((item.rating|int)/2)|int %}
? ? ? ? ? ? ? ? ? ? ? ?{# 确定半个星个数 #}
? ? ? ? ? ? ? ? ? ? ? ?{% set halfs = ((item.rating|int)%2) %}
? ? ? ? ? ? ? ? ? ? ? ?{# 灰色星星个数 #}
? ? ? ? ? ? ? ? ? ? ? ?{% set grays = 5 - lights - halfs %}
? ? ? ? ? ? ? ? ? ? ? ?{# 渲染高亮星星 #}
? ? ? ? ? ? ? ? ? ? ? ?{% for light in range(0, lights) %}
? ? ? ? ? ? ? ? ? ? ? ? ? ?<img src="{{ url_for(‘static‘, filename=‘img/rate_light.png‘) }}">
? ? ? ? ? ? ? ? ? ? ? ?{% endfor %}
? ? ? ? ? ? ? ? ? ? ? ?{# 渲染半高亮星星 #}
? ? ? ? ? ? ? ? ? ? ? ?{% for light in range(0, halfs) %}
? ? ? ? ? ? ? ? ? ? ? ? ? ?<img src="{{ url_for(‘static‘, filename=‘img/rate_half.jpg‘) }}">
? ? ? ? ? ? ? ? ? ? ? ?{% endfor %}
? ? ? ? ? ? ? ? ? ? ? ?{# 渲染灰色星星 #}
? ? ? ? ? ? ? ? ? ? ? ?{% for light in range(0, grays) %}
? ? ? ? ? ? ? ? ? ? ? ? ? ?<img src="{{ url_for(‘static‘, filename=‘img/rate_gray.png‘) }}">
? ? ? ? ? ? ? ? ? ? ? ?{% endfor %}
? ? ? ? ? ? ? ? ? ? ? ?{{ item.rating }}
? ? ? ? ? ? ? ? ? ?</p>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?{% endfor %}
? ? ? ? ? ?</div>
? ? ? ?</div>
? ?{% endmacro %}
? ?{# 电影 #}
? ?{{ listGroup(‘电影‘, movies) }}
? ?{# 电视剧 #}
? ?{{ listGroup(‘电视剧‘, tvs) }}
{% endblock %}
执行文件,页面显示不变。
接着我们来完成更多
的模块,点击更多
后页面显示效果如上图。
我们先来分析上面这个页面,我们发现除了搜索栏下面的图片区域有些变化以外,其余都是base.html
的布局,所以我们首先想到可以继承base.html
,而图片显示规则则和我们前面定义过的宏
完全一致,我们就可以导入写好的宏
。
所以我们先在templates
文件夹下新建moreList.html
文件:
我们已经在base.html
中保留了block
,所以页面新的布局只需要通过block
进行插入即可:
moreList.html
{% extends ‘base.html‘ %}
{% from ‘macros/macros.html‘ import itemGroup %}
{% block head %}
? ?<link rel="stylesheet" href="{{ url_for(‘static‘, filename=‘css/item.css‘) }}">
? ?<style>
? ? ? ?.content{
? ? ? ? ? ?padding: 25px 10px;
? ? ? ?}
? ?</style>
{% endblock %}
{% block content %}
? ?<div class="content">
? ? ? ?{% for item in items %}
? ? ? ? ? ?{{ itemGroup(item) }}
? ? ? ?{% endfor %}
? ?</div>
{% endblock %}
如果对软件测试、接口测试、自动化测试、面试经验交流。感兴趣可以加软件测试交流:1085991341,还会有同行一起技术交流。
当然,我们还要将更多
加上链接,我们先定义函数:
@app.route(‘/list/<int:category>/‘)def itemList(category):
? ?# 如果category等于1:返回电影
? ?# 如果category等于2:返回电视剧
? ?# 否则返回空数组
? ?items = [] ? ?if category == 1:
? ? ? ?items = movies ? ?elif category == 2:
? ? ? ?items = tvs ? ?else:
? ? ? ?items = [] ? ?return flask.render_template(‘moreList.html‘, items=items)
这里我们新加了一个整型的category
参数,方便我们对进入的页面到底是电影还是电视剧进行分辨,在macros.html
文件中需要加上更多的链接:
<a href="{{ url_for(‘itemList‘, category=category) }}" class="more-btn">更多</a>
这样就会完成点击更多
后的页面跳转和跳转后的页面布局了。
以上就是一个完整的一个项目实战实操,以上内容希望对你有帮助,有被帮助到的朋友欢迎点赞,评论。
以上是关于完整版模板项目实战实战演练的主要内容,如果未能解决你的问题,请参考以下文章
《TensorFlow实战Google深度学习框架 (第2版) 》中文版PDF和源代码完整版下载