Python 在 Flask 中分离 html 和 JavaScript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36167086/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Separating html and JavaScript in Flask
提问by ChristianK
Hey I've got the following problem:
嘿我有以下问题：
I am building a little flask app, and usually i just stick with bootstrap and jinja templates to get what I want, but this time I needed a bit more customised version. In order to get a grip I started with a simple example of using custom js and flask to get the basic right. But lets go into detail:
我正在构建一个小烧瓶应用程序，通常我只是坚持使用 bootstrap 和 jinja 模板来获得我想要的东西，但这次我需要一个更自定义的版本。为了更好地掌握，我从一个简单的例子开始，使用自定义 js 和 Flask 来获得基本的权利。但是让我们详细说明一下：
Assume I have a simple flask web app called app.py located in my_app/ which looks like this
假设我在 my_app/ 中有一个名为 app.py 的简单 Flask web 应用程序，它看起来像这样
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(port=8080, debug=True)
and the corresponding index.html, which is located in my_app/templates, is simply
和位于 my_app/templates 中的相应 index.html 只是
<!DOCTYPE html>
<html>
<body>
<p>Clicking here will make me dissapear</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("p").click(function(event){
$(this).hide();
});
});
</script>
</body>
</html>
then I see the expected result, that is, i can click on the paragraph to make it disappear.
然后我看到了预期的结果，也就是我可以点击段落让它消失。
BUT: I would like to put the javascript part into a main.js file under static/js/. like so:
但是：我想将 javascript 部分放入 static/js/ 下的 main.js 文件中。像这样：
$(document).ready(function() {
$("p").click(function(event){
$(this).hide();
});
});
and the index.html becomes:
和 index.html 变成：
<!DOCTYPE html>
<html>
<body>
<p>Clicking here will make me dissapear</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src='/js/main.js'></script>
</body>
</html>
Unfortunately nothing will happen. I have tried other ways of referencing the script file as well but until now nothing works. I have the impression im missing something really simple. Thanks in advance!
不幸的是什么都不会发生。我也尝试过其他引用脚本文件的方法，但到目前为止没有任何效果。我的印象是我错过了一些非常简单的东西。提前致谢！
回答by metatoaster
You need to invoke the url_forfunction within a markup so that the correct url be resolved, i.e.
您需要url_for在标记中调用该函数，以便解析正确的 url，即
<script type=text/javascript src="{{
url_for('static', filename='js/main.js') }}"></script>
Please consider following the Quick Startguide fully as it will help with other issues you might have.
请考虑完全遵循快速入门指南，因为它将帮助您解决可能遇到的其他问题。
