如何让 Flask 为 my.js 文件提供服务？

Question

I am doing some coding with Python, Flask and.js files all with some HTML and CSS linked in as well.我正在用 Python、Flask 和 .js 文件进行一些编码，所有这些文件都链接了一些 HTML 和 CSS。 My problem is that I have a dropdown menu and a button that can hide and unhide password text but when running in Flask, this side of things is not working and I believe that it has something to do with the javascript. This function works perfectly when I am running the HTML file locally and not through flask, but I am completely lost as to where to go from here?我的问题是我有一个下拉菜单和一个可以隐藏和取消隐藏密码文本的按钮，但是当在 Flask 中运行时，这方面的事情不起作用，我相信它与 javascript 有关。这个 function 在我在本地运行 HTML 文件而不是通过 flask，但我完全不知道从这里到 go 的哪里？

In terms of what I have done already is to ensure that my file structure is correct and that these.js files are within the static folder (where CSS stylesheets are being pulled from perfectly fine).就我已经完成的工作而言，确保我的文件结构是正确的，并且这些.js 文件位于 static 文件夹中（其中 CSS 样式表被完美提取）。 My script tags where I link the.js files are all at the end of the body tag and do not sit within the head tag.我链接 .js 文件的脚本标签都位于 body 标签的末尾，不位于 head 标签内。

<script src="../static/js/vendor/jquery.js"></script>
<script src="../static/js/app.js"></script>
<script src="../static/js/vendor/foundation.js"></script>
<script src="../static/js/vendor/what-input.js"></script>

This is the app file that I am using for Flask and the simple code used to run this if it helps?这是我用于 Flask 的应用程序文件和用于运行它的简单代码（如果有帮助的话）？

from flask import Flask
from flask import render_template

app = Flask(__name__)

@app.route("/")

def render_static():

    return render_template('splash_page.html')

@app.route("/account")

def account_page():

    return render_template('account.html')

if __name__ == '__main__':
    app.run(debug = True)

Below you will find my HTML code used as a template in Flask, this is it before the changes suggested below -下面你会发现我的 HTML 代码用作 Flask 中的模板，这是在下面建议的更改之前 -

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page</title>

    <link href="../static/css/app.css" rel="stylesheet" type="text/css">
    <link href="../static/css/foundation.css" rel="stylesheet" type="text/css">

  </head>

  <body>
    <div class="top-bar">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Premier League Pro</li>
      <li>
        <a href="/account">Account</a>
        <ul class="menu vertical">
          <li><a href="/my account">My Account</a></li>
          <li><a href="#">Settings</a></li>
          <li><a href="#">Log Out</a></li>
        </ul>
      </li>
      <li><a href="#">Predictor</a></li>
      <li><a href="#">Odds Calculator</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul>
  </div>
</div>

<div class="row">
    <div class="columns large-3"></div>
    <div class="columns large-6">
        <br>
        <br>
        <form class="show-password">
          <label for="username">Your login</label>
          <input type="text" value="" placeholder="Enter Username" id="username">
          <div class="password-wrapper">
            <label for="password">Your password</label>
            <input type="password" value="" placeholder="Enter Password" id="password" class="password">
            <button class="unmask" type="button" title="Mask/Unmask password to check content">Unmask</button>
          </div>
        </form>
    </div>

    <a class="button small" href="#">Sign In</a>
    <div class="columns large-3"></div>
</div> 

    <script src="../static/js/app.js"></script>
    <script src="../static/js/vendor/foundation.js"></script>
    <script src="../static/js/vendor/what-input.js"></script>
    <script src="../static/js/vendor/jquery.js"></script>

  </body>
</html>

If it helps to mention I am using Foundation as a CSS to help edit and make my webpages look nice.如果它有助于提及我正在使用 Foundation 作为 CSS 来帮助编辑和使我的网页看起来不错。

When using the methods suggested below in terms of changing the script tags I get an error in the browser as follows -当使用下面建议的方法来更改脚本标签时，我在浏览器中收到如下错误 -

jinja2.exceptions.TemplateSyntaxError: expected token ',', got 'static'

Answer 1

you should link your js files using this: 您应该使用以下链接您的js文件：

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

do this for all js files. 对所有js文件执行此操作。 Hope that helps. 希望能有所帮助。 If you still have any problem, please let me know. 如果仍有问题，请告诉我。

for further investigation enable flask debug mode To enable debug mode you can export the FLASK_DEBUG environment variable before running the server: 为了进一步研究，请启用flask调试模式要启用调试模式，可以在运行服务器之前导出FLASK_DEBUG环境变量：

$ export FLASK_DEBUG=1
$ flask run

this will show you more detailed errors and stack traces in the browser. 这将在浏览器中向您显示更多详细的错误和堆栈跟踪。

Answer 2

Jinja2 is a modern and designer-friendly templating language for Python. https://jinja2docs.readthedocs.io/en/stable/ https://jinja.palletsprojects.com/en/2.11.x/templates/ Try surrounding the script tag in your template with these two Jinja2 syntactic structures below: Jinja2 是 Python 的现代且对设计人员友好的模板语言。 https://jinja2docs.readthedocs.io/en/stable/ https://jinja.palletsprojects.com/en/2.11.x/templates/尝试包围脚本标签在您的模板中使用以下两个 Jinja2 句法结构：

{% block javascript %}
<script src="{{ url_for('static', filename='js/vendor/jquery.js') }}"></script>
{% endblock %}

I vaguely recall Flask serving Javascript without this block once, but that was with Python 2.7.我依稀记得 Flask 在没有这个块的情况下为 Javascript 服务过一次，但那是在 Python 2.7 中。 Maybe it's a bug.也许这是一个错误。

It's probably a security feature to prevent XSS.这可能是一种防止 XSS 的安全功能。

如何让 Flask 为 my.js 文件提供服务？

问题描述

2 个解决方案

解决方案1
1 2019-05-26 18:43:15

解决方案2
-2 2022-02-25 18:47:26

如何让 Flask 为 my.js 文件提供服务？

问题描述

2 个解决方案

解决方案1 1 2019-05-26 18:43:15

解决方案2 -2 2022-02-25 18:47:26

解决方案1
1 2019-05-26 18:43:15

解决方案2
-2 2022-02-25 18:47:26