设为首页 加入收藏

TOP

python flask豆瓣微信小程序案例(一)
2018-12-06 22:08:54 】 浏览:386
Tags: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;
            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') }}" al
首页 上一页 1 2 下一页 尾页 1/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇从yield 到yield from再到python.. 下一篇python爬虫beautifulsoup4系列1

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目