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?

javascripthtmlflaskhttp-status-code-404
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