项目步骤

定义首页模板index.html

\"\"

 

<!DOCTYPE html>
<html lang=\"en\">
<head>
    <  charset=\"UTF-8\">
    < >豆瓣微信小程序</ >
    <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>
    <  charset=\"UTF-8\">
    < >豆瓣微信小程序</ >
    <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- {
            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- {
            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- \">电影</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- \">毒液</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

效果如下：

\"\"

 

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章