分享好友 编程语言首页 频道列表

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

小程序文章/教程  2023-02-09 09:480

我们所要实现的效果：

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

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

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

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

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

  base.css 针对整个大框架的

/*清理网页内部自己的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.css 针对项目排版的

.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;
}
.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;
}

 2.接着构建模板base.html

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/item.css') }}">
    <title>{% block title %}{% endblock %}</title>
    {% block head %}{% endblock %}
</head>
<body>
    <div class="container">
        <div class="search-group">
            <input type="text" class="search-input" placeholder="搜索...">
        </div>
        {% block body %}{% endblock %}
    </div>
</body>
</html>

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

{# itemGroup的宏 #}
{% 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 %}

{# listGroup的宏-#}
{% macro listGroup(module_title,items,category=category) %}
    <div class="item-list-group">
        <div class="item-list-top">
            <span class="module-title">{{ module_title }}</span>
{#            /list/1/#}
{#            /list/?category=1#}
            <a href="{{ url_for("item_list",category=category) }}" 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 %}

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

<!--继承自base-->
{% extends 'base.html' %}
<!--导入宏-->
{% from 'macros.html' import itemGroup, listGroup%}

<!--实现block-->
{% block body %}
    {{ listGroup("电影", movies, 1) }}
    {{ listGroup("电视剧", tvs, 2) }}
{% endblock %}

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

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

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

{%  extends 'base.html' %}
{% from 'macros.html' import itemGroup%}

{% block body %}
    {% for item in items %}
        {{ itemGroup(item.thumbnail,item.title,item.rating) }}
    {% endfor %}
{% endblock %}

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

点击的位置在index.html

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

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

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

 那么接下来我们看app.py

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

from flask import Flask, render_template,request

app = Flask(__name__)
app.config['TEMPLATES_AUTO_RELOAD'] = True

movies = [
    {
        'id': '11211',
        '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': '33211',
        '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': '11561',
        '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': '11891',
        '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': '11874',
        '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': '47112',
        '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': '91891',
            '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': '91874',
            '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': '97112',
            'thumbnail': 'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2571299085.jpg',
            'title': u'战火浮生 第一季',
            'rating': u'7.6',
            'comment_count': 18374,
            'authors': u'亚当·史密斯'
        },
        {
            'id': '91791',
            'thumbnail': 'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2235972558.jpg',
            'title': u'名侦探柯南 ',
            'rating': u'9.2',
            'comment_count': 88888,
            'authors': u'青山刚昌'
        },
        {
            'id': '91871',
            'thumbnail': 'https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2554618756.jpg',
            'title': u'厨神小当家',
            'rating': u'4.6',
            'comment_count': 10362,
            'authors': u'川崎逸朗'
        },
        {
            'id': '97113',
            'thumbnail': 'https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2240922426.jpg',
            'title': u'士兵突击',
            'rating': u'9.3',
            'comment_count': 92492,
            '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 '欢迎访问蔡军帅的网站！'

@app.route('/list/')
def item_list():
    category = int(request.args.get('category'))
    items = None
    if category == 1:
        items = movies
    else:
        items = tvs
    return render_template('list.html', items=items)

if __name__ == '__main__':
    app.run()

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

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

查看更多关于【小程序文章/教程】的文章

展开全文
相关推荐
反对 0
举报 0
评论 0
图文资讯
热门推荐
优选好物
更多热点专题
更多推荐文章
小程序 AI/AR 能力
一、关于 VisionKit1、定义VisionKit 为小程序提供了开发 AR 功能的能力，包含了 AR 在内的视觉算法。2、版本提供了 V1 和 V2 两个版本，区别如下：V1平面接口，适用于用户在平面场景下，例如桌面，地面，泛平面场景，放置虚拟物体，不提供真实世界距离。用户

0评论2023-03-08842

Python小程序——快排算法 快排 python
1 def Partition(list,p,q): 2 #这里是用来分块的算法。 3 x = list[p] 4 i = p 5 for j in range(p+1,q+1): #注意range是顾前不顾后的，所以后面的区间值要大一位 6 if list[j]x: 7 i+=1 8 list[i],list[j] = list[j],list[i] 9 10 list[p], list[i] = list[

0评论2023-02-09351

c++第一个小程序 第一个小程序是什么
 #include iostreamusing namespace std;int main(){const int SIZE=50;//定义大小。char name[SIZE]; cout"please input you name!\n"; //提示cinname;//输入cout"hello world:"nameendl; //输出return 0;}   #include iostreamusing namespace std;int m

0评论2023-02-09579

微信小程序 错误记录
1、报错this.getUserInfo(this.setData) is not a function;at pages/index/index onShow function;at api request success callback functionTypeError: this.getUserInfo is not a function在回调结果里调用这个页面的函数 this.fun() 或者 this.setData 时

0评论2023-02-09477

【小程序】添加tabBar后navigateTo失效
某页面.js//事件处理函数bindViewTap() {wx.navigateTo({url: '../logs/logs',})}, app.json"tabBar": {"backgroundColor": "black","color":"white","list": [{"pagePath": "pages/index/inde

0评论2023-02-09474

小程序组件之间的通信 小程序子父子组件通信
前言：其实之前就想写这个的，因为我觉得这么模块化的框架，组件之间通信是非常重要的，也是最经常用到的一块儿，只是之前在项目里一直没用到跨组件通信，现在用到了，也会用了，就一起写出来得了 :） 一、父、子组件之间的通信注：首先我们先将子组件在父组

0评论2023-02-09452

微信小程序左右滑动切换页面示例代码--转载
微信小程序——左右滑动切换页面事件微信小程序的左右滑动触屏事件，主要有三个事件：touchstart，touchmove，touchend。这三个事件最重要的属性是pageX和pageY，表示X，Y坐标。touchstart在触摸开始时触发事件;touchend在触摸结束时触发事件;touchmove触摸的

0评论2023-02-09564

让vue用于小程序setData方法
setData:function(obj){let that = this;let keys = [];let val,data;Object.keys(obj).forEach(function(key){keys = key.split('.');val = obj[key];data = that.$data;keys.forEach(function(key2,index){if(index+1 == keys.length){that.$set(data,key2,

0评论2023-02-09891

微信小程序 canvas导出图片模糊
//保存到手机相册save:function () {wx.canvasToTempFilePath({x: 0,y: 0,width: 375, //导出图片的宽height: 680, //导出图片的高destWidth: 375 * 750 / wx.getSystemInfoSync().windowWidth, //绘制canvas的时候用的是px， 这里换算成rpx ，导出后非常清晰

0评论2023-02-09339

微信小程序hidden问题 微信小程序隐藏view
    context.fillText('Hello World', 20, 380);                wx.drawCanvas({                    canvasId: '2',                    actions: context.getActions()                });       

0评论2023-02-09905

小程序***滑动的表格 小程序实现左右滑动
// pages/test/test.jsPage({/** * 页面的初始数据 */data: {headerList: [{name: '表头一',number: 'A201',type: "标准间"}, {name: '表头二',number: 'A202',type: "大床"}, {name: '表头三',number: 'A203',t

0评论2023-02-09530

更多推荐