Javascript 如何让Flask提供.js文件？_Javascript_Python_Html_Flask

Javascript 如何让Flask提供.js文件？

javascript python html flask

Javascript 如何让Flask提供.js文件？,javascript,python,html,flask,Javascript,Python,Html,Flask,我正在用Python、Flask和.js文件编写代码，所有这些文件都链接了一些HTML和CSS。我的问题是，我有一个下拉菜单和一个按钮，可以隐藏和取消隐藏密码文本，但当在Flask中运行时，这方面的工作不起作用，我相信这与javascript有关。当我在本地运行HTML文件而不是通过flask运行时，这个函数可以完美地工作，但是我完全不知道从这里走到哪里就我所做的而言，我已经确保了我的文件结构是正确的，并且这些.js文件位于静态文件夹中（CSS样式表是从那里完美地提取出来的）。链接.js文件的

我正在用Python、Flask和.js文件编写代码，所有这些文件都链接了一些HTML和CSS。我的问题是，我有一个下拉菜单和一个按钮，可以隐藏和取消隐藏密码文本，但当在Flask中运行时，这方面的工作不起作用，我相信这与javascript有关。当我在本地运行HTML文件而不是通过flask运行时，这个函数可以完美地工作，但是我完全不知道从这里走到哪里

就我所做的而言，我已经确保了我的文件结构是正确的，并且这些.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>

下面你会发现我的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>

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

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

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

谢谢您的评论！我刚刚尝试了这个，我的文件不再作为附件出现在Dreamweaver中，当我启动Flask时，我遇到了一个内部服务器错误，看起来它现在根本无法加载.js文件。还有什么想法吗，我迷路了？启用flask中的调试模式以在出现错误时显示回溯浏览器。启用调试模式后，它现在在浏览器中显示了一组错误，它们如下-jinja2.exceptions.TemplateSyntaxError:预期的标记'，'，获取“静态”使用html代码更新您的问题，错误显示在浏览器中，请退出，您一定错过了我的代码中的某些内容，请重试我的代码并粘贴导致jinja错误的更新html文件。也许你错过了（'）或（，）或其他什么。仔细检查并粘贴更新后的html作为我的建议代码。您好，您能确认脚本加载没有错误吗？检查bowser控制台是否有提示。需要更多信息来帮助。当使用上面的原始脚本标记时，.js文件正在加载，并且没有发生错误，这让我假设它们正在正确加载。使用建议的脚本标记导致它们没有链接到HTML源代码文件，因此意味着flask不会读取它们，我现在已经不知所措了。

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

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

$ export FLASK_DEBUG=1
$ flask run