wake-up-neo.com

Flask Application - So verknüpfen Sie eine Javascript-Datei mit der Website

Ich habe Probleme beim Einstieg in die Verwendung von Javascript-Dateien auf meiner Website (A Flask-Anwendung). Ich starte die Website mit run.py, das wie folgt aussieht:

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

In meiner HTML-Seite habe ich den folgenden Code, der einen 404-Fehler ergibt:

404 error

Fehlermeldung:

error message

Meine Dateistruktur sieht so aus:

file structure

Irgendwelche Hinweise, wo ich falsch liege?

11
user2260199

Ach ja, zum Glück entwickle ich momentan eine Flaschenapplikation.

Momentan fehlt der Ordner static, in den standardmäßig eine Flasche mit einer Ordnerstruktur wie der folgenden hineinschaut:

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

Zwei wichtige Standardordner, die Flask in den Vorlagen und static ..__ untersucht, verwenden Sie diese Option, um Ihre Javascript-Dateien von Ihrer HTML-Seite aus zu verknüpfen:

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

Hoffe das hilft bei Fragen einfach fragen.

Plus - Ein guter Artikel zum Lesen, aber nicht besonders verwandt, aber es spricht über die Ordnerstruktur der Flasche: https://www.digitalocean.com/community/tutorials/wie- -on-an-ubuntu-vps

26
jonprasetyo

Ihr index.html ist also bei app/templates/index.html und Ihre jQuery ist bei app/javascript/jQuery.js richtig? 

Ich denke, dein Weg ist falsch. Versuche dies:

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

Versuchen Sie es mit src="app/javascript/jquery.js".

Ich habe auch bemerkt, dass Sie jquery.js zweimal enthalten - in Zeile 7 und 28.

0
dekkard

Dies hat mir geholfen, den Jquery-Teil meines Flask-Projekts zu beseitigen

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

Dies wurde direkt aus der Basisvorlage in http://getbootstrap.com/getting-started/ entnommen.

0
carlos rivera