Flask应用程序 - 如何将JavaScript文件链接到网站

Question

我在使用JavaScript文件时遇到了一些麻烦（这是一个Flask应用程序的网站）。我通过运行run.py来启动网站，它看起来像这样：

#!flask/bin/python
from app import app
app.run(debug=True)

在我的 HTML 页面中，我有以下代码，它会导致 404 错误： 错误信息： 我的文件结构如下所示： 请问我哪里出了问题？

- user2260199

---

我认为你需要在<script>的src中javascript前面移除/。 - Lal

好的，你能把控制台的错误也展示出来吗？ - Lal

我已经在我的原始帖中添加了错误。尝试在 / 前面添加 . ，但结果仍然相同。 - user2260199

请问您尝试使用 .\ 时遇到了什么新的控制台错误？ - Lal

控制台消息对于 ./ 是相同的。使用完整路径仍然会出现404错误。 - user2260199

Answer 1

啊，是的，幸运的是我目前正在开发一个Flask应用程序。

您目前缺少默认情况下Flask查找的static文件夹，文件夹结构大致如下：

|FlaskApp
----|FlaskApp
--------|templates
        - html files are here
--------|static
        - css and javascript files are here

Flask会查找两个重要的默认文件夹：templates和static。 一旦你弄清楚了这一点，你可以使用以下代码在html页面中链接到你的javascript文件：

<script src="{{url_for('static', filename='somejavascriptfile.js')}}"></script>

Plus - 一篇不是特别相关但讲解了 Flask 文件夹结构的好文章在这里：https://www.digitalocean.com/community/tutorials/how-to-deploy-a-flask-application-on-an-ubuntu-vps

- jonprasetyo

---

如果您的JavaScript代码位于蓝图中，则可以使用以下方式调用它：<script src="{{url_for('blueprintName.static', filename='somejavascriptfile.js')}}"></script>。通过这种方式，您可以确切地知道静态文件来自哪里，并且使用点符号表示法。 - pelos

Answer 2

所以你的index.html文件在app/templates/index.html，jQuery文件在app/javascript/jQuery.js是吗？

我认为你的路径是错误的。尝试这样操作：

<script src="../javascript/jquery.js"></script>

- Anakin

---

我尝试了一下，但没有运气！ - user2260199

Answer 3

以下是帮助我消除 Flask 项目中 jQuery 部分的方法

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

这段代码直接从http://getbootstrap.com/getting-started/的基本模板中提取。

- betterluckchuck

Answer 4

尝试使用src="app/javascript/jquery.js"。

另外，我注意到你在第7行和第28行都包含了jquery.js两次。

- dekkard

---

仍然遇到相同的问题。 - user2260199

你的意思是说你在 http://localhost:5000/app/javascript/jquery.js 看到了 404 吗？ - dekkard

我也遇到了完全相同的问题，将JavaScript文件移动到静态文件夹中可以解决。但我也想知道是否可以将js文件放在另一个文件夹中。 - Mina