如何在 Javascript 文件（.js）中使用 Python Flask？ [关闭]答案

【问题标题】：How to use Python Flask in Javascript file(.js)? [closed]如何在 Javascript 文件（.js）中使用 Python Flask？ [关闭]
【发布时间】：2020-10-19 19:15:51
【问题描述】：

当 Javascript 代码在 HTML 文件中时，这不是问题。但是，当我将脚本标签的内容移动到 js 文件中以用于其他 HTML 文件时，就会出现无法读取图像的问题。代码如下。

script.js

function mouseOverSelf() {
    let img = document.getElementById("changeImg1");
    let m = document.getElementById("changeColor1");
    img.src = "{{ url_for('static', filename='img/edit_w.svg') }}";
    m.style.color = "white";
}

function mouseOutSelf() {
    let img = document.getElementById("changeImg1");
    let m = document.getElementById("changeColor1");
    img.src = "{{ url_for('static', filename='img/edit.svg') }}";
    m.style.color = "black";
}

function mouseOverExcel() {
    let img = document.getElementById("changeImg2");
    let m = document.getElementById("changeColor2");
    img.src = "{{ url_for('static', filename='img/spreadsheet_w.svg') }}";
    m.style.color = "white";
}

function mouseOutExcel() {
    let img = document.getElementById("changeImg2");
    let m = document.getElementById("changeColor2");
    img.src = "{{ url_for('static', filename='img/spreadsheet.svg') }}";
    m.style.color = "black";
}

index.html

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

我该怎么办？

【问题讨论】：

这是因为您的模板引擎 (Jinja) 不解析 .js 文件。见this answer

标签： javascript python flask

【解决方案1】：

解决方案是在模板中通过{% block %}标签包含javascript代码（与css相同），而不是通过<script src="..">html标签（<link rel="stylesheet" href="..">）。

您有两个选择，javascript 代码（与 css 相同）用于加载和执行：

特定页面（本地）
所有页面（全局）

用jinja2模板继承机制，下面你可以怎么做：

在base.html

<!doctype html>
<html class="no-js" lang="en_US">
<head>
  <meta charset="utf-8">
  <title>{% block title %}{% endblock %}</title>
  <meta name="description" content="{% block description %}{% endblock %}">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="manifest" href="{{ url_for('static', filename='site.webmanifest') }}">
  <link rel="apple-touch-icon" href="{{ url_for('static', filename='icon.png') }}">
  <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">

  {% block stylesheets %}

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  {% block stylesheets_others %}{% endblock %}
  <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-override.css') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-extend.css') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
  {% block stylesheets_local %}{% endblock %}

  {% endblock %}

  <meta name="theme-color" content="#fafafa">
</head>
<body>
  <!--[if IE]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  <![endif]-->

  {% block body %}
    {% include 'includes/header.html' %}
    {% block content %}{% endblock %}
    {% include 'includes/footer.html' %}
  {% endblock %}

  {% block javascripts %}

  <script src="{{ url_for('static', filename='js/vendor/modernizr-3.8.0.min.js') }}"></script>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script>window.jQuery || document.write('<script src="{{ url_for('static', filename='js/vendor/jquery-3.4.1.min.js') }}"><\/script>')</script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  {% block javascripts_others %}{% endblock %}
  <script src="{{ url_for('static', filename='js/vendor/vendor.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/plugins.js') }}"></script>
  <script src="{{ url_for('static', filename='js/main.js') }}"></script>
  {% block javascripts_local %}{% endblock %}
  <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
  <script>
    window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
    ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
  </script>
  <script src="https://www.google-analytics.com/analytics.js" async></script>

  {% endblock %}
</body>
</html>

在my-page.html

{% extends 'base.html' %}

[..]
{% block stylesheets_local %}
  {{ super() }} {# to load the parent assets #}
  <style>
  /* You "Local" css goes here .. (if any) */
  </style>
{% endblock %}

{% block body %}
  [..]
{% endblock %}


[..]
{% block javascripts_local %}
  {{ super() }} {# to load the parent assets #}
  <script>
  // You "Local" javascript code goes here ..
  </script>
{% endblock %}

如果您想通过例如 cdn 加载其他 javascript 或 css 外部库 逻辑是相同的，您需要扩展 {% block javascripts_others %}{% endblock %} 和 {% block stylesheets_others %}{% endblock %} 块模板，但不要忘记包含 {{ super }} 以加载父资产（如果有）。

但如果您认为应该全局加载外部库（javascript 或 css），则将它们分别添加到 base.html 下方的 bootstrap 和 font awesome 库中。因此，使用此逻辑，您将以正确的顺序为任何页面加载资产，而不会发生冲突。

但碰巧您的代码（js 或 css）是为 几个页面而不是所有页面（不是全局）加载的，在这种情况下，创建一个 分隔模板 并将您的 js 或 css 代码放入正确的位置和顺序（就像我们之前所做的那样）

在page-1.html、page-2.html、page-3.html ..

{% extends 'base.html' %}

[..]
{% block stylesheets_local %}

  {{ super() }} {# to load the parent assets #}
  {% include 'includes/mycss.css.html' %}

{% endblock %}

{% block body %}
  [..]
{% endblock %}


[..]
{% block javascripts_local %}

  {{ super() }} {# to load the parent assets #}
  {% include 'includes/myscript.js.html' %}

{% endblock %}

注意我是如何将部分模板命名为约定俗成的，这是一种很好的做法。

【讨论】：