Erstellen einer Full-Stack-Anwendung: Praktischer Fall von Vue3 + Django4

Erstellen von Full-Stack-Anwendungen: Praktischer Fall von Vue3 + Django4

Einführung:
Mit der Entwicklung des mobilen Internets hat die Full-Stack-Entwicklung immer mehr Aufmerksamkeit auf sich gezogen. Full-Stack-Entwicklungsingenieure können die Front-End- und Back-End-Entwicklung unabhängig voneinander abschließen, um die Entwicklungseffizienz zu verbessern. In diesem Artikel stellen wir vor, wie Sie mit den neuesten Versionen von Vue3 und Django4 eine Full-Stack-Anwendung erstellen, und geben einen praktischen Fall.

1. Einführung in das Vue3-Framework
Vue3 ist derzeit eines der beliebtesten Front-End-Frameworks. Es verwendet einen neuen API-Stil namens „kombinierte API“, um den Code besser lesbar und wartbar zu machen. Vue3 führt außerdem einige neue Funktionen wie Teleport, Suspense, Fragment usw. ein, die das Entwicklungserlebnis bereichern.

Bevor wir eine Vue3-Anwendung schreiben, müssen wir zunächst die Vue3-Entwicklungsumgebung installieren und konfigurieren. Wir können npm oder Yarn verwenden, um Vue3 zu installieren:

$ npm install -g @vue/cli

2. Einführung in das Django-Framework
Django ist ein effizientes, flexibles und sicheres Python-Webentwicklungs-Framework. Es bietet einen vollständigen Satz von Prozessen für die Verarbeitung von Webanfragen, den Zugriff auf Datenbanken und die Verarbeitung von Formularen usw. Komponenten. Mit Django ist das Erstellen komplexer Webanwendungen einfach.

Um das neueste Django4 nutzen zu können, müssen wir zunächst Python und Django installieren. Wir können den pip-Befehl verwenden, um Django zu installieren:

$ pip install Django

3. Erstellen Sie eine Full-Stack-Anwendung
Jetzt sind wir bereit, eine Full-Stack-Anwendung zu erstellen. Wir werden Vue3 als Front-End-Framework und Django als Back-End-Framework verwenden, um eine einfache Aufgabenverwaltungsanwendung zu erstellen.

1. Django-Projekt erstellen
   Zuerst müssen wir ein Django-Projekt erstellen. Öffnen Sie ein Befehlszeilenfenster und führen Sie den folgenden Befehl aus:

$ django-admin startproject task_manager

Dieser Befehl erstellt ein Django-Projekt mit dem Namen task_manager im aktuellen Verzeichnis.

2. Django-App erstellen
   Als nächstes müssen wir eine App im Django-Projekt erstellen. Führen Sie den folgenden Befehl in der Befehlszeile aus:

$ cd task_manager
$ python manage.py startapp tasks

Dieser Befehl erstellt eine Anwendung mit dem Namen „Tasks“ im Django-Projekt.

3. Definieren Sie das Datenbankmodell
   Im Django-Projekt müssen wir das Datenbankmodell zum Speichern von Aufgabendaten definieren. Öffnen Sie die Datei „tasks/models.py“ und fügen Sie den folgenden Code hinzu:

from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=100)
    description = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)

Dadurch wird ein Modell mit dem Namen „Task“ definiert, das den Titel, die Beschreibung und die Erstellungszeit der Aufgabe enthält.

4. API-Ansicht erstellen
   Als nächstes müssen wir die Ansichtsfunktion für die Bearbeitung von API-Anfragen erstellen. Öffnen Sie die Datei „tasks/views.py“ und fügen Sie den folgenden Code hinzu:

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

from .models import Task
from .serializers import TaskSerializer

@api_view(['GET', 'POST'])
def task_list(request):
    if request.method == 'GET':
        tasks = Task.objects.all()
        serializer = TaskSerializer(tasks, many=True)
        return Response(serializer.data)
    elif request.method == 'POST':
        serializer = TaskSerializer(data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data, status=201)
        return Response(serializer.errors, status=400)

Dadurch wird eine Ansichtsfunktion namens „task_list“ für die Verarbeitung von GET- und POST-Anfragen definiert. Die GET-Anfrage gibt eine Liste aller Aufgaben zurück, während die POST-Anfrage zum Erstellen neuer Aufgaben verwendet wird.

5. API-Serialisierer erstellen
   Im Django-Projekt müssen wir einen Serialisierer erstellen, um Daten zu serialisieren und zu deserialisieren. Der Serialisierer ist für die Konvertierung des Datenbankmodells in Daten im JSON-Format und die Konvertierung von JSON-Daten in das Datenbankmodell verantwortlich. Erstellen Sie eine Datei mit dem Namen „serializers.py“ im Aufgabenverzeichnis und fügen Sie den folgenden Code hinzu:

from rest_framework import serializers

from .models import Task

class TaskSerializer(serializers.ModelSerializer):
    class Meta:
        model = Task
        fields = ['id', 'title', 'description', 'created_at']

