首页 > > 网络编程 > 其它 >

python flask豆瓣微信小程序案例

2018-12-09 11:20:34来源：博客园 阅读 ()

新老客户大回馈,云服务器低至5折

项目步骤

定义首页模板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 = [
    {
        'id': '11211',
        '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'科林·费尔斯 / 塔伦·埃格顿 / 朱丽安·摩尔'
    },
    {
        'id': '34532',
        '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'艾伦/马丽/沈腾'
    },
    {
        'id': '394558',
        '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'肖央 / 闫妮 / 小沈阳'
    },
    {
        'id': '9384089',
        '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'杰拉德·巴特勒/吉姆·斯特'
    },
    {
        'id': '26921827',
        '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'汤水雨 / 徐佳琪 / 杨默'
    },
    {
        'id': '26287884',
        '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 = [
    {
        'id': '235434',
        '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'靳东 / 陈乔恩 / 赵达 / 付枚 / 金泽灏 /'
    },
    {
        'id': '9498327',
        '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'钟汉良 / 杨颖 / 甘婷婷 / 孙艺洲 / 亓航 /'
    },
    {
        'id': '26685451',
        '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' 卢克·崔德威 / 琼安·弗洛加特 / 露塔·格德米纳斯 / 安东尼·海德 / 卡罗琳·古多尔 /'
    },
    {
        'id': '235434',
        '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 / 麦迪逊·贝蒂 /'
    },
    {
        'id': '48373095',
        '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'伊藤沙莉 / 中川大志 / 上原实矩 / 森绘梨佳 / 樱田通 /'
    },
    {
        'id': '292843',
        '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

访问效果如下：

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：python利用requests库模拟post请求时json的使用

下一篇：从yield 到yield from再到python协程

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签