提问者:小点点

Flask-CSS源文件混乱


我正在创建简单的web app,它显示了按类别划分的产品。 在这个项目的开始,我创建了一个页面的简单视图,然后我连接我的网页与数据库。。。 现在,当我编辑“add.html”页面的CSS文件时,没有任何变化。 我删除了CSS文件的整个代码,增加了一个样式。 我改变了字体大小。

当我运行应用程序-代码贝娄-我得到了旧的风格。 我多次检查CSS样式表a的链接路径。 此外,我尝试重启我的电脑,如果有一些错误从我的一边。 我错过了什么,我不知道是什么。

我将非常感谢你的帮助!

注意:每个页面(HTML文件)都有自己的CSS文件。 现在他们都是一样的(旧风格)

我的工作目录-“克隆”

clone
  --> __pycache__
  --> static
    --> admin            # contains only admin view pages
      --> add            # page folder
        --> style.css    # style for "add" page
        --> images       # contains images on the page
          --> image.jpg
          --> ...        
    --> public           # contains the same file/folder system as "admin"
  --> templates
    --> admin
      --> _base_admin.html  # parent's page
      --> add.html          # child's page
      --> ...            # other html files
    --> public
  --> goods.db           # database file
  --> run.py             # flask script

“添加”页面的Python代码

@app.route("/pridat/", methods=["GET", "POST"])
def add():
    if "admin" in session:
        if request.method == "POST":
            name = request.form["name"]
            price = request.form["price"]
            image = request.files["image"]
            tag = request.form["tag"]
            # Set absolute path, where the image will be saved
            path = f"S:/Python/Projects/Flask/clone/static/admin/products/{tag}/images/{image.filename}"
            image.save(path)
            # Edit path to realative - allow to load image from wd (working directory)
            path = f"/static/admin/products/{tag}/images/{image.filename}"

            new_product = Product(name=name, price=price, image_path=path, tag=tag)
            db.session.add(new_product)
            db.session.commit()

            flash("Successfully uploaded!")

            print(f"Successfully uploaded")
            return redirect(url_for(tag))
        else:
            return render_template("admin/add.html")
    else:
        return redirect(url_for("home"))

父模板-“_base_admin.html”

null

<!DOCTYPE html>
<html>
<head>
    <link rel="icon" href="/static/admin/home/images/icon.jpg">
    {% block head %}{% endblock %}
</head>
<body>

    <div class="navbar">
        <ul>
            <li><a href="{{ url_for('home') }}">Domov</a>
                <ul>
                    <li><a href="{{ url_for('bravcove') }}">Bravčové</a></li>
                    <li><a href="{{ url_for('hovadzie') }}">Hovädzie</a></li>
                    <li><a href="{{ url_for('kuracie') }}">Kuracie</a></li>
                    <li><a href="{{ url_for('ine') }}">Iné</a></li>
                </ul>
            </li>
            <li id="shorter"><a href="#">O nás</a></li>
            <li><a href="#">Predajne</a></li>
            <li><a href="#">Kontakt</a></li>
            <li><a style="float:right" href="{{ url_for('logout') }}">Odhlásiť sa</a></li>
        </ul>
    </div>

    {% block flash_msg %}{% endblock %}

    <div class="heading">
        {% block heading %}{% endblock %}
    </div>

    {% block content %}{% endblock %}

</body>
</html>

null

子模板-“add.html”

null

/*
add.html CSS STYLE
*/

.content {
    font-size: 30px;
}
{% extends "admin/_base_admin.html" %}


{% block head %}
<link rel="stylesheet" type="text/css" href="/static/admin/add/style.css">
<title>Nový produkt</title>
{% endblock %}


{% block heading %}
<h1>Pridať nový produkt</h1>
{% endblock %}


