web-dev-qa-db-ja.com

FlaskでのHTMLとJavaScriptの分離

次の問題があります。

私は少しflaskアプリを構築しています。通常、私はbootstrapとjinjaテンプレートを使い続けて欲しいものを手に入れますが、今回はもう少し必要ですカスタマイズされたバージョン。グリップを得るために、カスタムjsとflaskを使用して基本的な権利を取得する簡単な例から始めました。しかし、詳細に進みましょう：

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)

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>

次に、期待される結果が表示されます。つまり、段落をクリックして非表示にすることができます。

しかし、私は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>

残念ながら何も起こりません。スクリプトファイルを参照する他の方法も試しましたが、今まで何も機能しません。本当にシンプルなものが足りない印象があります。前もって感謝します！

javascriptpythonflask
11
ChristianK

正しいURLが解決されるように、マークアップ内で url_for 関数を呼び出す必要があります。

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

クイックスタート ガイドを完全に遵守することを検討してください。他の問題が発生する可能性があります。

19
metatoaster