Question

我正在编写一个简单的Web应用程序来显示书评。成功的搜索将返回到书名的链接-当用户单击链接时，我试图将被单击的书的ISBN传递给url_for方法，然后呈现相应的模板。

我的Flask服务器的输出显示以下内容，并且未呈现CSS。

“ GET / book_data / 0316769177 HTTP / 1.1” 200-
“ GET /book_data/static/style/style.css HTTP / 1.1” 404

search_results.html：

{% for book, isbn in book_dict.items() %}
    <li>
        <a id="book_link" href="{{ url_for('book_data', isbn=isbn) }}">{{ book }}</a>
    </li>
{% endfor %}

application.py：

@app.route("/book_data/<isbn>", methods=["GET"])
def book_data(isbn):

    valid_login = True

    results = db.execute('SELECT * FROM books WHERE isbn = :isbn',
                         {'isbn': isbn}).fetchall()

    book_info = results[0]

    return render_template("book_data.html",
                           valid_login=valid_login,
                           book_info=book_info)

book_data.html：

{% extends "layout.html" %}

{% block login %}

    <div>
        <a class="login_link" href="{{ url_for('signup') }}">Sign Up</a>
        {% if valid_login == True %}
            <a class="login_link" href="{{ url_for('logout') }}">Logout</a>
        {% endif %}
    </div>

{% endblock %}

{% block body %}

    <h> CSS not working on this page</h>

{% endblock %}

所有预期的CSS均来自layout.html。

我所有的html页面都扩展了layout.html（并且CSS可以正常工作，除此之外，其他所有页面。

当我单击search_results.html中的链接时，将显示以下URL（按预期）： 127.0.0.1:5000/book_data/0316769177

Answer 1

服务器从/book_data/static/style/style.css而不是/static/style/style.css获取style.css文件。

要解决此问题，请在layout.html中尝试替换：

<link rel="stylesheet" href="static/style/style.css">

通过

<link rel="stylesheet" href="/static/style/style.css">

在Flask路由中使用变量时如何修复CSS 404错误

1 个答案: