使用 Javascript 构建 Flask 应用程序答案

【问题标题】：Structuring Flask App with Javascript使用 Javascript 构建 Flask 应用程序
【发布时间】：2018-04-15 13:15:48
【问题描述】：

所以我在决定将我的 javascript 放在我的 Flask 应用程序中的哪个位置时遇到了麻烦。我目前在我的每个模板上都有我的脚本，但计划将它放在静态文件夹中，但是，值不会通过烧瓶应用程序分配。我要问的是我想如何构建我的应用程序以改变我的 javascript 中的变量。下面是 HTML 脚本中我当前如何更改变量的示例。

文件结构：

static/
    css
templates/
    example.html
app.py
main.py

烧瓶：

@app.route('/')
def index():
    a = 10
    return render_template("index.html", a=a)

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> Example </title>
</head>
<body>
    <!-- Javascript files -->
    <!-- Contents -->
    <script>
    var a = {{ a }};
        alert(a);
    </script>
</body>
</html>

【问题讨论】：

我不确定这是否是您要问的问题，但我认为将您的 js 应用程序代码放在自己的文件中然后就像您在此处显示的那样在模板中的脚本标签供您使用 js-code。

标签： javascript python flask

【解决方案1】：

这取决于。我个人将诸如 bootstrap.js 和 jquery.js 之类的 javascript 文件保存在 static/ 中，但是需要访问我的路由和/或从 python 返回的变量的 javascript 文件也经常存储在 html 模板中。您可以通过向 api 路由发送 ajax 请求来绕过它，但这在很多情况下也不理想，并且会增加很多额外的开销。

这是另一种动态渲染 js 的方法，但仍将其保存在自己的文件中。

test.py

from flask import Flask, render_template_string, render_template
app = Flask(__name__)


@app.route('/')
def hello_world():
    js = render_js('static/test.js', a="wow")
    return render_template('test.html', js=js)


def render_js(fname, **kwargs):
    with open(fname) as fin:
        script = fin.read()
        rendered_script = render_template_string(script, **kwargs)
        return rendered_script

静态/test.js

var a = "{{ a }}";
    alert(a);

模板/test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> Example </title>
</head>
<body>
    <h2>nice</h2>
<script>
{{js|safe}}
</script>
</body>
</html>

我不喜欢直接在html中渲染js，但这是一种可能性。

【讨论】：

【解决方案2】：

将 javascript 文件与 html 模板分开总是一个好主意。但是，有时您需要将一些数据从 python 直接传递到 javascript。在我看来，目前最好的方法是将所需数据作为 JSON 响应从您的 FLASK 应用程序传递，并使用 AJAX 或 Jquery 等捕获该数据。

如果您只想保持简单，您应该将与您的 python 代码交互的 JavaScript 代码与不与 Python 代码交互的代码分开。后者应该在静态文件夹中，而动态代码可以放在特殊块中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> Example </title>
</head>
<body>
    <!-- Javascript files -->
    <!-- Contents -->
    {% block extra_js %}
    <script>
    var a = {{ a }};
        alert(a);
    </script>
    {% endblock %}
</body>
</html>

在这里，您在主模板中有一个很好的 {% extra_js %} 块，可以很容易地在子模板中添加一些 javascript 代码。

【讨论】：