實戰演練：Vue3+Django4全端開發實踐

實戰演練：Vue3 Django4全端開發實踐

隨著網路的快速發展，前後端分離的開發模式已成為現代web開發的主流。 Vue和Django作為兩個流行的開發框架，在前端和後端開發中扮演著重要的角色。本文將介紹如何透過使用Vue3和Django4進行全端開發，並透過一個實際的範例來示範其實踐過程。

一、專案規劃

在開始開發之前，我們首先需要進行專案規劃。我們將建立一個簡單的任務管理系統，其中使用者可以登入、建立任務、查看任務清單和更新任務的狀態。系統將使用Vue3作為前端框架，Django4作為後端框架，並使用API​​進行前後端的通訊。

二、前端開發

1. 建立Vue3專案
   首先，我們使用Vue CLI建立一個新的Vue3專案。在終端機中執行以下命令：

   vue create frontend

   依照提示選擇所需的配置項，並等待專案建立完成。

2. 設定路由和頁面元件
   在src目錄中建立router.js文件，並設定路由。我們將有三個頁面：登入頁面、任務清單頁面和任務詳情頁面。在router.js中加入以下程式碼：

   import { createRouter, createWebHistory } from 'vue-router'
   import Login from './views/Login.vue'
   import TaskList from './views/TaskList.vue'
   import TaskDetail from './views/TaskDetail.vue'
   
   const routes = [
     {
    path: '/login',
    name: 'Login',
    component: Login
     },
     {
    path: '/taskList',
    name: 'TaskList',
    component: TaskList
     },
     {
    path: '/taskDetail/:id',
    name: 'TaskDetail',
    component: TaskDetail
     }
   ]
   
   const router = createRouter({
     history: createWebHistory(process.env.BASE_URL),
     routes
   })
   
   export default router

3. 建立頁面元件
   在src/views目錄下建立Login.vue、TaskList.vue和TaskDetail.vue三個頁面元件，並撰寫相關的HTML和邏輯。這裡不再展示具體程式碼，讀者可以根據需要自行建立相關元件。
4. 發送API請求
   在src目錄下建立api.js文件，用於傳送API請求。這裡我們使用Axios函式庫來傳送HTTP請求。具體的API請求程式碼可以根據後端API的設計來編寫。
5. 整合Vuex
   在src目錄下建立store.js文件，並配置Vuex。我們將在store中儲存使用者資訊和任務清單數據，並透過mutations和actions來修改和取得這些數據。

至此，我們的前端開發工作就完成了。可以透過執行npm run serve指令來啟動開發伺服器，並在瀏覽器中造訪http://localhost:8080來查看頁面。

三、後端開發

1. 建立Django4專案
   在終端機中執行以下指令來建立一個新的Django4專案：

   django-admin startproject backend

2. 建立應用程式
   進入專案目錄，並執行下列指令來建立一個新的應用程式：

   cd backend
   python manage.py startapp tasks

3. 設定資料庫和模型
   在專案的settings .py中配置資料庫信息，並在tasks應用的models.py中建立所需的模型。例如，任務模型可以定義如下：

   from django.db import models
   
   class Task(models.Model):
    title = models.CharField(max_length=200)
    description = models.TextField()
    status = models.CharField(max_length=20)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

4. 建立API視圖
   在tasks應用的views.py中建立API視圖，並定義相關的路由。使用Django的Rest Framework可以更方便地建立API視圖和路由。
5. 配置CORS
   由於前端和後端分別運行在不同的網域或連接埠上，我們需要進行跨域資源共用（CORS）的設定。透過在settings.py中進行設定即可實現跨域請求。

四、前後端整合

1. 運行後端伺服器
   在終端機中執行以下命令來啟動Django的開發伺服器：

   python manage.py runserver

2. 設定前端API請求
   在前端的api.js檔案中設定A​​PI請求的base URL，使其指向後端伺服器的位址和連接埠。
3. 設定前端路由
   在前端的router.js檔案中依照實際需求設定路由。

現在，我們的前後端整合工作已經全部完成。可以透過存取前端的URL來測試應用的功能並與後端進行通訊。

五、總結

本文介紹如何使用Vue3和Django4進行全端開發，並透過一個實際的範例示範了其實踐過程。透過前後端分離的開發模式，我們可以更有效率地開發和維護功能強大的web應用程式。希望本文對初學者能夠提供一些啟發，並在實際開發中有所幫助。如有不足之處，也請指正。

以上是實戰演練：Vue3+Django4全端開發實踐的詳細內容。更多資訊請關注PHP中文網其他相關文章！