Erstellen eines SPA-Beispiels mit Python und React

Mit der kontinuierlichen Weiterentwicklung der Internettechnologie beginnen immer mehr Websites, die SPA-Architektur (Single Page Application) zu übernehmen. SPA bezieht sich auf die Darstellung des gesamten oder eines Großteils des Inhalts auf einer Seite und die dynamische Aktualisierung des Seiteninhalts über den Client, anstatt die herkömmliche Mehrseitenmethode zu verwenden. In diesem Artikel erstellen wir mithilfe von Python und React ein einfaches SPA-Beispiel, um die Grundidee und Implementierungsmethode von SPA zu demonstrieren.

1. Umgebungseinrichtung

Bevor wir mit dem Bau beginnen, müssen wir eine Entwicklungsumgebung einrichten. Zuerst müssen Sie Node.js installieren und npm ist ein Tool zum Ausführen von JavaScript auf der Serverseite, und npm ist der Paketmanager für Node.js. Zweitens müssen wir Python und die damit verbundenen notwendigen Bibliotheken installieren.

Um die Verwaltung und Bereitstellung zu erleichtern, werden wir Django als Back-End-Framework zum Aufbau unseres Projekts verwenden. Wir können den folgenden Befehl verwenden, um Django zu installieren:

pip install Django

Gleichzeitig müssen wir einige andere Python-Bibliotheken installieren, darunter django-cors-headers, djangorestframework und django-webpack-loader. Diese Bibliotheken werden unser Back-End-Framework vollständiger machen und mehr Unterstützung für unsere Front-End-Konstruktion bieten.

pip install django-cors-headers djangorestframework django-webpack-loader

2 Erstellen Sie das Frontend

Bevor wir das Frontend erstellen, müssen wir einige Verzeichnisstrukturen definieren. Wir erstellen im Stammverzeichnis des Projekts einen Ordner namens „frontend“, um unseren Front-End-Code zu speichern. Unter dem Frontend-Ordner erstellen wir einen Ordner namens src zum Speichern unseres React-Codes und einen Ordner namens public zum Speichern unserer HTML-Vorlagen, Bilder und anderen Ressourcendateien.

Als nächstes verwenden wir den Befehl npx, um eine React-Anwendung mit dem Namen „frontend“ zu erstellen:

npx create-react-app frontend

Dann müssen wir npm verwenden, um einige notwendige Bibliotheken zu installieren, einschließlich „react-router-dom“. Axios, Bootstrap, React-Bootstrap und Prop-Types.

npm install React-Router-Dom Axios Bootstrap React-Bootstrap Prop-Types

Nachdem die Installation abgeschlossen ist, können wir mit dem Schreiben von React-Code beginnen. Wir werden unsere React-Komponenten basierend auf dem Routing dynamisch laden und auch Axios in den Komponenten verwenden, um Daten mit dem Backend auszutauschen.

3. Erstellen Sie das Backend

Bevor wir das Backend erstellen, müssen wir einige Verzeichnisstrukturen definieren. Wir erstellen im Stammverzeichnis des Projekts einen Ordner mit dem Namen „backend“, um unseren Backend-Code zu speichern. Unter dem Backend-Ordner erstellen wir einen Ordner namens „Templates“, um unsere HTML-Vorlagendateien zu speichern.

Zuerst müssen wir ein Django-Projekt namens mysite erstellen:

django-admin.py startproject mysite backend

Dann müssen wir einige notwendige Konfigurationen in der Datei mysite/mysite/settings.py hinzufügen. Insbesondere müssen wir STATIC_URL, STATICFILES_DIRS, TEMPLATE_DIRS, CORS_ORIGIN_ALLOW_ALL, REST_FRAMEWORK und WEBPACK_LOADER definieren.

STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, "frontend/build/static")]
TEMPLATE_DIRS = [os.path.join(BASE_DIR, "frontend/public")]
CORS_ORIGIN_ALLOW_ALL = True
REST_FRAMEWORK = {'DEFAULT_RENDERER_CLASSES': ('rest_framework.renderers.JSONRenderer', )}
WEBPACK_LOADER = {'DEFAULT': {'BUNDLE_DIR_NAME': 'dist/', 'STATS_FILE': os.path.join( BASE_DIR, 'frontend', 'webpack-stats.json')}}

Nachdem wir diese Konfigurationen vorgenommen haben, können wir mit dem Schreiben unseres Backend-Codes beginnen. Wir werden eine Datei namens „views.py“ definieren, um unsere HTTP-Anfragen zu verarbeiten.

In der Ansichtsfunktion verwenden wir den Namen der React-Komponente als Routing-Parameter, um unsere React-Vorlage dynamisch zu laden und an das Frontend zu senden.

4. Erstellen Sie Verpackungstools

Während der tatsächlichen Bereitstellung müssen wir Webpack verwenden, um React-Komponenten und zugehörige Ressourcen in eine Datei zu packen. Um die Verwaltung zu erleichtern, können wir den Namen der React-Komponente in die Webpack-Konfigurationsdatei einbetten, sodass die entsprechende Verpackungsdatei basierend auf dem Komponentennamen generiert werden kann.

Nachdem wir diese Vorbereitungen getroffen haben, können wir den Front-End- und Back-End-Code gemeinsam integrieren. Wir können den statischen Dateidienst von Django verwenden, um die React-Paketdateien und HTML-Vorlagen zusammen auf derselben Webseite zu veröffentlichen und so die Erstellung unseres SPA-Beispiels abzuschließen.

5. Zusammenfassung

In diesem Artikel haben wir ein SPA-Beispiel mit Python und React erstellt und die Grundidee und Implementierungsmethode von SPA demonstriert. Anhand dieses Beispiels können wir erkennen, dass die SPA-Architektur die gesamte Site schneller, effizienter und einfacher zu warten machen kann. Ich hoffe, dass dieser Artikel für Anfänger hilfreich ist. Wenn Sie Probleme finden oder Fragen haben, können Sie sich gerne an uns wenden.

Das obige ist der detaillierte Inhalt vonErstellen eines SPA-Beispiels mit Python und React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!