So proteotypisieren Sie eine Web -App mit Django und Vue.js

Dieser Artikel zeigt, wie eine reaktionsschnelle, reaktive Webanwendung mit Django und Vue.js schnell prototypisiert werden kann, komplett mit einer vollwertigen Admin-Schnittstelle. Wir werden das Projekt einrichten, die Datenbank integrieren, Vue.js -Komponenten implementieren, den Anwendungsstatus mit Vuex verwalten und Vue Router für die nahtlose Navigation verwenden.

Schlüsselmerkmale:

• Schnelles Prototyping von reaktionsschnellen und reaktiven Webanwendungen.
• Seamless Full-Stack-Entwicklung mit Django und Vue.js.
• Dynamische Benutzeroberflächen mit Vue.js -Komponenten in Django -Vorlagen.
• effizientes Zustandsmanagement mit Vuex.
• SCHWEISE SEITE -Übergänge mit Vue Router und Djangos URL -Dispatcher.
• gründliche Tests auf harmonische Komponentenwechselwirkung.

1. Projekt -Setup:

In diesem Abschnitt wird angenommen, dass Sie Python installiert haben. Ausführliche Anweisungen finden Sie in der offiziellen Django -Dokumentation zur Installation.

• Erstellen Sie eine virtuelle Umgebung: Verwenden Sie virtualenv myenvironment (oder python3 -m venv myenvironment für Python 3.3). Aktivieren Sie es mit dem entsprechenden Befehl für Ihr Betriebssystem (siehe Artikel für Einzelheiten).
• Django installieren: in der aktivierten Umgebung ausführen. pip install django
• Erstellen Sie ein Django -Projekt: Verwenden Sie . django-admin startproject myproject
• Erstellen Sie eine Django -App: Verwenden Sie . Denken Sie daran, django-admin startapp myapp zu myapp.apps.MyappConfig in INSTALLED_APPS zu addieren. myproject/settings.py

2. Datenbank -Setup mit Django:

Wir werden die Backend -Datenbank mithilfe von Django -Modellen definieren, die später in Vuex für Frontend State Management integriert werden.

• Modelle definieren (myApp/models.py): Modelle erstellen und Article Modelle mit geeigneten Feldern (siehe Artikel für Code). Author
• Register Modelle im admin (myapp/admin.py): Registrieren Sie die Modelle und Article (siehe Artikel für Code). Author
• Migrationen erstellen: Ausführen und python manage.py makemigrations. python manage.py migrate

3. Grundlegende Schnittstelle mit VUE -Komponenten:

In diesem Abschnitt wird die Integration von Vue.js -Komponenten in Django -Vorlagen beschrieben.

• django -Ansicht (MyApp/Views.py): Erstellen Sie eine Ansicht, die Artikel und Autoren aus der Datenbank abgerufen und eine Vorlage rendert (siehe Artikel für Code).
• Django -Vorlage (MyApp/templates/myapp/template.html): Erstellen Sie eine grundlegende Vorlage mit Bootstrap (siehe Artikel für Code). Diese Vorlage enthält die VUE.JS -Anwendung.
• vue.js Komponenten: VUE -Komponenten für Artikel- und Autorenlisten und einzelne Elemente erstellen (siehe Artikel für Code). Beachten Sie die Verwendung von Delimiters [[ und ]], um Konflikte mit der Vorlagensprache von Django zu vermeiden.

4. Verbinden von Vuex -Speicher mit der Django -Datenbank:

vuex verwaltet den Anwendungszustand und verbindet das Frontend mit den Django -Backend -Daten.

• Vuex -Speicher: Erstellen Sie einen Vuex -Speicher in der Django -Vorlage und füllen Sie sie mit Daten aus, die aus der Django -Ansicht mit Djangos Vorlagesprache abgerufen wurden (siehe Artikel für Code). Dies schließt Getter ein, um Daten per Slug abzurufen.

5. Routing mit Django und Vue -Router:

Wir werden den URL-Dispatcher von Django und den Vue-Router für die nahtlose kundenseitige Navigation verwenden.

• Django -URLs (MyProject/urls.py): URLs konfigurieren, um verschiedene Routen zu verarbeiten (siehe Artikel für Code).
• VUE -Router: Routen mit dem HTML5 -Verlauf des Vue -Routers definieren, um reibungslose Übergänge ohne Seiten -Nachladen zu aktivieren (siehe Artikel für Code).

6. Testen:

• Erstellen Sie einen Django -Superuser: run python manage.py createsuperuser.
• Führen Sie den lokalen Server aus: Ausführen python manage.py runserver.
• Populationen Sie die Datenbank: Zugriff auf die Admin -Schnittstelle ( https://www.php.cn/link/E86C39706A2A5033ED14F935353F015E ), um Autoren und Artikeln hinzuzufügen.
.
• Testen Sie die Anwendung: Durchsuchen Sie die Site, um die Funktionalität zu überprüfen.

Voller Spa -Code und Weiterentwicklung:

Der vollständige Code für die einseitige Anwendung ist auf GitHub verfügbar (Link im Originalartikel). In dem Artikel wird auch die Erweiterung der Anwendung erläutert, indem eine REST -API mit Django Rest Framework hinzugefügt und mit Axios in Vue.js für die volle CRUD -Funktionalität konsumiert wird. Auf diese Weise ermöglicht das Erstellen, Aktualisieren und Löschen von Einträgen direkt aus dem Frontend.

FAQs:

Der Artikel schließt mit einem umfassenden FAQ -Abschnitt, der verschiedene Aspekte der Integration von Django und Vue.js befasst, einschließlich Bereitstellung, Test, Fehlerbehandlung und spezifischen Integrationspunkten zwischen Django -Merkmalen (Formularen, ORM) und VUE.JS.

Das obige ist der detaillierte Inhalt vonSo proteotypisieren Sie eine Web -App mit Django und Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!