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.
$ django-admin startproject task_manager
Dieser Befehl erstellt ein Django-Projekt mit dem Namen task_manager im aktuellen Verzeichnis.
$ cd task_manager $ python manage.py startapp tasks
Dieser Befehl erstellt eine Anwendung mit dem Namen „Tasks“ im Django-Projekt.
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.
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.
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.
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.
$ vue create task-manager
Dieser Befehl erstellt ein Vue3-Projekt mit dem Namen „Task-Manager“.
$ 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.
<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.
<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.
$ cd task_manager $ python manage.py runserver
$ cd task-manager $ npm run serve
结束语：
通过本文的介绍，我们了解了如何使用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!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
