Schnellstart: Erste Schritte zur Vue3+Django4-Full-Stack-Entwicklung

Schnellstart: Erste Schritte zur Vue3+Django4-Full-Stack-Entwicklung

Mit der rasanten Entwicklung des Internets hat sich die Full-Stack-Entwicklung in den letzten Jahren zu einem der heißesten Technologietrends entwickelt. Bei der Full-Stack-Entwicklung handelt es sich um eine gängige Entwicklungsmethode durch die Kombination von Front-End- und Back-End-Frameworks. Dieser Artikel führt Sie in die Welt der Vue3+Django4-Full-Stack-Entwicklung und bietet eine Einführungsanleitung für Anfänger.

Vue3 ist die neueste Version des Vue.js-Frameworks. Sie bietet eine höhere Leistung, eine bessere Entwicklungserfahrung und mehr neue Funktionen. Django ist ein fortschrittliches Python-Webframework, das umfangreiche Funktionalität und Skalierbarkeit bietet. Durch deren Kombination entstehen leistungsstarke und moderne Webanwendungen.

Bevor Sie beginnen, stellen Sie sicher, dass Node.js, Vue CLI und Python korrekt installiert sind. Sobald die Installation abgeschlossen ist, können wir mit der Erstellung unseres Projekts beginnen. Erstellen Sie zunächst ein Vue3-Projekt mit der Vue-CLI, öffnen Sie ein Terminal und führen Sie den folgenden Befehl aus:

vue create myproject

Während des Erstellungsprozesses können Sie die Option „Vue3-Voreinstellung verwenden“ auswählen, wodurch Sie eine vorgefertigte Konfiguration erhalten, die Vue enthält Router und Vuex. Nachdem die Erstellung abgeschlossen ist, betreten wir das Projektverzeichnis und installieren die Abhängigkeitspakete von Vue und Django:

cd myproject
npm install vue@next
pip install Django

Als nächstes müssen wir eine Django-Anwendung im Projekt erstellen, die mit dem folgenden Befehl erstellt wird:

django-admin startproject backend
cd backend
python manage.py startapp api

Nach der Erstellung ist Wenn alles abgeschlossen ist, können wir mit dem Schreiben von Code beginnen. Zuerst müssen wir den statischen Dateipfad von Vue in der Datei „settings.py“ von Django hinzufügen, die STATIC_URL suchen und den folgenden Code darunter hinzufügen:

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'frontend/dist'),
]

Dann erstellen wir eine neue urls.py-Datei für die Verarbeitung und die Vue-Frontend-Anfrage. Diese Datei befindet sich im API-Verzeichnis. Schreiben Sie den folgenden Code:

from django.urls import path
from . import views

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

Als nächstes schreiben wir den Logikcode in die Datei „views.py“, um Anfragen vom Vue-Frontend zu verarbeiten. Schreiben Sie den folgenden Code:

from django.shortcuts import render
from django.http import JsonResponse

def api(request):
    data = {
        'message': 'Hello from Django API!'
    }
    return JsonResponse(data)

In diesem einfachen Beispiel geben wir einfach eine JSON-Antwort zurück, die eine einfache Nachricht enthält. In tatsächlichen Anwendungen können Sie komplexere Logik schreiben, um verschiedene Anforderungen zu verarbeiten.

Als nächstes müssen wir den Front-End-Code mit Vue schreiben. Gehen Sie in das Projektverzeichnis und installieren Sie Vue Router und Axios:

cd frontend
npm install vue-router@next axios

Dann öffnen wir die Datei src/router/index.js und fügen den folgenden Code hinzu:

import { createWebHistory, createRouter } from 'vue-router'
import Home from '../views/Home.vue'
import API from '../views/API.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/api',
    name: 'API',
    component: API
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

In diesem Beispiel definieren wir zwei Routen: '/' entsprechend Home Komponente, „/api“ entspricht der API-Komponente. Anschließend erstellen wir die Komponenten Home.vue und API.vue im Verzeichnis src/views. Hier müssen wir lediglich einige Textinformationen anzeigen.

Jetzt können wir Anfragen in der API.vue-Komponente senden, um Daten von der Django-API abzurufen. Verwenden Sie den folgenden Code, um den ursprünglichen Inhalt zu ersetzen:

<template>
  <div>
    <h1 id="message">{{ message }}</h1>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    axios.get('/api/')
      .then(response => {
        this.message = response.data.message
      })
      .catch(error => {
        console.error(error)
      })
  }
}
</script>

In diesem Beispiel haben wir eine GET-Anfrage in der gemounteten Hook-Funktion der Komponente gesendet, die von der Django-API zurückgegebenen Daten abgerufen und die Daten auf der Seite angezeigt.

Jetzt haben wir eine grundlegende Full-Stack-Anwendung mit Vue3 und Django4 fertiggestellt. Sie können den folgenden Befehl ausführen, um den Entwicklungsserver zu starten:

cd ..
python manage.py runserver

Öffnen Sie dann http://localhost:8000/ in Ihrem Browser und Sie sehen eine Seite mit Django-API-Daten.

Durch die Anleitung dieses Artikels haben wir Sie dazu gebracht, den Einführungsleitfaden zur Vue3+Django4-Full-Stack-Entwicklung abzuschließen. Ich hoffe, dass es für Anfänger hilfreich ist, und ich hoffe auch, dass Sie das Gebiet der Full-Stack-Entwicklung weiter erlernen und erkunden können. Komm schon!

Das obige ist der detaillierte Inhalt vonSchnellstart: Erste Schritte zur Vue3+Django4-Full-Stack-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!