Dadurch wird ein Serialisierer namens „TaskSerializer“ zum Serialisieren und Deserialisieren des Task-Modells definiert.

6. URL-Routing konfigurieren
   Abschließend müssen wir das URL-Routing konfigurieren, um die API-Ansicht einer bestimmten URL zuzuordnen. Öffnen Sie die Datei task_manager/urls.py und fügen Sie den folgenden Code hinzu:

from django.urls import path

from tasks.views import task_list

urlpatterns = [
    path('api/tasks/', task_list, name='task-list'),
]

Dadurch wird eine URL-Route namens task-list konfiguriert, die die Ansichtsfunktion task_list dem Pfad /api/tasks/ zuordnet.

4. Vue3-Anwendung erstellen
Nachdem wir die Back-End-Konstruktion abgeschlossen haben, werden wir Vue3 zum Erstellen der Front-End-Seite verwenden.

1. Vue3-Projekt erstellen
   Zuerst müssen wir ein Vue3-Projekt erstellen. Führen Sie den folgenden Befehl in der Befehlszeile aus:

$ vue create task-manager

Dieser Befehl erstellt ein Vue3-Projekt mit dem Namen „Task-Manager“.

2. Abhängige Module installieren
   Nachdem wir das Projekt erstellt haben, müssen wir einige abhängige Module installieren. Führen Sie den folgenden Befehl in der Befehlszeile aus:

$ cd task-manager
$ npm install axios

axios ist ein leistungsstarker HTTP-Client zum Senden asynchroner Anfragen. Wir werden Axios verwenden, um mit dem Django-Backend zu kommunizieren.

3. Vue-Komponenten schreiben
   Dann müssen wir einige Vue-Komponenten schreiben, um die Aufgabenliste anzuzeigen und eine Schnittstelle für neue Aufgaben zu erstellen. Öffnen Sie die Datei TaskList.vue im Verzeichnis src/components und fügen Sie den folgenden Code hinzu:

<template>
  <div>
    <h1>Task List</h1>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        {{ task.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: []
    }
  },
  mounted() {
    this.fetchTasks()
  },
  methods: {
    async fetchTasks() {
      const response = await this.$http.get('/api/tasks/')
      this.tasks = response.data
    }
  }
}
</script>

Dadurch wird eine Vue-Komponente namens TaskList zum Anzeigen der Aufgabenliste definiert.

Dann erstellen Sie eine Datei namens CreateTask.vue und fügen den folgenden Code hinzu:

<template>
  <div>
    <h1>Create Task</h1>
    <input type="text" v-model="title" placeholder="Title">
    <input type="text" v-model="description" placeholder="Description">
    <button @click="createTask">Create</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      description: ''
    }
  },
  methods: {
    async createTask() {
      const data = {
        title: this.title,
        description: this.description
      }
      await this.$http.post('/api/tasks/', data)
      this.title = ''
      this.description = ''
      this.$emit('task-created')
    }
  }
}
</script>

Dadurch wird eine Vue-Komponente namens CreateTask zum Erstellen neuer Aufgaben definiert.

4. Ändern Sie die App-Komponente.
   Abschließend müssen wir die App.vue-Komponente ändern und der Seite die Komponenten TaskList und CreateTask hinzufügen. Öffnen Sie die Datei src/App.vue und ändern Sie den folgenden Code:

<template>
  <div>
    <task-list @task-created="fetchTasks" />
    <create-task @task-created="fetchTasks" />
  </div>
</template>

<script>
import TaskList from './components/TaskList.vue'
import CreateTask from './components/CreateTask.vue'

export default {
  components: {
    TaskList,
    CreateTask
  },
  methods: {
    fetchTasks() {
      this.$refs.taskList.fetchTasks()
    }
  }
}
</script>

Dadurch werden die TaskList- und CreateTask-Komponenten normal auf der App-Seite angezeigt und die fetchTasks-Methode wird ausgelöst, wenn die Aufgabe erstellt wird.

5. Führen Sie die Anwendung aus
Jetzt haben wir die Front-End- und Back-End-Entwicklungsarbeiten abgeschlossen und können die Anwendung zum Testen ausführen.

1. 启动Django后端
   在命令行中运行以下命令，启动Django后端服务器：

$ cd task_manager
$ python manage.py runserver

2. 启动Vue3前端
   在一个新的命令行窗口中运行以下命令，启动Vue3前端服务器：

$ cd task-manager
$ npm run serve

3. 测试应用
   现在，打开浏览器，访问http://localhost:8080，就可以看到应用的界面了。在任务列表中，可以看到已经创建的任务，点击“Create Task”按钮，可以创建新的任务。

结束语：
通过本文的介绍，我们了解了如何使用Vue3和Django4构建全栈应用的基本步骤。通过实战案例，我们学习了如何在Vue3中发送请求，并在Django中处理请求数据。希望本文对您的全栈开发学习之路有所帮助。

Das obige ist der detaillierte Inhalt vonErstellen einer Full-Stack-Anwendung: Praktischer Fall von Vue3 + Django4. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!