Erstellen eines SPA-Beispiels mit Python und Vue.js

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.

Schritt 1: Umgebung einrichten

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

Schritt 2: Erstellen Sie die Backend-API

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

Schritt drei: Erstellen Sie die Front-End-Vue.js-Anwendung

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

Schritt vier: Testen Sie die Anwendung

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!