Grundlagen zum Üben: Erste Schritte mit der Vue3+Django4-Full-Stack-Entwicklung

Grundlagen zum Üben: Eine Einführung in die Vue3+Django4-Full-Stack-Entwicklung

Übersicht:
Full-Stack-Entwicklung bedeutet, dass ein Entwickler Front-End- und Back-End-Arbeit gleichzeitig erledigen kann, was immer mehr wird und in der modernen Webentwicklung immer wichtiger. In diesem Artikel wird die Verwendung von Vue3 und Django4 für die Full-Stack-Entwicklung vorgestellt und einige Codebeispiele bereitgestellt, um den Lesern den Einstieg zu erleichtern.

1. Vue3 installieren und konfigurieren
   Zuerst müssen wir die Vue-CLI installieren, um unsere Vue-Projekte zu erstellen und zu verwalten. Führen Sie den folgenden Befehl in der Befehlszeile aus, um Vue CLI zu installieren:

   npm install -g @vue/cli

   Nach Abschluss der Installation verwenden Sie den folgenden Befehl, um ein neues Vue-Projekt zu erstellen:

   vue create my-project

   Wählen Sie entsprechend den Eingabeaufforderungen aus und wählen Sie die Standardoption aus.

2. Vue-Komponenten erstellen
   In einem Vue-Projekt können wir Komponenten verwenden, um Benutzeroberflächen zu erstellen. Erstellen Sie im src-Verzeichnis des Vue-Projekts einen Ordner mit dem Namen „components“ und darin eine Datei mit dem Namen „HelloWorld.vue“. In diese Datei können wir unseren Komponentencode schreiben, zum Beispiel:

   <template>
     <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
     </div>
   </template>
   
   <script>
   export default {
     data() {
    return {
      message: 'Hello World!'
    }
     },
     methods: {
    changeMessage() {
      this.message = 'New Message!'
    }
     }
   }
   </script>

   Dies ist eine einfache Komponente, die einen Titel und eine Schaltfläche enthält, die den Inhalt des Titels ändert, wenn auf die Schaltfläche geklickt wird.

3. Django4 konfigurieren
   Als nächstes müssen wir Django installieren und ein neues Django-Projekt erstellen. Führen Sie den folgenden Befehl über die Befehlszeile aus, um Django zu installieren:

   pip install django==4.0.0

   Sobald die Installation abgeschlossen ist, erstellen Sie ein neues Django-Projekt mit dem folgenden Befehl:

   django-admin startproject myproject

   Dadurch wird ein neues Django-Projekt mit dem Namen „myproject“ im aktuellen Verzeichnis erstellt.

4. Django-Ansichten und URLs erstellen
   Öffnen Sie im Stammverzeichnis Ihres Django-Projekts die Datei „settings.py“ und fügen Sie den folgenden Inhalt zur Einstellung „INSTALLED_APPS“ hinzu:

   INSTALLED_APPS = [
    ...
    'rest_framework',
    'myapp',  // myapp是我们将要创建的应用的名称，根据需要修改
    ...
   ]

   Dann fügen Sie am Ende der Einstellungen den folgenden Inhalt hinzu .py-Datei:

   REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.AllowAny',
    ]
   }

   Dadurch wird Django so konfiguriert, dass es das REST-Framework zum Erstellen der API verwendet.

Als nächstes erstellen Sie eine Anwendung mit dem Namen „myapp“ im Stammverzeichnis des Django-Projekts:

python manage.py startapp myapp

Öffnen Sie im myapp-Verzeichnis die Datei „views.py“ und fügen Sie den folgenden Inhalt hinzu:

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!'})

Dies ist ein einfaches The Wenn wir auf die URL zugreifen, gibt die View-Funktion eine JSON-Antwort mit „Hello World!“ zurück.

Als nächstes öffnen Sie im Verzeichnis „myproject“ die Datei urls.py und fügen den folgenden Inhalt hinzu:

from django.urls import path
from myapp.views import hello_world

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

Dadurch wird unsere Ansichtsfunktion mit dem URL-Pfad „/api/hello/“ verknüpft.

5. Führen Sie das Projekt aus
   Jetzt haben wir die Grundkonfiguration von Vue und Django abgeschlossen. Als nächstes müssen wir die Vue-Anwendung und das Django-Projekt verbinden.

Öffnen Sie im Stammverzeichnis des Vue-Projekts die Datei „main.js“ und fügen Sie den folgenden Inhalt hinzu:

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

const app = createApp(App)
app.config.globalProperties.$http = axios
app.mount('#app')

Dadurch wird die Vue-Anwendung global so konfiguriert, dass Axios als HTTP-Client verwendet wird.

Öffnen Sie im Stammverzeichnis Ihres Vue-Projekts die Datei „App.vue“ und fügen Sie den folgenden Inhalt hinzu:

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="getMessage">Get Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    getMessage() {
      this.$http.get('http://localhost:8000/api/hello/')
        .then(response => {
          this.message = response.data.message
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

Dadurch wird eine Anfrage an Djangos Ansicht gesendet, wenn auf die Schaltfläche geklickt wird, und die zurückgegebene Nachricht wird auf der Seite angezeigt.

Jetzt haben wir alle Konfigurationen abgeschlossen. Führen Sie im Stammverzeichnis des Vue-Projekts den folgenden Befehl aus, um den Vue-Entwicklungsserver zu starten:

npm run serve

Führen Sie im Stammverzeichnis des Django-Projekts den folgenden Befehl aus, um den Django-Entwicklungsserver zu starten:

python manage.py runserver

Besuchen Sie nun „ http://localhost:8080“ wird eine Seite mit der Schaltfläche „Hallo Welt!“ angezeigt. Wenn Sie auf die Schaltfläche klicken, wird auf der Seite „Hello World!“ angezeigt.

Dies ist eine Einführung in die Full-Stack-Entwicklung mit Vue3 und Django4. Mit dem Beispielcode in diesem Artikel erfahren Sie, wie Sie eine einfache Vue- und Django-Anwendung erstellen und diese miteinander verbinden. Ich hoffe, das hilft Ihnen auf Ihrer Reise zur Full-Stack-Entwicklung!

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