用Javascript构建Flask应用 [英] Structuring Flask App with Javascript
问题描述
因此，我在决定将JavaScript放置在Flask应用程序中的位置时遇到麻烦.我目前在每个模板上都有自己的脚本，但计划将其放在静态文件夹中，但是，值不会通过flask应用程序分配.我要问的是我想如何根据想要更改JavaScript中的变量来构造应用程序.HTML脚本下方是一个有关我当前如何更改变量的示例.
So I'm having trouble with deciding on where to place my javascript in my Flask app. I currently have my scripts on each of my templates, but was planning to put it in the static folder, however, values don't get assigned through the flask app. What I'm asking is how would I want to structure my app in terms of wanting to alter variables in my javascript. An example of how I'm currently changing variables is below in the HTML script.
文件结构:
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>
推荐答案
这取决于.我个人在 static/中保存了bootstrap.js和jquery.js之类的javascript文件，但是需要访问我的路由和/或从python返回的变量的javascript文件我也经常存储在html模板中.您可以通过将ajax请求发送到api路由来绕过此操作，但这在很多情况下都不理想，并且会增加很多额外的开销.
It kind of depends. I personally save javascript files like bootstrap.js and jquery.js in static/, but javascript files which need access to my routes and/or variables returned from python I often also store within the html template. You could bypass this by sending ajax requests to an api route, but that's not ideal either in a lot of cases, and add a lot of extra overhead.
这是动态呈现js的另一种方法，但仍将其保存在自己的文件中.
Here is another way to dynamically render js, but still keep it in its own files.
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
static/test.js
static/test.js
var a = "{{ a }}";
alert(a);
templates/test.html
templates/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，但这是有可能的.
I don't prefer it over just rendering the js in the html directly, but it's a possibility.
这篇关于用Javascript构建Flask应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
