Vertiefendes Lernen: Vue3+Django4-Full-Stack-Entwicklungsbeispiele

Umfassendes Lernen: Beispiele für die Full-Stack-Entwicklung von Vue3+Django4

Übersicht:
Mit der rasanten Entwicklung von Webanwendungen ist die Full-Stack-Entwicklung zu einem heißen Thema geworden. Als beliebte Front-End- und Back-End-Frameworks werden Vue und Django häufig in der Full-Stack-Entwicklung eingesetzt. In diesem Artikel wird die Verwendung der neuesten Versionen von Vue3 und Django4 für die Full-Stack-Entwicklung vorgestellt und anhand eines praktischen Beispiels die leistungsstarken Funktionen und die flexible Skalierbarkeit demonstriert.

1. Umgebungseinrichtung:
   Zuerst müssen wir sicherstellen, dass Python, Node.js und Vue CLI korrekt installiert wurden. Es kann mit den folgenden Befehlen installiert werden:
2. Python-Installation: https://www.python.org/downloads/
3. Node.js-Installation: https://nodejs.org/
4. Vue CLI-Installation: npm install - g @ vue/cli

5. Django-Projekt erstellen:
   Zuerst müssen wir ein neues Django-Projekt erstellen. Öffnen Sie die Befehlszeile und erstellen Sie das Projekt mit dem folgenden Befehl:

   django-admin startproject myproject

   Nach dem Login kopieren

6. Erstellen Sie eine Django-Anwendung:
   Als nächstes müssen wir eine Django-Anwendung erstellen. Gehen Sie in das Projektverzeichnis und erstellen Sie die Anwendung mit dem folgenden Befehl:

   cd myproject
   python manage.py startapp myapp

   Nach dem Login kopieren

7. Konfigurieren Sie das Django-Routing:
   Konfigurieren Sie in der Datei myproject/myproject/urls.py die Stammroute von Django und die Unterroute von myapp:

   from django.urls import path, include
   
   urlpatterns = [
    path('api/', include('myapp.urls')),
   ]

   Nach dem Login kopieren

8. Erstellen Sie eine Django-Ansicht:
   Erstellen Sie in der Datei myapp/views.py die Ansichtsfunktion von Django:

   from django.shortcuts import render
   from django.http import JsonResponse
   
   def hello(request):
    return JsonResponse({'message': 'Hello, World!'})

   Nach dem Login kopieren

9. Konfigurieren Sie das Django-Routing:
   Konfigurieren Sie in der Datei myapp/urls.py das Routing von myapp:

   from django.urls import path
   
   from . import views
   
   urlpatterns = [
    path('hello/', views.hello),
   ]

   Nach dem Login kopieren

10. Starten Sie den Django-Server :
    Starten Sie den Django-Entwicklungsserver mit dem folgenden Befehl:

    python manage.py runserver

    Nach dem Login kopieren

    Besuchen Sie http://localhost:8000/api/hello/. Sie sollten die zurückgegebenen JSON-Daten sehen können.

11. Vue-Projekt erstellen:
    Jetzt müssen wir ein neues Vue-Projekt erstellen. Öffnen Sie die Befehlszeile und erstellen Sie das Projekt mit dem folgenden Befehl:

    vue create myvueapp

    Nach dem Login kopieren

    Hinweis: Wählen Sie beim Erstellen des Projekts die standardmäßig voreingestellte Konfiguration aus oder konfigurieren Sie sie entsprechend Ihren eigenen Anforderungen.

12. Konfigurieren Sie den Vue-Entwicklungsserver-Proxy:
    Suchen Sie im Stammverzeichnis des Vue-Projekts die Datei vue.config.js (falls nicht vorhanden, erstellen Sie eine neue) und fügen Sie die folgende Konfiguration hinzu:

    module.exports = {
     devServer: {
         proxy: {
             '/api': {
                 target: 'http://localhost:8000',
                 ws: true,
                 changeOrigin: true
             }
         }
     }
    }

    Nach dem Login kopieren

13. Erstellen Sie die Vue-Komponente:
    Suchen Sie im src-Verzeichnis des Vue-Projekts die Datei App.vue und ersetzen Sie deren Inhalt durch den folgenden Code:

    <template>
      <div>
     <h1>{{ message }}</h1>
      </div>
    </template>
    
    <script>
    export default {
      data() {
     return {
       message: ""
     };
      },
      mounted() {
     this.fetchData();
      },
      methods: {
     fetchData() {
       fetch("/api/hello/")
         .then(response => response.json())
         .then(data => {
           this.message = data.message;
         })
         .catch(err => {
           console.log(err);
         });
     }
      }
    };
    </script>

    Nach dem Login kopieren

14. Starten Sie den Vue-Entwicklungsserver:
    Verwenden Sie den folgenden Befehl So starten Sie den Vue-Entwicklungsserver:

    cd myvueapp
    npm run serve

    Nach dem Login kopieren

    Besuchen Sie http://localhost:8080. Sie sollten die von der Django-API erhaltenen Daten sehen können.

Zu diesem Zeitpunkt haben wir das Vue3+Django4-Full-Stack-Entwicklungsbeispiel erfolgreich abgeschlossen. Anhand dieses Beispiels haben wir gelernt, wie man eine Entwicklungsumgebung einrichtet, Django-Projekte und Vue-Projekte erstellt und wie man Routing konfiguriert, Ansichten und Komponenten erstellt und Daten von der Back-End-API über AJAX erhält.

Zusammenfassung:
Durch das Studium dieses Artikels haben wir ein tiefgreifendes Verständnis der Full-Stack-Entwicklung von Vue3 und Django4 erlangt und einen praktischen Fall geübt. Die Full-Stack-Entwicklung bietet uns mehr Flexibilität und Effizienz und ermöglicht es uns, sowohl Front-End- als auch Back-End-Anforderungen gleichzeitig zu erfüllen. Ich hoffe, dass die Leser durch dieses Beispiel ein tieferes Verständnis der Vue3+Django4-Full-Stack-Entwicklung erlangen und in der Lage sind, dieses Wissen und diese Technologien in tatsächlichen Projekten anzuwenden.

Das obige ist der detaillierte Inhalt vonVertiefendes Lernen: Vue3+Django4-Full-Stack-Entwicklungsbeispiele. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!