{% block content %}
<div class="content">
    <form  action="/pridat/" method="POST" enctype="multipart/form-data">
        <p>Vybrať sekciu: 
            <input type="radio" name="tag" value="bravcove">
            <label class="mylab" for="bravcove">Bravčové</label>
            <input type="radio" name="tag" value="hovadzie">
            <label for="hovadzie">Hovädzie</label>
            <input type="radio" name="tag" value="kuracie">
            <label for="kuracie">Kuracie</label>
            <input type="radio" name="tag" value="ine">
            <label for="ine">Iné</label>
        </p>
        <p>Názov produktu:<input type="text" name="name"></p>
        <p>
            Cena:<input type="text" name="price">
            <input type="radio" name="unit_type" value="weight" checked>
            <label for="wieght">€/kg</label>
            <input type="radio" name="unit_type" value="ammount">
            <label for="ammount">€/ks</label>

        </p>
        <p>Fotka:<input type="file" name="image"></p>
        <p><input type="submit" value="Pridať"></p>
    </form>
</div>
{% endblock %}

null

有旧风格的页面

null

/*
add.html CSS STYLE
*/

body {
    background-color: white;
    margin: 0% 0% 50px 0%;
    padding: 0%;
}


/* Heading */
.heading h1 {
    background-color: #cc0000;
    color: white;
    font-family: Volkorn;
    font-size: 50px;
    margin: 0%;
    padding: 10px;
    padding-left: 70px;
    margin-top: 30px;
    width: 35%;
    overflow: hidden;
}


/* Navbar */
.navbar {
    height: 74px;
    background-color: #ffb3b3;
}

.navbar ul {
    
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.navbar ul li {
    float: left;
    width: 175px;
    height: 74px;
    line-height: 74px;
    text-align: center;
    margin: 0px;
    padding: 0px;

    font-family: Titilium;
    font-size: 30px;
    font-weight: bold;
    color: #1a0000;
    text-transform: uppercase;
    transition: 0.5s;
    word-spacing: 1px;
    position: relative;
}

#shorter { width: 130px }
#cursor { cursor: default }


.navbar ul li a {
    text-decoration: none;
    display: block;
    color: #1a0000;    
}

.navbar ul li a:hover {
    transition: 0.5s;
    background-color: #ff8080;
}

.navbar ul li:hover {
    transition: 0.5s;
    background-color: #ff8080;
}

.navbar ul li ul {
    position: absolute;
    left: 0;
    top: 100%;
}

.navbar ul li ul li {
    display: none;
}

.navbar ul li ul li a {
    font-size: 23px;
    line-height: 35px;
}

.navbar ul li:hover ul li {
    display: block;
    background-color: #ffb3b3;
    height: 35px
}
{% extends "admin/_base_admin.html" %}


{% block head %}
<link rel="stylesheet" type="text/css" href="/static/admin/add/style.css">
<title>Nový produkt</title>
{% endblock %}


{% block heading %}
<h1>Pridať nový produkt</h1>
{% endblock %}


{% block content %}
<div class="content">
    <form  action="/pridat/" method="POST" enctype="multipart/form-data">
        <p>Vybrať sekciu: 
            <input type="radio" name="tag" value="bravcove">
            <label class="mylab" for="bravcove">Bravčové</label>
            <input type="radio" name="tag" value="hovadzie">
            <label for="hovadzie">Hovädzie</label>
            <input type="radio" name="tag" value="kuracie">
            <label for="kuracie">Kuracie</label>
            <input type="radio" name="tag" value="ine">
            <label for="ine">Iné</label>
        </p>
        <p>Názov produktu:<input type="text" name="name"></p>
        <p>
            Cena:<input type="text" name="price">
            <input type="radio" name="unit_type" value="weight" checked>
            <label for="wieght">€/kg</label>
            <input type="radio" name="unit_type" value="ammount">
            <label for="ammount">€/ks</label>

        </p>
        <p>Fotka:<input type="file" name="image"></p>
        <p><input type="submit" value="Pridať"></p>
    </form>
</div>
{% endblock %}

null


共1个答案

匿名用户

检查浏览器是否显示缓存中的文件。 检查页面并按ctrl+R