我们所要实现的效果：

点击电影的更多，跳转到更多的电影页面；点击电视剧的更多，跳转到更多的电视剧页面。

三个页面的风格相同，可以设置一个模板，三个页面都继承这个模板

1.在指定模板之前，把css放在一个文件里

 base.css 针对整个大框架的

  1. /*清理网页内部自己的css*/
  2. *{
  3.     margin: 0;
  4.     padding: 0;
  5.     list-style: none;
  6.     text-decoration: none;
  7. }
  8. .container{
  9.     width: 375px;
  10.     height: 600px;
  11.     background: white;
  12. }
  13.  
  14. .search-group{
  15.     padding: 14px 8px;
  16.     background: #41be57;
  17. }
  18. .search-group .search-input{
  19.     background: #fff;
  20.     display: block;
  21.     width: 100%;
  22.     height:30px;
  23.     border-radius: 5px;
  24.     outline: none;
  25.     border: none;
  26. }

item.css 针对项目排版的

  1. .item-list-group .item-list-top{
  2.     overflow: hidden;
  3.     padding: 10px;
  4. }
  5. .item-list-group .module-title{
  6.     float: left;
  7. }
  8. .item-list-group .more-btn{
  9.     float: right;
  10. }
  11.  
  12. .list-group{
  13.     /*清除浮动*/
  14.     overflow: hidden;
  15.     padding: 10px;
  16. }
  17. .item-group{
  18.     float: left;
  19.     margin-right: 10px;
  20. }
  21. .item-group .thumbnail{
  22.     display: block;
  23.     width: 100px;
  24. }
  25. .item-group .item-title{
  26.     font-size: 12px;
  27.     text-align: center;
  28. }
  29. .item-group .item-rating{
  30.     font-size: 12px;
  31.     text-align: center;
  32. }
  33. .item-rating img{
  34.     width: 10px;
  35.     height: 10px;
  36. }
  37.  
  38. .item-group .thumbnail{
  39.     width: 100px;
  40.     height: 140px;
  41. }

2.接着构建模板base.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}">
  6.     <link rel="stylesheet" href="{{ url_for('static', filename='css/item.css') }}">
  7.     <title>{% block title %}{% endblock %}</title>
  8.     {% block head %}{% endblock %}
  9. </head>
  10. <body>
  11.     <div class="container">
  12.         <div class="search-group">
  13.             <input type="text" class="search-input" placeholder="搜索...">
  14.         </div>
  15.         {% block body %}{% endblock %}
  16.     </div>
  17. </body>
  18. </html>

