Question

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

文件结构：

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>

Answer 1

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

如果你想保持简单，你应该将以某种方式与你的python代码交互的javascript代码与不代码的代码分开。后者应该在静态文件夹中，而动态代码可以放在特殊的块中。

<!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代码。

Answer 2

有点依赖。我个人在static/中保存了像bootstrap.js和jquery.js这样的javascript文件，但需要访问我的路由和/或从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，但这是可能的。

使用Javascript构建Flask应用程序

2 个答案: