構建全棧應用：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項目
首先，我們需要創建一個Django項目。打開命令行窗口，運行以下命令：
$ django-admin startproject task_manager
登錄后復制
該命令將在當前目錄下創建一個名為task_manager的Django項目。
- 創建Django應用
接下來，我們需要在Django項目中創建一個應用。在命令行中運行以下命令：
$ cd task_manager $ python manage.py startapp tasks
登錄后復制
該命令將在Django項目中創建一個名為tasks的應用。
- 定義數據庫模型
在Django項目中，我們需要定義數據庫模型來存儲任務數據。打開tasks/models.py文件，添加以下代碼：
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的模型，它包含了任務的標題、描述和創建時間。
- 創建API視圖
接下來，我們需要創建用于處理API請求的視圖函數。打開tasks/views.py文件，添加以下代碼：
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請求用于創建新的任務。
- 創建API序列化器
在Django項目中，我們需要創建序列化器來進行數據的序列化和反序列化。序列化器負責將數據庫模型轉換為JSON格式的數據，并將JSON數據轉換為數據庫模型。在tasks目錄下創建一個名為serializers.py的文件，添加以下代碼：
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模型進行序列化和反序列化。
- 配置URL路由
最后，我們需要配置URL路由，將API視圖映射到特定的URL。打開task_manager/urls.py文件，添加以下代碼：
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構建前端頁面。
- 創建Vue3項目
首先，我們需要創建一個Vue3項目。在命令行中運行以下命令：
$ vue create task-manager
登錄后復制
該命令將創建一個名為task-manager的Vue3項目。
- 安裝依賴模塊
在創建項目后，我們需要安裝一些依賴模塊。在命令行中運行以下命令：
$ cd task-manager $ npm install axios
登錄后復制
axios是一個強大的HTTP客戶端，用于發送異步請求。我們將使用axios來與Django后端進行通信。
- 編寫Vue組件
然后，我們需要編寫一些Vue組件來展示任務列表和創建新任務的界面。打開src/components目錄下的TaskList.vue文件，添加以下代碼：
<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組件，用于創建新的任務。
- 修改App組件
最后，我們需要修改App.vue組件，將TaskList和CreateTask組件添加到頁面中。打開src/App.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方法。
五、運行應用
現在，我們已經完成了前后端的開發工作，可以運行應用進行測試了。
- 啟動Django后端
在命令行中運行以下命令，啟動Django后端服務器：
$ cd task_manager $ python manage.py runserver
登錄后復制
- 啟動Vue3前端
在一個新的命令行窗口中運行以下命令，啟動Vue3前端服務器：
$ cd task-manager $ npm run serve
登錄后復制
- 測試應用
現在，打開瀏覽器，訪問http://localhost:8080，就可以看到應用的界面了。在任務列表中，可以看到已經創建的任務，點擊“Create Task”按鈕，可以創建新的任務。
結束語：
通過本文的介紹，我們了解了如何使用Vue3和Django4構建全棧應用的基本步驟。通過實戰案例，我們學習了如何在Vue3中發送請求，并在Django中處理請求數據。希望本文對您的全棧開發學習之路有所幫助。
以上就是構建全棧應用：Vue3+Django4實戰案例的詳細內容，更多請關注www.92cms.cn其它相關文章！
