建構全端應用：Vue3 Django4實戰案例
引言：
隨著行動互聯網的發展，全端開發越來越受到關注。全端開發工程師能夠獨立完成前後端開發，提升開發效率。在這篇文章中，我們將介紹如何使用最新的Vue3和Django4建立全端應用，並提供一個實戰案例。
一、Vue3框架簡介
Vue3是目前最受歡迎的前端框架之一，它採用了一種稱為「組合式API」的全新API風格，使得程式碼更加可讀、可維護。 Vue3也引進了一些新特性，如Teleport、Suspense、Fragment等，讓開發體驗更加豐富。
在編寫Vue3應用程式之前，我們首先需要安裝並設定Vue3的開發環境。我們可以使用npm或yarn來安裝Vue3：
$ npm install -g @vue/cli
二、Django框架簡介
Django是一個高效、靈活和安全的Python Web開發框架，它提供了一整套用於處理Web請求、存取資料庫、處理表單等的元件。使用Django可以輕鬆建立複雜的Web應用程式。
為了使用最新的Django4，我們首先需要安裝Python和Django。我們可以使用pip指令來安裝Django：
$ pip install Django
三、建置全端應用程式
現在，我們已經準備好建置一個全端應用程式了。我們將使用Vue3作為前端框架，Django作為後端框架，來建立一個簡單的任務管理應用。
$ django-admin startproject task_manager
該命令將在目前目錄下建立一個名為task_manager的Django專案。
$ cd task_manager $ python manage.py startapp tasks
該命令將在Django專案中建立一個名為tasks的應用程式。
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)這將定義一個名為Task的模型，它包含了任務的標題、描述和建立時間。
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)這將定義一個名為task_list的視圖函數，用於處理GET和POST請求。 GET請求返回所有任務列表，而POST請求用於建立新的任務。
from rest_framework import serializers
from .models import Task
class TaskSerializer(serializers.ModelSerializer):
class Meta:
model = Task
fields = ['id', 'title', 'description', 'created_at']這將定義一個名為TaskSerializer的序列化器，用於對Task模型進行序列化和反序列化。
from django.urls import path
from tasks.views import task_list
urlpatterns = [
path('api/tasks/', task_list, name='task-list'),
]這將配置一個名為task-list的URL路由，它將task_list視圖函數映射到/api/tasks/路徑。
四、建構Vue3應用
現在，我們已經完成了後端的搭建，接下來我們將使用Vue3建立前端頁面。
$ vue create task-manager
該命令將建立一個名為task-manager的Vue3專案。
$ cd task-manager $ npm install axios
axios是一個強大的HTTP客戶端，用於發送非同步請求。我們將使用axios來與Django後端進行通訊。
<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>這將定義一個名為TaskList的Vue元件，用於展示任務清單。
然後，建立一個名為CreateTask.vue的文件，新增以下程式碼：
<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>這將定義一個名為CreateTask的Vue元件，用於建立新的任務。
<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>這將使TaskList和CreateTask元件在App頁面中正常顯示，並且當建立任務後會觸發fetchTasks方法。
五、運行應用程式
現在，我們已經完成了前後端的開發工作，可以執行應用程式進行測試了。
$ cd task_manager $ python manage.py runserver
$ cd task-manager $ npm run serve
结束语：
通过本文的介绍，我们了解了如何使用Vue3和Django4构建全栈应用的基本步骤。通过实战案例，我们学习了如何在Vue3中发送请求，并在Django中处理请求数据。希望本文对您的全栈开发学习之路有所帮助。
以上是建構全端應用：Vue3+Django4實戰案例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
