Javascript CSS和JS不再适用于我的Flask应用程序
我用CSS和JS制作了一个导航栏，用于我不久前用Flask制作的一个应用程序，所有东西都正常工作。然而，几周前，我在localhost上运行了这个应用程序，发现导航栏不再像它应该显示的那样显示。我不知道是什么突然导致了这个问题，因为我没有对以前有效的CSS、JS或HTML进行任何更改（我记得） 我已经使用了CTRL-SHIFT-R和CTRL-F5等方法来重新加载页面并避免缓存问题，但它们似乎并不起作用。在使用CTRL-F5或CTRL-SHIFT-R刷新页面后，当我查看“网络”选项卡时，它告诉我，它正在加载尽可能多的必要文件，但它没有反映在实际页面上，因为我的导航栏仍然损坏。当我在浏览器中输入CSS或JS文件路径时，它会正确地指向文件。再一次，我确信这些文件没有任何问题，因为它们曾经工作过 这就是我的导航栏HTML的样子：Javascript CSS和JS不再适用于我的Flask应用程序,javascript,python,html,css,flask,Javascript,Python,Html,Css,Flask,我用CSS和JS制作了一个导航栏，用于我不久前用Flask制作的一个应用程序，所有东西都正常工作。然而，几周前，我在localhost上运行了这个应用程序，发现导航栏不再像它应该显示的那样显示。我不知道是什么突然导致了这个问题，因为我没有对以前有效的CSS、JS或HTML进行任何更改（我记得） 我已经使用了CTRL-SHIFT-R和CTRL-F5等方法来重新加载页面并避免缓存问题，但它们似乎并不起作用。在使用CTRL-F5或CTRL-SHIFT-R刷新页面后，当我查看“网络”选项卡时，它告诉我，
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<style>main {padding-top: 70px;}</style>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
<header id="navbar">
<nav class="navbar-container container">
<a href="{{ url_for('main.index') }}" class="home-link">
APP NAME
</a>
<button type="button" class="navbar-toggle" aria-label="Open navigation menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-menu">
<ul class="navbar-links">
<li class="navbar-item">
<a class="navbar-link" href="{{ url_for('auth.login') }}">Log in/Register</a>
</li>
</ul>
</div>
</nav>
</header>
<script src="{{ url_for('static', filename='js/navbar.js') }}"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
主{填充顶部：70px；}
-
<body>
{% block navbar %}
{% include 'navbar.html' %}
{% endblock %}
{% block content %}{% endblock %}
</body>
</html>
{%block navbar%}
{%include'navbar.html%}
{%endblock%}
{%block content%}{%endblock%}
{% extends 'base.html' %}
{% block content %}
<header class="masthead">
<div class="container d-flex h-100 align-items-center">
<div class="mx-auto text-center">
<h1 class="mx-auto my-0 text-uppercase">APP NAME</h1>
<h2 class="mx-auto mt-2 mb-5">TEXT</h2>
<a class="btn-lg btn-danger" href="{{ url_for('auth.register') }}">Register for free!</a>
</div>
</div>
</header>
{%extends'base.html%}
{%block content%}
应用程序名称
正文
- styles.css
- navbar.js
- bootstrap.min.css
- jquery-3.2.1.slim.min.js
- popper.min.js
- bootstrap.min.js
非常感谢您对这个问题提出的任何建议和解决方案。几个月前，我也遇到了同样的事情 我找到的解决方案是使用flask_引导，而不是直接引用引导样式表，这解决了我的问题。我强烈建议你去看看
您确定的
url\u正确解析您的CSS和JS文件吗？您正在报告的那些不起作用的内容正在使用url\u作为
，因此问题可能就在那里。如果让我猜一猜的话，这些文件并不像你认为的那样是静态的。也许你最近移动了什么？@ATLUS我确信url\u正在正确解析它们。当我运行页面上的HTML时，路径是正确的，我可以将该路径放入我的浏览器中，它会将我带到CSS/JS文件的内容。感谢您的回复。听到这个消息真是太遗憾了，因为我实际上希望避免过多地依赖Flask引导，而且，尽管听起来很懒，但我真的不想重写我的模板。我想问：为了让导航栏再次工作，我至少需要对Flask Bootstrap做些什么，否则就避免使用Flask Bootstrap？您唯一需要更改的是从基本模板中删除样式表引用，然后在init.py文件中导入Flask Bootstrap，然后执行'boostrap=boostrap（app）'在您配置应用程序的行之后。看看我提供的链接。变化很简单。其余的模板文件仍然有效。