3.把原来的宏都整理好放入marcos.html

  1. {# itemGroup的宏 #}
  2. {% macro itemGroup(thumbnail,title,rating) %}
  3.     <div class="item-group">
  4.                 <img src="{{ thumbnail }}" alt="" class="thumbnail">
  5.                 <p class="item-title">{{ title }}</p>
  6.                 <p class="item-rating">
  7.                     {% set lights = ((rating|int)/2)|int %}
  8.                     {% set halfs = (rating|int)%2 %}
  9.                     <!--输出{{ halfs }}-->
  10.                     {% set grays = 5-lights-halfs %}
  11.                     {% for light in range(0,lights) %}
  12.                         <img src="{{ url_for("static",filename="images/rate_light.png") }}" alt="">
  13.                     {% endfor %}
  14.                     {% for half in range(0,halfs) %}
  15.                         <img src="{{ url_for("static",filename="images/rate_half.png") }}" alt="">
  16.                     {% endfor %}
  17.                     {% for gray in range(0,grays) %}
  18.                         <img src="{{ url_for("static",filename="images/rate_gray.png") }}" alt="">
  19.                     {% endfor %}
  20.                     {{ rating }}
  21.                 </p>
  22.             </div>
  23. {% endmacro %}
  24.  
  25. {# listGroup的宏-#}
  26. {% macro listGroup(module_title,items,category=category) %}
  27.     <div class="item-list-group">
  28.         <div class="item-list-top">
  29.             <span class="module-title">{{ module_title }}</span>
  30. {#            /list/1/#}
  31. {#            /list/?category=1#}
  32.             <a href="{{ url_for("item_list",category=category) }}" class="more-btn">更多</a>
  33.         </div>
  34.         <div class="list-group">
  35.             {% for item in items[0:3] %}
  36.                 {{ itemGroup(item.thumbnail, item.title, item.rating) }}
  37.             {% endfor %}
  38.         </div>
  39.     </div>
  40. {% endmacro %}

4.接下来写主页面index.html，继承自base.html，同时导入宏，并实现block

  1. <!--继承自base-->
  2. {% extends 'base.html' %}
  3. <!--导入宏-->
  4. {% from 'macros.html' import itemGroup, listGroup%}
  5.  
  6. <!--实现block-->
  7. {% block body %}
  8.     {{ listGroup("电影", movies, 1) }}
  9.     {{ listGroup("电视剧", tvs, 2) }}
  10. {% endblock %}

5.剩下两个跳转的页面，通过后台传递数据

两个页面均是list.html，继承自base.html，不同的是传进来的items不同

  1. {%  extends 'base.html' %}
  2. {% from 'macros.html' import itemGroup%}
  3.  
  4. {% block body %}
  5.     {% for item in items %}
  6.         {{ itemGroup(item.thumbnail,item.title,item.rating) }}
  7.     {% endfor %}
  8. {% endblock %}

6.那么怎么让不同的点击，传进来的item不同呢

点击的位置在index.html

 listGroup是一个宏，在marcos.html宏里根据传进来的category不同，使点击“更多”跳转到不同的页面

 那么接下来我们看app.py

  1. from flask import Flask, render_template,request
  2.  
  3. app = Flask(__name__)
  4. app.config['TEMPLATES_AUTO_RELOAD'] = True
  5.  
  6. movies = [
  7.     {
  8.         'id': '',
  9.         'thumbnail': 'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2570059839.webp',
  10.         'title': u'天气之子',
  11.         'rating': u'7.1',
  12.         'comment_count': 12000,
  13.         'authors': u'新海诚'
  14.     },
  15.     {
  16.         'id': '',
  17.         'thumbnail': 'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2570972919.webp',
  18.         'title': u'他们已不再变老',
  19.         'rating': u'8.8',
  20.         'comment_count': 11068,
  21.         'authors': u'彼得·杰克逊'
  22.     },
  23.     {
  24.         'id': '',
  25.         'thumbnail': 'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2568577681.webp',
  26.         'title': u'攀登者',
  27.         'rating': u'6.3',
  28.         'comment_count': 14791,
  29.         'authors': u'李仁港'
  30.     },
  31.     {
  32.         'id': '',
  33.         'thumbnail': 'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2573582192.webp',
  34.         'title': u'决战中途岛',
  35.         'rating': u'7.7',
  36.         'comment_count': 36410,
  37.         'authors': u'罗兰·艾默里奇'
  38.     },
  39.     {
  40.         'id': '',
  41.         'thumbnail': 'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2572166063.webp',
  42.         'title': u'少年的你',
  43.         'rating': u'8.4',
  44.         'comment_count': 50979,
  45.         'authors': u'曾国祥'
  46.     },
  47.     {
  48.         'id': '',
  49.         'thumbnail': 'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2572429001.webp',
  50.         'title': u'受益人',
  51.         'rating': u'6.7',
  52.         'comment_count': 23514,
  53.         'authors': u'申奥'
  54.     }
  55. ]
  56. tvs = [
  57.         {
  58.             'id': '',
  59.             'thumbnail': 'https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2564153546.webp',
  60.             'title': u'摩登情爱 第一季',
  61.             'rating': u'8.7',
  62.             'comment_count': 42220,
  63.             'authors': u'约翰·卡尼'
  64.         },
  65.         {
  66.             'id': '',
  67.             'thumbnail': 'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2562953341.jpg',
  68.             'title': u'长安十二时辰',
  69.             'rating': u'8.3',
  70.             'comment_count': 30362,
  71.             'authors': u'曹盾'
  72.         },
  73.         {
  74.             'id': '',
  75.             'thumbnail': 'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2571299085.jpg',
  76.             'title': u'战火浮生 第一季',
  77.             'rating': u'7.6',
  78.             'comment_count': 18374,
  79.             'authors': u'亚当·史密斯'
  80.         },
  81.         {
  82.             'id': '',
  83.             'thumbnail': 'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2235972558.jpg',
  84.             'title': u'名侦探柯南 ',
  85.             'rating': u'9.2',
  86.             'comment_count': 88888,
  87.             'authors': u'青山刚昌'
  88.         },
  89.         {
  90.             'id': '',
  91.             'thumbnail': 'https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2554618756.jpg',
  92.             'title': u'厨神小当家',
  93.             'rating': u'4.6',
  94.             'comment_count': 10362,
  95.             'authors': u'川崎逸朗'
  96.         },
  97.         {
  98.             'id': '',
  99.             'thumbnail': 'https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2240922426.jpg',
  100.             'title': u'士兵突击',
  101.             'rating': u'9.3',
  102.             'comment_count': 92492,
  103.             'authors': u'康洪雷'
  104.         }
  105. ]
  106.  
  107. @app.route('/')
  108. def hello_world():
  109.     context = {
  110.         'movies': movies,
  111.         'tvs': tvs
  112.     }
  113.     return render_template('index.html', **context)
  114.  
  115. @app.route('/cjs/')
  116. def hello_to_cjs():
  117.     return '欢迎访问蔡军帅的网站！'
  118.  
  119. @app.route('/list/')
  120. def item_list():
  121.     category = int(request.args.get('category'))
  122.     items = None
  123.     if category == 1:
  124.         items = movies
  125.     else:
  126.         items = tvs
  127.     return render_template('list.html', items=items)
  128.  
  129. if __name__ == '__main__':
  130.     app.run()

7.最后传参数跳转就大功告成啦！再总结一下

python flask框架学习(三)——豆瓣微信小程序案例(二)整理封装block，模板的继承的更多相关文章

  1. python flask框架学习(三)——豆瓣微信小程序案例(一)templates的使用，宏的使用，前端后台传数据，前端写python语句

    目录 一.templates的使用 (1)在templates里创建一个index.html (2)再在app.py里写 (3)展示效果 二.构建第一个电影评分 (1)准备好素材放进static里的i ...

  2. python flask豆瓣微信小程序案例

    项目步骤 定义首页模板index.html <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  3. （三）微信小程序之发送服务通知（模板消息）

    1.后端获取AccessToken返回给微信端 微信小程序端请求后端得到AccessToken   2.后端获取openid返回给微信端   微信小程序端登录请求后端得到openid   3.发送消息 ...

  4. 微信小程序案例大全

    微信小程序demo:足球,赛事分析 小程序简易导航 小程序demo:办公审批 小程序Demo:电魔方 小程序demo:借阅伴侣 微信小程序demo:投票 微信小程序demo:健康生活 小程序demo: ...

  5. 微信小程序配置二

    tabBar 客户端窗口底部的tab页面切换,只能配置最好两个.最多5个tab 属性说明: 属性 类型 必填 默认值 描述 color HexColor 是 tab上的文字默认颜色 selectedC ...

  6. python flask框架学习(一)——准备工作和环境配置与安装

    Flask装备: 学习自:知了课堂Python Flask框架——全栈开发 1.Python版本:3.6 2.Pycharm软件: 3.安装虚拟环境: (1)安装virtualenv: pip ins ...

  7. python flask框架学习——开启debug模式

    学习自:知了课堂Python Flask框架——全栈开发 1.flask的几种debug模式的方法 # 1.app.run 传参debug=true app.run(debug=True) #2 设置 ...

  8. python flask框架学习(二)——第一个flask程序

    第一个flask程序 学习自:知了课堂Python Flask框架——全栈开发 1.用pycharm新建一个flask项目 2.运行程序 from flask import Flask # 创建一个F ...

  9. mpvue学习笔记-之微信小程序数据请求封装

    简介 美团出品的mpvue已经开源出来很久了,一直说要进行一次实践,这不最近一次个人小程序开发就用上了它. 看了微信官方的数据请求模块--request,对比了下get和post请求的代码,发现如果在 ...

随机推荐

  1. service worker(一)之离线应用

    serviceWork.html <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  2. matlab的poly()函数

    MATLAB中的poly()函数是用于求以向量为解的方程或方阵的特征多项式,可以直接传递多项式方程的系数矩阵. 1.poly([1 2 3])使用的举例. P=poly([1 2 3]) 可以解出P= ...

  3. 图中长度为k的路径的计数

    题意 给出一个有向图,其中每条边的边长都为1.求这个图中长度恰为 $k$ 的路劲的总数.($1 \leq n \leq 100, 1 \leq k\leq 10^9$) 分析 首先,$k=1$ 时答案 ...

  4. 模拟赛20181101 雅礼 Wearry 施工 蔬菜 联盟

    % Day2 Solution % Wearry % Stay determined! 施工    记 fif_{i}fi​ 表示考虑前 iii 个建筑, 并且第 iii 个建筑的高度不变的答案, 每 ...

  5. [Svelte 3] Render HTML directly into a component in Svelte 3

    Disclaimer: please use this feature carefully. <script> let stringToRender = "<h1>H ...

  6. web实现大文件上传分片上传断点续传

    需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...

  7. jdango 2.x的url配置的改变

    新版本的url.py文件中,不在使用1.x的正则表达式,强制使用在程序启动的时候会提示: WARNINGS: ?: (2_0.W001) Your URL pattern '^*article/' h ...

  8. luogu 3466 对顶堆

    显然答案是将一段区间全部转化成了其中位数这样的话,需要维护一个数据结构支持查询当前所有数中位数对顶堆 用两个堆将 < 中位数的数放入大根堆将 > 中位数的数放入小根堆这样就会存在删除操作 ...

  9. 计数 luogu 4223 期望逆序对

    https://www.luogu.org/problemnew/show/P4223 期望乘以\(\binom {n}{2}^k\)变成了计数问题 我们考虑每一组数\((A, B)\)产生的贡献CC ...

  10. java https

    1. 异常突现 在这普通的一天,我写普通的代码,却突然收到不普通的报警 javax.net.ssl.SSLHandshakeException: server certificate change i ...