Vue3+Django4 Full-Stack-Entwicklungsleitfaden

Vue3+Django4 Full Stack Development Guide

Mit der Popularität des Front-End- und Back-End-Trennungsentwicklungsmodells sind Vue und Django zu den von vielen Entwicklern bevorzugten Technologie-Stacks geworden. Als beliebtes Front-End-Framework ist Vue leicht zu erlernen, flexibel und effizient, während Django ein leistungsstarkes Back-End-Framework ist, das verschiedene Funktionen bereitstellt, die für die Entwicklung von Webanwendungen erforderlich sind.

Die kürzlich veröffentlichten Versionen Vue3 und Django4 bringen viele aufregende neue Funktionen und Verbesserungen mit sich, die die Entwicklungseffizienz und das Benutzererlebnis verbessern. Dieser Artikel führt die Leser dazu, den Full-Stack-Entwicklungsleitfaden von Vue3+Django4 zu verstehen und hilft Entwicklern, diese beiden Frameworks besser für die Full-Stack-Entwicklung zu nutzen.

Schritt eins: Umgebung einrichten

Bevor wir mit der Full-Stack-Entwicklung beginnen, müssen wir zunächst eine Entwicklungsumgebung einrichten. Vue3 benötigt Node.js als Laufumgebung, während Django4 Python-Unterstützung erfordert. Daher müssen wir Node.js und Python separat installieren.

Die Installation von Node.js ist sehr einfach. Laden Sie das entsprechende Installationspaket von der offiziellen Website herunter und befolgen Sie die Anweisungen zur Installation. Nach Abschluss der Installation müssen wir auch das Gerüsttool vue-cli von Vue installieren, das über den folgenden Befehl installiert werden kann:

npm install -g @vue/cli

Die Installation von Python ist ebenfalls sehr einfach. Sie können das entsprechende Installationspaket von der offiziellen Website herunterladen Installieren Sie es dann gemäß den Anweisungen. Nachdem die Installation abgeschlossen ist, müssen wir auch Django und zugehörige Erweiterungspakete installieren. Sie können den pip-Befehl zum Installieren verwenden:

pip install Django

Schritt 2: Erstellen Sie ein Vue3-Projekt

Nachdem wir die Entwicklungsumgebung eingerichtet haben, können wir mit der Erstellung beginnen Vue3-Projekt. Öffnen Sie das Befehlszeilenterminal und verwenden Sie den folgenden Befehl, um ein neues Vue3-Projekt zu erstellen:

vue create my-project

Konfigurieren Sie dann die Optionen gemäß den Eingabeaufforderungen. Sie können zwischen manueller Konfiguration und Standardkonfiguration wählen. Nachdem Sie sich für die manuelle Konfiguration entschieden haben, können Sie je nach Bedarf verschiedene Funktionen und Plug-Ins auswählen.

Geben Sie nach dem Erstellen des Projekts das Projektverzeichnis ein und starten Sie den Entwicklungsserver mit dem folgenden Befehl:

cd my-project
npm run serve

Auf diese Weise können Sie im Browser auf das Projekt zugreifen und die Vue3-Willkommensseite sehen.

Schritt 3: Erstellen Sie ein Django-Projekt

Als nächstes müssen wir ein Django-Projekt erstellen. Verwenden Sie im Befehlszeilenterminal den folgenden Befehl, um ein neues Django-Projekt zu erstellen:

django-admin startproject mysite

Geben Sie nach dem Erstellen des Projekts das Projektverzeichnis ein und starten Sie den Entwicklungsserver mit dem folgenden Befehl:

cd mysite
python manage.py runserver

Auf diese Weise können Sie darauf zugreifen die Django-Willkommensseite im Browser.

Schritt 4: Vue3 und Django verbinden

Da wir nun ein Vue3-Projekt und ein Django-Projekt haben, müssen wir sie verbinden. Zuerst müssen wir den Proxy im Vue3-Projekt konfigurieren, um auf die API von Django zugreifen zu können. Erstellen Sie eine vue.config.js-Datei im Stammverzeichnis des Vue3-Projekts und fügen Sie dann die folgende Konfiguration hinzu:

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

Wenn Sie dann API-Anfragen mit Axios oder anderen HTTP-Client-Bibliotheken im Vue3-Projekt stellen, können Sie direkt auf < zugreifen code>/ apiPfad. /api路径。

在Django项目中，我们需要创建一个API视图来处理Vue3发送的请求。可以创建一个api.py文件，在其中编写API视图的逻辑。例如，可以使用Django的rest framework来快速创建RESTful API：

from rest_framework.decorators import api_view
from rest_framework.response import Response

@api_view(['GET'])
def hello_world(request):
    return Response({'message': 'Hello, World!'})

然后，在Django项目的urls.py中添加这个API视图的路由：

from django.urls import path
from . import api

urlpatterns = [
    path('api/hello', api.hello_world),
]

这样，当在Vue3项目中发送GET请求到/api/hello时，Django将返回一个包含{'message': 'Hello, World!'}

rrreee

rrreee

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