Heim > Web-Frontend > View.js > Hauptteil

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

WBOY
Freigeben: 2023-09-09 19:13:41
Original
1400 Leute haben es durchsucht

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage