flask实践之第一个项目“盗版的豆瓣评分”

最新推荐文章于 2023-03-14 10:16:08 发布

LCY133

最新推荐文章于 2023-03-14 10:16:08 发布

阅读量319

点赞数

分类专栏： # flask框架文章标签： flask

本文链接：https://blog.csdn.net/LCY133/article/details/109182141

版权

flask框架专栏收录该内容

35 篇文章 1 订阅

订阅专栏

学习flask框架一段时间了，后续进行盗版豆瓣评分网页的开发功能
包含的内容1.css文件传参数表示网页结构 2.静态图片的加载（不再采用静态图片，网络图片被采用）
3.HTML：宏使用 4.include set 5.模板的继承 6.参数传递等等
python文件内主要定义了相关参数
HTML文件中主要定义了网页的具体内容，css定义了网页的相关渲染，js记录了网页中的相关操作，可以通过HTML调用相关的图片，进行渲染，图片的来源可以来自本地或者网上图片
初版程序：显示单张图片和图片下的星星：
（在完成该任务的时候，出现了问题：显示的图片无法缩小，总是以原画的方式显示，经过确认才发现我用的不是chrome,这个就很尴尬，写的是双核浏览器，图标和Chrome极其相似，结果不是这样的浏览器，在替换该浏览器后效果不错）
注：初版程序，以下可以进行其他其他方面的优化
程序如下：
python程序：

from flask import Flask,render_template

app = Flask(__name__)

@app.route('/')
def hello():
    return render_template('index2.html')

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

HTML程序(index2.html)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/item.css') }}">
</head>
<body>
    <h1>豆瓣小程序评分</h1>
    <div class="search-group">
        <input type="text" class="search-input">
    </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">
            <img src = "https://img1.doubanio.com/view/movie_poster_cover/lpst/public/p2367986708.jpg" alt="" class="thumbnail">
            <p class="item-title">全员单恋</p>
            <p class="item-rating">
                {% set  rating=7.8 %}
<!--                rating = 7.8-->
                {% set lights=((rating|int)/2)|int %}
                {% set halflight=(rating|int)%2 %}
                {% set grays=5-lights-halflight %}
                {% for light in range(0, lights) %}
                <img src="{{url_for('static', filename='images/rate_light.png')}}" alt="">
                {% endfor %}

                {% for half in range(0, halflight) %}
                <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>
</body>
</html>

css:
base.css:

*{
    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{
    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-top .module-title{
    float: left;
}
.item-list-top .more-btn{
    float: right;
}

.list-group{
    overflow: hidden;
    padding: 0 10px;
}
.item-group{
    float: left;
    margin-right: 10px;
}
.item-group .thumbnail{
    display: block;
    width: 100px;
    height: 150px;
}
.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;
}

运行结果：
在这里插入图片描述

其中主要的工作在html文件中，分析如下：
定义输入框

    <div class="search-group">
        <input type="text" class="search-input">
    </div>

导入图片与title

<img src = "https://img1.doubanio.com/view/movie_poster_cover/lpst/public/p2367986708.jpg" alt="" class="thumbnail">
            <p class="item-title">全员单恋</p>

设置星星：

<p class="item-rating">
                {% set  rating=7.8 %}
                # 设置分数 #
<!--                rating = 7.8-->
                {% set lights=((rating|int)/2)|int %}
                # 星个数 #
                {% set halflight=(rating|int)%2 %}
                {% set grays=5-lights-halflight %}
                {% for light in range(0, lights) %}
                <img src="{{url_for('static', filename='images/rate_light.png')}}" alt="">
                {% endfor %}
				# 显示星星 #
                {% for half in range(0, halflight) %}
                <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>

LCY133

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
flask实践之第一个项目“盗版的豆瓣评分”

学习flask框架一段时间了，后续进行盗版豆瓣评分网页的开发功能包含的内容1.css文件传参数表示网页结构 2.静态图片的加载（不再采用静态图片，网络图片被采用）3.HTML：宏使用 4.include set 5.模板的继承 6.参数传递等等python文件内主要定义了相关参数HTML文件中主要定义了...
复制链接

扫一扫

专栏目录