實戰演練：Vue3+Django4全端開發實踐-Vue.js-PHP中文網

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

WBOY

發布： 2023-09-11 15:42:38

原創

1369 人瀏覽過

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

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

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

一、專案規劃

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

二、前端開發

建立Vue3專案
首先，我們使用Vue CLI建立一個新的Vue3專案。在終端機中執行以下命令：
```
vue create frontend
```
登入後複製
依照提示選擇所需的配置項，並等待專案建立完成。

設定路由和頁面元件
在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

登入後複製

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

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

三、後端開發

建立Django4專案
在終端機中執行以下指令來建立一個新的Django4專案：
```
django-admin startproject backend
```
登入後複製
建立應用程式
進入專案目錄，並執行下列指令來建立一個新的應用程式：
```
cd backend
python manage.py startapp tasks
```
登入後複製

設定資料庫和模型
在專案的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)

登入後複製

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