Mit der Popularität von Webanwendungen sind Single-Page-Anwendungen (SPA) zu einem Trend geworden. SPA erfordert nicht jedes Mal ein Neuladen der Seite, sondern überlässt die Verwaltung des Inhalts JavaScript, wodurch die Leistung von Webanwendungen verbessert wird.
In diesem Artikel werden wir Python und Vue.js verwenden, um ein einfaches SPA-Beispiel zu erstellen. Python wird zur Bereitstellung der Backend-API und Vue.js für die Frontend-Implementierung verwendet.
Um diese Anwendung zu erstellen, müssen Sie Python 3.x und Node.js installieren. Sie können das Installationsprogramm von der offiziellen Website herunterladen.
Nachdem die Installation abgeschlossen ist, können Sie im Terminal den folgenden Befehl ausführen, um zu überprüfen, ob die Installation erfolgreich war:
python --version node --version
Wir werden das Flask-Framework verwenden, um die Backend-API bereitzustellen. Flask ist ein in Python geschriebenes Mikro-Framework, das die Erstellung von Webanwendungen vereinfacht.
Wir müssen Flask und die Flask-CORS-Bibliothek installieren, um vom Client herkunftsübergreifende Anfragen an die API zu stellen.
Erstellen Sie ein Verzeichnis mit dem Namen „backend“ und erstellen Sie dann in diesem Verzeichnis eine Python-Datei mit dem Namen „app.py“. Kopieren Sie den folgenden Code in diese Datei:
from flask import Flask
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
@app.route('/api/test')
def test():
return {'message': 'Hello from the backend!'}Hier haben wir eine Flask-Anwendung erstellt und CORS aktiviert. Als nächstes definieren wir eine Route als „/api/test“, die eine einfache Nachricht zurückgibt.
Als nächstes können Sie den folgenden Befehl im Terminal ausführen, um den Backend-API-Server zu starten:
export FLASK_APP=app.py export FLASK_ENV=development flask run
Als nächstes erstellen wir eine Einzelseitenanwendung mit Vue.js. Sie können die Vue-CLI verwenden, um Vue.js-Anwendungen zu erstellen.
Gehen Sie im Terminal in das Verzeichnis „backend“ und führen Sie den folgenden Befehl aus:
npm install -g @vue/cli vue create frontend
Dadurch wird ein Verzeichnis namens „frontend“ erstellt und eine grundlegende Vue.js-Anwendung für Sie eingerichtet.
Als nächstes müssen wir die Axios-Bibliothek installieren, um über die Frontend-Anwendung auf die Backend-API zuzugreifen. Führen Sie den folgenden Befehl im Verzeichnis „frontend“ aus:
npm install axios
Jetzt können Sie die Datei „src/App.vue“ in Ihrer Vue.js-Anwendung öffnen und den folgenden Code in das Template-Tag kopieren:
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
message: ""
};
},
mounted() {
this.getMessage();
},
methods: {
getMessage() {
axios.get("http://localhost:5000/api/test").then(response => {
this.message = response.data.message;
});
}
}
};
</script>Der obige Code enthält Eine einfache Vorlage, die Nachrichten von der Backend-API auf der Seite anzeigt. Es enthält außerdem eine Vue.js-Komponente, die die Axios-Bibliothek verwendet, um Nachrichten von der Backend-API abzurufen und sie an Seitenelemente zu binden.
Als nächstes können Sie den folgenden Befehl im Terminal ausführen, um die Vue.js-Anwendung zu starten:
npm run serve
Jetzt können Sie mit Ihrem Browser auf http://localhost:8080 zugreifen und das sollte auch so sein Sie können eine Nachricht mit dem Titel „Hallo vom Backend!“ sehen.
Fertig! Jetzt können Sie Ihre Anwendung nach Bedarf weiterentwickeln. Dies ist eine einfache Beispielanwendung, aber Sie können diese Vorlage verwenden, um größere Anwendungen zu erstellen, einschließlich Anmeldung und Authentifizierung, Datenbankverbindungen und komplexere Front-End-Schnittstellen.
Das obige ist der detaillierte Inhalt vonErstellen eines SPA-Beispiels mit Python und Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
