Flask-CSS源文件混乱



我正在创建一个简单的web应用程序,它显示按类别划分的产品。在这个项目的开始,我创建了一个简单的页面视图,然后我将我的网页与数据库连接。。。现在,当我编辑";add.html";页面没有任何更改。我删除了CSS文件的全部代码,并添加了一个样式。我更改了字体大小。

当我运行应用程序时——代码如下——我得到了旧的风格。

我检查了很多次CSS样式表的链接路径。我还试着重新启动我的电脑,如果可能有一些错误从我身边。我错过了什么,我不知道是什么。

我将非常感谢你的帮助!

注意:每个页面(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";

<!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>

儿童模板-";add.html";

/*
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="amount">
<label for="amount">€/ks</label>
</p>
<p>Fotka:<input type="file" name="image"></p>
<p><input type="submit" value="Pridať"></p>
</form>
</div>
{% endblock %}

有老式的页面

/*
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="amount">
<label for="amount">€/ks</label>
</p>
<p>Fotka:<input type="file" name="image"></p>
<p><input type="submit" value="Pridať"></p>
</form>
</div>
{% endblock %}

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

如果是静态文件缓存问题,请尝试按Shift+F5进行检查。

最新更新