在瓶分离HTML和JavaScript

我建立一个小烧瓶的应用程序，通常我只是引导和神社模板坚持得到我想要的，但这次我需要更多的定制版本。为了得到一个抓地力，我开始使用一个简单的例子，使用自定义的JS和瓶来获得基本的权利。但让细讲：

假设我有/被叫app.py位于my_app应用一个简单的烧瓶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)

和相应的index.html，它位于my_app应用/模板，简直就是

<!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>

然后我看到了预期的结果，也就是我可以点击段落使其消失。

但是：我想把javascript部分放到static/js /下的main.js文件中。像这样：

$(document).ready(function() { 
    $("p").click(function(event){ 
     $(this).hide(); 
    }); 
});

和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>

可惜什么也不会发生。我已经尝试过其他引用脚本文件的方法，但是直到现在没有任何工作。我有这样的印象，我错过了很简单的事情。提前致谢！

来源

2016-03-22 ChristianK

当您在浏览器中点击该URL“/js/main.js”（在搜索栏中右键单击）时，该文件在那里？ –

嘿乔希，我可以在http://127.0.0.1:8080/static/js/main.js下看到它。因为，据我所知，Flask在静态文件夹中查找这样的文件，我认为这需要省略。显然我错了。 – ChristianK

你需要一个标记中调用url_for功能，使正确的URL来解决，即

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

请充分考虑以下的Quick Start引导，因为它会与你可能有其他问题的帮助。

来源

2016-03-22 23:33:50 metatoaster

在瓶分离HTML和JavaScript

回答

相关问题