Technische Details: Vue3+Django4 Neubauprojekt

Detaillierte technische Erklärung: Vue3+Django4-Neuprojektkonstruktion

Einführung:
Heutzutage ist das Entwicklungsmodell der Front-End- und Back-End-Trennung zu einer wesentlichen Fähigkeit für die Unternehmensentwicklung geworden. Vue und Django sind sehr beliebte Front-End- und Back-End-Frameworks. Ihre Kombination kann die Entwicklungseffizienz und Codequalität erheblich verbessern. In diesem Artikel wird detailliert beschrieben, wie ein neues Projekt erstellt wird, wobei Vue3 als Front-End-Framework und Django4 als Back-End-Framework verwendet werden. Außerdem erhalten die Leser Codebeispiele und detaillierte technische Erklärungen.

1. Umgebungseinrichtung

1. Frontend-Umgebungseinrichtung
   Stellen Sie zunächst sicher, dass Sie die Node.js-Umgebung installiert haben. Installieren Sie dann Vue CLI 4.x mit dem folgenden Befehl:

npm install -g @vue/cli

Erstellen Sie ein neues Vue3-Projekt mit dem folgenden Befehl:

vue create project-name

Während des Projektinitialisierungsprozesses müssen Sie Vue3 als Version auswählen. Nachdem die Initialisierung abgeschlossen ist, geben Sie das Projektverzeichnis ein und verwenden Sie den folgenden Befehl, um das Projekt auszuführen:

cd project-name
npm run serve

2. Backend-Umgebungseinrichtung
   Stellen Sie zunächst sicher, dass Sie die Python-Umgebung installiert haben. Verwenden Sie dann die Folgender Befehl zum Installieren von Django 4.x:

pip install Django

Erstellen Sie ein neues Django-Projekt:

django-admin startproject project-name

Geben Sie das Projektverzeichnis ein und verwenden Sie den folgenden Befehl, um das Projekt auszuführen:

cd project-name
python manage.py runserver

2. Gemeinsames Front-End- und Back-End-Debugging

1. Front-End-Konfiguration
   Suchen Sie im Stammverzeichnis des Vue3-Projekts die Datei vue.config .js. Wenn sie nicht vorhanden ist, erstellen Sie sie manuell. Fügen Sie der Datei den folgenden Code hinzu:

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

Dieser Code konfiguriert den Proxyserver so, dass er API-Anfragen vom Front-End an die Backend-Adresse weiterleitet.

2. Backend-Konfiguration
   Suchen Sie im Stammverzeichnis des Django-Projekts die Datei „settings.py“ und ändern Sie ALLOWED_HOSTS und INSTALLED_APPS wie folgt:

ALLOWED_HOSTS = ['localhost', '127.0.0.1']

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    ...
]

Dann fügen Sie den folgenden Code am Ende der Datei „settings.py“ hinzu:

CORS_ALLOW_ALL_ORIGINS = True

Dieser Code ist so konfiguriert, dass er domänenübergreifende Anfragen zulässt.

3. Front-End- und Back-End-Interaktion

1. Front-End-Anfrage
   Im Vue3-Projekt werden API-Anfragen mithilfe der Axios-Bibliothek gestellt. Installieren Sie zunächst axios mit dem folgenden Befehl:

npm install axios

Führen Sie dann in der Komponente, die die API aufrufen muss, axios ein und senden Sie die Anfrage:

import axios from 'axios'

axios.get('/api/example')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

2. Backend-Antwort
   Verwenden Sie in Django Django Rest Framework (DRF), um Erstellen Sie die API. Verwenden Sie zunächst den folgenden Befehl, um DRF zu installieren:

pip install djangorestframework

Dann erstellen Sie im Django-App-Verzeichnis eine neue Datei „serializers.py“ und schreiben Sie den folgenden Code:

from rest_framework import serializers

class ExampleSerializer(serializers.Serializer):
    id = serializers.IntegerField()
    name = serializers.CharField(max_length=100)

Als nächstes erstellen Sie eine neue Datei „views.py“ und schreiben „The“. Folgender Code:

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

@api_view(['GET'])
def example(request):
    data = [
        {'id': 1, 'name': 'example1'},
        {'id': 2, 'name': 'example2'},
    ]
    serializer = ExampleSerializer(data, many=True)
    return Response(serializer.data)

Suchen Sie schließlich im Django-Projektverzeichnis die Datei urls.py und fügen Sie den folgenden Code hinzu:

from django.urls import path
from . import views

urlpatterns = [
    path('example/', views.example),
]

Wenn das Front-End auf diese Weise eine GET-Anfrage an /api/example sendet, sendet das Back-End gibt Beispieldaten zurück.

Fazit:
Durch die detaillierte Erklärung dieses Artikels werden die Leser verstehen, wie sie Vue3 als Front-End-Framework und Django4 als Back-End-Framework verwenden, um ein neues Projekt zu erstellen. Wir erklärten den Prozess der Umgebungseinrichtung, des gemeinsamen Debuggens von Front-End und Back-End sowie der Front-End- und Back-End-Interaktion und stellten entsprechende Codebeispiele bereit. Ich hoffe, dass die Leser durch diesen Artikel die grundlegende Verwendung von Vue und Django beherrschen und sie auf tatsächliche Projekte anwenden können.

Das obige ist der detaillierte Inhalt vonTechnische Details: Vue3+Django4 Neubauprojekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!