web-dev-qa-db-fra.com

Application Flask - Comment lier un fichier javascript au site Web

Je ne parviens pas à utiliser des fichiers javascript sur mon site Web (application A Flask). Je lance le site web en exécutant run.py qui ressemble à ceci:

#!flask/bin/python
from app import app
app.run(debug=True)

Dans ma page html, j'ai le code suivant qui donne une erreur 404:

404 error

Message d'erreur:

error message

Ma structure de fichier ressemble à ceci:

file structure

Des allusions à où je vais mal?

javascripthtmlflaskhttp-status-code-404
11
user2260199

Ah oui, heureusement, je suis en train de développer une application de flacon pour le moment.

Il vous manque actuellement le dossier static dans lequel le flacon par défaut se penche, une structure de dossier semblable à celle-ci:

|FlaskApp
----|FlaskApp
--------|templates
        - html files are here
--------|static
        - css and javascript files are here

Deux dossiers par défaut importants que Flask examinera dans les modèles et dans static . Une fois que vous aurez trié ces informations, vous vous en servirez pour lier vos fichiers javascript à partir de votre page html:

<script src="{{url_for('static', filename='somejavascriptfile.js')}}"></script>

J'espère que cela aide les questions il suffit de demander.

Plus - Un bon article à lire mais pas super lié mais il parle de la structure des dossiers de flask est ceci: https://www.digitalocean.com/community/tutorials/how-to-deploy-a-flask-application -on-an-ubuntu-vps

26
jonprasetyo

Donc, votre index.html est à app/templates/index.html et votre jQuery est à app/javascript/jQuery.js non? 

Je pense que ton chemin est mauvais. Essaye ça:

<script src="../javascript/jquery.js"></script>
0
Anakin

Essayez d'utiliser src="app/javascript/jquery.js".

En outre, j’ai remarqué que vous incluez jquery.js deux fois - sur les lignes 7 et 28.

0
dekkard

Voici ce qui m'a aidé à éliminer la partie jquery de mon projet Flask

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

Ceci a été pris directement du modèle de base trouvé dans http://getbootstrap.com/getting-started/

0
carlos rivera