我正在创建简单的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
检查浏览器是否显示缓存中的文件。 检查页面并按ctrl+R