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.
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
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
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')), ]
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!'})
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), ]
Starten Sie den Django-Server :
Starten Sie den Django-Entwicklungsserver mit dem folgenden Befehl:
python manage.py runserver
Besuchen Sie http://localhost:8000/api/hello/. Sie sollten die zurückgegebenen JSON-Daten sehen können.
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
Hinweis: Wählen Sie beim Erstellen des Projekts die standardmäßig voreingestellte Konfiguration aus oder konfigurieren Sie sie entsprechend Ihren eigenen Anforderungen.
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 } } } }
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>
Starten Sie den Vue-Entwicklungsserver:
Verwenden Sie den folgenden Befehl So starten Sie den Vue-Entwicklungsserver:
cd myvueapp npm run serve
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!