構(gòu)建全棧應(yīng)用:Vue3+Django4實戰(zhàn)案例
引言:
隨著移動互聯(lián)網(wǎng)的發(fā)展,全棧開發(fā)越來越受到關(guān)注。全棧開發(fā)工程師能夠獨立完成前后端開發(fā),提高開發(fā)效率。在這篇文章中,我們將介紹如何使用最新的Vue3和Django4構(gòu)建一個全棧應(yīng)用,并提供一個實戰(zhàn)案例。
一、Vue3框架簡介
Vue3是目前最流行的前端框架之一,它采用了一種稱為“組合式API”的全新API風(fēng)格,使得代碼更加可讀、可維護。Vue3還引入了一些新特性,如Teleport、Suspense、Fragment等,使得開發(fā)體驗更加豐富。
在編寫Vue3應(yīng)用之前,我們首先需要安裝和配置Vue3的開發(fā)環(huán)境。我們可以使用npm或yarn來安裝Vue3:
$ npm install -g @vue/cli
登錄后復(fù)制
二、Django框架簡介
Django是一個高效、靈活和安全的Python Web開發(fā)框架,它提供了一整套用于處理Web請求、訪問數(shù)據(jù)庫、處理表單等的組件。使用Django可以輕松構(gòu)建復(fù)雜的Web應(yīng)用程序。
為了使用最新的Django4,我們首先需要安裝Python和Django。我們可以使用pip命令來安裝Django:
$ pip install Django
登錄后復(fù)制
三、構(gòu)建全棧應(yīng)用
現(xiàn)在,我們已經(jīng)準備好構(gòu)建一個全棧應(yīng)用了。我們將使用Vue3作為前端框架,Django作為后端框架,來構(gòu)建一個簡單的任務(wù)管理應(yīng)用。
- 創(chuàng)建Django項目
首先,我們需要創(chuàng)建一個Django項目。打開命令行窗口,運行以下命令:
$ django-admin startproject task_manager
登錄后復(fù)制
該命令將在當前目錄下創(chuàng)建一個名為task_manager的Django項目。
- 創(chuàng)建Django應(yīng)用
接下來,我們需要在Django項目中創(chuàng)建一個應(yīng)用。在命令行中運行以下命令:
$ cd task_manager $ python manage.py startapp tasks
登錄后復(fù)制
該命令將在Django項目中創(chuàng)建一個名為tasks的應(yīng)用。
- 定義數(shù)據(jù)庫模型
在Django項目中,我們需要定義數(shù)據(jù)庫模型來存儲任務(wù)數(shù)據(jù)。打開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)
登錄后復(fù)制
這將定義一個名為Task的模型,它包含了任務(wù)的標題、描述和創(chuàng)建時間。
- 創(chuàng)建API視圖
接下來,我們需要創(chuàng)建用于處理API請求的視圖函數(shù)。打開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)
登錄后復(fù)制
這將定義一個名為task_list的視圖函數(shù),用于處理GET和POST請求。GET請求返回所有任務(wù)列表,而POST請求用于創(chuàng)建新的任務(wù)。
- 創(chuàng)建API序列化器
在Django項目中,我們需要創(chuàng)建序列化器來進行數(shù)據(jù)的序列化和反序列化。序列化器負責(zé)將數(shù)據(jù)庫模型轉(zhuǎn)換為JSON格式的數(shù)據(jù),并將JSON數(shù)據(jù)轉(zhuǎn)換為數(shù)據(jù)庫模型。在tasks目錄下創(chuàng)建一個名為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']
登錄后復(fù)制
這將定義一個名為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'), ]
登錄后復(fù)制
這將配置一個名為task-list的URL路由,它將task_list視圖函數(shù)映射到/api/tasks/路徑。
四、構(gòu)建Vue3應(yīng)用
現(xiàn)在,我們已經(jīng)完成了后端的搭建,接下來我們將使用Vue3構(gòu)建前端頁面。
- 創(chuàng)建Vue3項目
首先,我們需要創(chuàng)建一個Vue3項目。在命令行中運行以下命令:
$ vue create task-manager
登錄后復(fù)制
該命令將創(chuàng)建一個名為task-manager的Vue3項目。
- 安裝依賴模塊
在創(chuàng)建項目后,我們需要安裝一些依賴模塊。在命令行中運行以下命令:
$ cd task-manager $ npm install axios
登錄后復(fù)制
axios是一個強大的HTTP客戶端,用于發(fā)送異步請求。我們將使用axios來與Django后端進行通信。
- 編寫Vue組件
然后,我們需要編寫一些Vue組件來展示任務(wù)列表和創(chuàng)建新任務(wù)的界面。打開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>
登錄后復(fù)制
這將定義一個名為TaskList的Vue組件,用于展示任務(wù)列表。
然后,創(chuàng)建一個名為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>
登錄后復(fù)制
這將定義一個名為CreateTask的Vue組件,用于創(chuàng)建新的任務(wù)。
- 修改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>
登錄后復(fù)制
這將使得TaskList和CreateTask組件在App頁面中正常顯示,并且當創(chuàng)建任務(wù)后會觸發(fā)fetchTasks方法。
五、運行應(yīng)用
現(xiàn)在,我們已經(jīng)完成了前后端的開發(fā)工作,可以運行應(yīng)用進行測試了。
- 啟動Django后端
在命令行中運行以下命令,啟動Django后端服務(wù)器:
$ cd task_manager $ python manage.py runserver
登錄后復(fù)制
- 啟動Vue3前端
在一個新的命令行窗口中運行以下命令,啟動Vue3前端服務(wù)器:
$ cd task-manager $ npm run serve
登錄后復(fù)制
- 測試應(yīng)用
現(xiàn)在,打開瀏覽器,訪問http://localhost:8080,就可以看到應(yīng)用的界面了。在任務(wù)列表中,可以看到已經(jīng)創(chuàng)建的任務(wù),點擊“Create Task”按鈕,可以創(chuàng)建新的任務(wù)。
結(jié)束語:
通過本文的介紹,我們了解了如何使用Vue3和Django4構(gòu)建全棧應(yīng)用的基本步驟。通過實戰(zhàn)案例,我們學(xué)習(xí)了如何在Vue3中發(fā)送請求,并在Django中處理請求數(shù)據(jù)。希望本文對您的全棧開發(fā)學(xué)習(xí)之路有所幫助。
以上就是構(gòu)建全棧應(yīng)用:Vue3+Django4實戰(zhàn)案例的詳細內(nèi)容,更多請關(guān)注www.92cms.cn其它相關(guān)文章!