web-dev-qa-db-fra.com

Séparation html et JavaScript dans Flask

Hé, j'ai le problème suivant:

Je construis un peu flask app, et généralement je reste avec bootstrap et jinja templates pour obtenir ce que je veux, mais cette fois j'avais besoin d'un peu plus) version personnalisée. Pour obtenir une prise en main, j'ai commencé avec un exemple simple d'utilisation de js personnalisés et flask pour obtenir le droit de base. Mais allons dans le détail:

Supposons que j'ai une simple flask application web appelée app.py située dans my_app/qui ressemble à ceci

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)

et l'index.html correspondant, qui se trouve dans my_app/templates, est simplement

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

alors je vois le résultat attendu, c'est-à-dire que je peux cliquer sur le paragraphe pour le faire disparaître.

MAIS: je voudrais mettre la partie javascript dans un fichier main.js sous static/js /. ainsi:

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

et le fichier index.html devient:

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

Malheureusement, rien ne se passera. J'ai également essayé d'autres façons de référencer le fichier de script, mais jusqu'à présent, rien ne fonctionne. J'ai l'impression de manquer quelque chose de très simple. Merci d'avance!

javascriptpythonflask
11
ChristianK

Vous devez invoquer le url_for fonction dans un balisage afin que l'URL correcte soit résolue, c'est-à-dire.

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

Veuillez considérer le guide Démarrage rapide entièrement car il vous aidera avec d'autres problèmes que vous pourriez avoir.

19
metatoaster