Question

我正在使用Python，Flask和.js文件进行一些编码，同时还链接了一些HTML和CSS。我的问题是我有一个下拉菜单和一个按钮，可以隐藏和取消隐藏密码文本，但是在Flask中运行时，这方面的功能无法正常工作，我认为这与javascript有关。当我在本地而不是通过flask运行HTML文件时，此功能可以完美运行，但是我完全不知道从何处去？

就我已经做的而言，要确保我的文件结构正确并且这些.js文件位于静态文件夹内（从此处可以完美地提取CSS样式表）。我链接.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>

这是我用于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)

在下面，您会发现我的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>

如果要提一下，我正在使用Foundation作为CSS来帮助编辑和使网页看起来更漂亮。

使用以下建议的方法更改脚本标签时，在浏览器中出现如下错误-

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

Answer 1

您应该使用以下链接您的js文件：

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

对所有js文件执行此操作。希望能有所帮助。如果仍有问题，请告诉我。

为进一步研究，启用烧瓶调试模式要启用调试模式，您可以在运行服务器之前导出FLASK_DEBUG环境变量：

$ export FLASK_DEBUG=1
$ flask run

这将向您显示浏览器中更详细的错误和堆栈跟踪。

如何让Flask服务我的.js文件？

1 个答案: