Flask - CSS перепутал исходный файл - PullRequest
0 голосов
/ 13 июля 2020

Я создаю простое веб-приложение, в котором продукты разделены на категории. В начале этого проекта я создал простое представление страниц, а затем подключил свою веб-страницу к базе данных ... Теперь, когда я редактировал файл CSS страницы «add. html», ничего не изменилось. Я удалил весь код файла CSS и добавил один стиль. Я изменил размер шрифта.

Когда я запускаю приложение - приведенный ниже код - я получил старый стиль.

Я проверял путь ссылки CSS таблицы стилей много раз. Также я попытался перезапустить свой P C, если с моей стороны может быть какая-то ошибка. Мне чего-то не хватает, и я не знаю чего.

Буду очень благодарен за вашу помощь!

ПРИМЕЧАНИЕ : Для каждой страницы (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>

Детский шаблон - «доп. 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 %}

Ответы [ 2 ]

1 голос
/ 13 июля 2020

Убедитесь, что ваш браузер не отображает файлы из кеша. Осмотрите свою страницу и нажмите ctrl + R

0 голосов
/ 15 июля 2020

Должна быть проблема с кешированием файлов c, попробуйте нажать Shift+F5 для проверки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...