javascript - 无法将 CSS 和 JavaScript 链接到 HTML

标签 javascript python html css flask

我正在使用flask制作一个网站, HTML 工作正常,网站加载,但由于某种原因,HTML 和 CSS 无法链接:

我使用 url_for Flask 命令,但它仍然不起作用,当我打开网站并检查它时,看起来链接正在工作,但 css、javascript 等文件夹是空的

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StoreScan</title>
    <link rel="icon" href="{{url_for('static', filename='style/assets/dollars.jpeg')}}">
    <link rel="stylesheet" href="{{url_for('static', filename='style/bootstrap/css/bootstrap.min.css')}}">
    <link rel="stylesheet" href="{{url_for('static', filename='style/style.css')}}">
    <script defer src="{{url_for('static', filename='app/app.js')}}"></script>
    {% block head %}{% endblock %}
</head>

<body>

<h1 class="display-1 text-center mt-4">
    <u>StoreScan</u>
</h1>

<div class="mt-5 row d-flex justify-content-center">
    <div class="card bg-light" style="width: 22rem;">
        <div class="card-header">Authentication</div>
        <div class="card-body">
            <h5 class="card-title">Welcome Back!</h5>
            <p class="card-text"></p>
            <button class="btn btn-light btn-outline-dark">Login</button>
            <h6 class="mt-3">New here? </h6>
            <button class="btn btn-light btn-outline-dark">Register</button>
        </div>
    </div>
    <div class="card bg-light ml-5" style="width: 22rem;">
        <div class="card-header">Search</div>
        <div class="card-body">
            <h5 class="card-title">What do you want to find?</h5>
            <p class="card-text"></p>
            <form class="form-inline" method="POST">
                <div class="form-group mt-3">
                    <input class="form-control mr-2" name="content" id="content" type="text" placeholder="Your item.">
                    <button class="btn btn-light btn-outline-dark">Search</button>
                </div>
                <p>
                    <input type="radio" name="options" value="ebay" id="option1" method="POST"> Ebay <br>
                    <input type="radio" name="options" value="amazon" id="option2" method="POST"> Amazon <br>
                </p>
            </form>
        </div>
    </div>
</div>
{% block body %}{% endblock %}
</body>
</html>

调试器:

127.0.0.1 - - [29/Feb/2020 19:35:00] "GET /?__debugger__=yes&cmd=resource&f=style.css HTTP/1.1" 200 -
127.0.0.1 - - [29/Feb/2020 19:35:00] "GET /?__debugger__=yes&cmd=resource&f=jquery.js HTTP/1.1" 200 -
127.0.0.1 - - [29/Feb/2020 19:35:00] "GET /?__debugger__=yes&cmd=resource&f=debugger.js HTTP/1.1" 200 -
127.0.0.1 - - [29/Feb/2020 19:35:00] "GET /?__debugger__=yes&cmd=resource&f=console.png HTTP/1.1" 200 -
127.0.0.1 - - [29/Feb/2020 19:35:00] "GET /?__debugger__=yes&cmd=resource&f=ubuntu.ttf HTTP/1.1" 200 -
127.0.0.1 - - [29/Feb/2020 19:35:00] "GET /?__debugger__=yes&cmd=resource&f=console.png HTTP/1.1" 200 -
127.0.0.1 - - [29/Feb/2020 19:35:09] "POST / HTTP/1.1" 200 -
127.0.0.1 - - [29/Feb/2020 19:35:09] "GET /static/style/bootstrap/css/bootstrap.min.css HTTP/1.1" 404 -
127.0.0.1 - - [29/Feb/2020 19:35:09] "GET /static/style/style.css HTTP/1.1" 404 -
127.0.0.1 - - [29/Feb/2020 19:35:09] "GET /static/app/app.js HTTP/1.1" 404 -
127.0.0.1 - - [29/Feb/2020 19:35:10] "POST / HTTP/1.1" 200 -
127.0.0.1 - - [29/Feb/2020 19:37:04] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [29/Feb/2020 19:37:04] "GET /static/style/bootstrap/css/bootstrap.min.css HTTP/1.1" 404 -
127.0.0.1 - - [29/Feb/2020 19:37:04] "GET /static/style/style.css HTTP/1.1" 404 -
127.0.0.1 - - [29/Feb/2020 19:37:04] "GET /static/app/app.js HTTP/1.1" 404 -
127.0.0.1 - - [29/Feb/2020 19:37:07] "POST / HTTP/1.1" 200 -
127.0.0.1 - - [29/Feb/2020 19:38:56] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [29/Feb/2020 19:38:56] "GET /static/style/style.css HTTP/1.1" 404 -
127.0.0.1 - - [29/Feb/2020 19:38:56] "GET /static/style/bootstrap/css/bootstrap.min.css HTTP/1.1" 404 -
127.0.0.1 - - [29/Feb/2020 19:38:56] "GET /static/app/app.js HTTP/1.1" 404 -
127.0.0.1 - - [29/Feb/2020 19:38:58] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [29/Feb/2020 19:38:58] "GET /static/style/bootstrap/css/bootstrap.min.css HTTP/1.1" 404 -
127.0.0.1 - - [29/Feb/2020 19:38:58] "GET /static/style/style.css HTTP/1.1" 404 -
127.0.0.1 - - [29/Feb/2020 19:38:58] "GET /static/app/app.js HTTP/1.1" 404 -

最佳答案

Flask 找不到您的静态文件夹。它位于哪里?除非您修改了蓝图,否则 Flask 将在主应用程序的同一级别查找 satic 文件夹。

因此,假设您有运行应用程序的 .py 文件 - 在下面的示例中为flask_server.py - 在“web”目录的第一级内,flask 将在同一级别查找静态文件夹 - 相同对于模板文件夹来说是正确的:

enter image description here

希望它适合您。 :)

关于javascript - 无法将 CSS 和 JavaScript 链接到 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60467938/

相关文章:

javascript - 奇怪的函数语法

python - Python 中的太阳系

php - 我的网站无法识别运行 ghost css 脚本的 css 文件

html - Web Sockets 服务器端的使用/实现

javascript - 使用 JavaScript 获取所有输入对象的列表,无需访问表单对象

javascript - 不使用 isNan 的简单条件?

javascript - 如何使用 Javascript 检测元素的文本方向?

javascript - 如何轻松禁用 fancybox 幻灯片?

python - 你能 "restart"Python 循环的当前迭代吗?

python - 使用 easy_install 升级工具时出现问题