Django 與 Vue 的專案目錄與設計流程指南

By徐培鈞
LinkedIn

更新日期： 2025 年 1 月 1 日

本文為 Django + Vue 前後端分離解析，第 18 篇：

  1. 前後端分離的 404 錯誤處理：步驟指南
  2. 正常網頁與 API 接口：新手指南
  3. GraphQL 與 REST：理解新時代的 API 設計
  4. 為什麼自定義 404 頁面需要同時支持 API 和 HTML：新手指南
  5. 前後端分離中的路由與錯誤處理：新手指南
  6. 設計後端 API 的 404 錯誤處理：新手指南
  7. 前端與後端的 HTTP 請求與響應協議
  8. Django 中自定義 404 專案架構的最佳實踐
  9. 深入理解 Django 中的自定義 404 views 函數處理解析
  10. Django 的 handler404：自定義 404 錯誤頁面的核心
  11. Django 的 render 函數與 status 參數：為什麼重要？
  12. 使用 Accept 判斷請求格式：如何實現靈活的錯誤處理？
  13. 使用 Esbuild 搭建 Vue 開發環境的指南
  14. 新手入門：TailwindCSS 與 DaisyUI 的整合指南
  15. Django 靜態文件管理：static 與 staticfiles 完整指南
  16. 使用 WhiteNoise 簡化 Django 靜態文件管理：新手入門指南
  17. Vue 與 Django 整合：從編輯到部署的完整指南
  18. Django 與 Vue 的專案目錄與設計流程指南　👈 所在位置
  19. Django + Vue 前後端分離架構：後端路由渲染解析
  20. Vue 3 應用的主入口詳解：如何初始化應用
  21. 探索 Vue 應用的根組件：App.vue 的角色與設計
  22. Vue.js 單頁應用（SPA）邏輯與運作流程詳解
  23. 新手指南：使用 Axios 實現高效的 HTTP 請求
  24. 在 Vue 中處理 404 錯誤組件（component）設計：新手指南
  25. Vue Router 新手指南：設置 404 錯誤頁面

將 Django 和 Vue 結合是一種強大的全端開發模式，可以實現後端與前端的功能分離。

本指南將引導新手了解如何組織目錄結構，以及 Django 和 Vue 的路由、視圖、組件如何協同工作，從而構建一個完整的 Web 應用。

專案目錄結構總覽

以下是 Django 與 Vue 整合專案的典型目錄結構：

18TH-TRICO/
├── core/
│   ├── urls.py          # Django 路由設定
│   ├── views.py         # Django 視圖處理
│   ├── settings.py      # Django 設定
├── frontend/
│   ├── scripts/
│   │   ├── app.js          # Vue 應用入口
│   │   ├── App.vue         # Vue 主組件
│   │   ├── router.js       # Vue 路由
│   │   └── components/
│   │       └── NotFoundPage.vue  # Vue 組件
├── static/
│   ├── scripts/         # 編譯後的前端 JavaScript
│   ├── styles/          # 編譯後的 CSS 文件
├── templates/
│   └── shared/
│       └── vue404_page.html  # 用於嵌入 Vue 的 Django 模板

目錄重點解讀

  • core/：Django 的核心功能目錄，包括路由、視圖邏輯及全域設定。
  • frontend/：存放 Vue 原始文件，包括應用入口、組件、路由配置。
  • static/：保存打包後的前端資源（JavaScript 和 CSS）。
  • templates/：保存 Django 的模板文件，其中 vue404_page.html 用於嵌入 Vue。

設計流程解析

在此專案中，前端由 Vue 處理頁面導航，後端由 Django 提供 API 和渲染入口模板。以下為設計流程圖：

+------------------+                 +---------------------+
|  Django Router   | <---------------+ Client HTTP Request |
|  (core/urls.py)  |                 +---------------------+
+--------+---------+
         |
         | Route 1: API or Django View
         |------------------------> Django views.py handles logic
         |
         | Route 2: Frontend Route
         +------------------+
                            |
                            v
          +-------------------------+
          | Vue Entrypoint (app.js) |
          | Loads vue404_page.html  |
          +-----------+-------------+
                      |
                      v
        +---------------------------+
        | Vue Router (router.js)    |
        | Matches Frontend Pages    |
        +-----------+---------------+
                      |
                      v
            +-----------------------+
            | Vue Components        |
            | (e.g., NotFoundPage)  |
            +-----------------------+

流程分步講解

Django 路由分配

Django 的 urls.py 是 HTTP 請求的入口：

  • 如果請求匹配後端的 API 或視圖路徑，則由 Django 處理並返回相應數據。
  • 如果請求為前端路由（未匹配到後端 API），則將請求轉發給 vue404_page 視圖處理。

範例（core/urls.py）：

from django.urls import path
from . import views

urlpatterns = [
    path('api/example/', views.example_api),  # 後端 API
    path('', views.vue404_page),  # 前端路由
]

Django 視圖渲染

當路由匹配到 vue404_page 時，Django 返回包含 Vue 應用容器的 HTML 模板。

範例（core/views.py）：

from django.shortcuts import render

def vue404_page(request):
    return render(request, 'shared/vue404_page.html')

範例模板（vue404_page.html）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Vue App</title>
    <script src="/static/scripts/frontend_app.js" defer></script>
</head>
<body>
    <div id="app"></div> <!-- Vue 將掛載到這裡 -->
</body>
</html>

Vue 應用啟動

當前端加載 frontend_app.js，Vue 開始啟動應用並接管 DOM。

範例（frontend/scripts/app.js）：

import { createApp } from 'vue';
import App from './App.vue'; // 主組件
import router from './router.js'; // 路由

const app = createApp(App);
app.use(router);
app.mount('#app'); // 掛載到 `#app` 容器

Vue Router 處理導航

Vue Router 負責匹配前端路由並顯示對應的組件。

範例（frontend/scripts/router.js）：

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
import NotFoundPage from './components/NotFoundPage.vue';

const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/:pathMatch(.*)*', component: NotFoundPage }, // 處理未匹配路徑
];

const router = createRouter({
    history: createWebHistory(),
    routes,
});

export default router;

Vue 組件渲染

根據路由匹配結果，Vue 渲染對應的組件。例如，未找到路徑時顯示 NotFoundPage.vue。

範例（NotFoundPage.vue）：

<template>
  <div>
    <h1>404 - Page Not Found</h1>
    <p>The page you are looking for does not exist.</p>
  </div>
</template>

<script>
export default {
  name: 'NotFoundPage',
};
</script>

Django 與 Vue 分工概述

Django 負責任務Vue 負責任務
處理後端 API 請求處理前端頁面導航
渲染模板（提供 Vue 容器）顯示對應路由的 Vue 組件
提供靜態文件服務管理和渲染前端的組件及邏輯

結語

這種 Django 與 Vue 的整合方式讓我們在後端和前端的分工更為清晰。

Django 專注於後端業務邏輯和 API，而 Vue 負責頁面顯示和互動。希望本文能幫助您更好地理解這種設計模式，並順利構建自己的全端應用！🎉

Similar Posts

JavaScript 數字轉字串的方法解析：解決 toString() 呼叫異常的問題

By徐培鈞

在 JavaScript 中，我們經常需要將數字轉換成字串，這時候可以使用 .toString() 方法。

然而，有些初學者在使用這個方法時，會遇到一些意想不到的異常。

這篇文章將詳細解釋為什麼會發生這些問題，以及如何正確地撰寫程式碼來避免錯誤。

初學者指南：深入了解 JavaScript 中的「一等公民」概念

By徐培鈞

在學習 JavaScript 的過程中，你可能會遇到「一等公民」（First-Class Citizens 或 First-Class Functions）這個術語。

它描述了 JavaScript 中的一個重要特性——函式（Function）在這個語言中被視為「一等公民」。

這意味著函式可以像其他數據類型（如數字、字串、物件等）一樣被使用和操作。

本文將為新手介紹「一等公民」的概念，並具體說明 JavaScript 如何處理函式作為「一等公民」。

初學者指南：深入了解 JavaScript 的代碼撰寫準則

By徐培鈞

在學習 JavaScript 的過程中，撰寫清晰、可讀性高且易於維護的代碼是每個開發者的目標。

良好的代碼風格，不僅可以提高團隊合作的效率，還能減少未來維護和擴展的成本。

本文將為新手介紹 JavaScript 代碼撰寫的準則，並分享如何培養良好的編碼習慣，讓你的代碼更易讀、易維護。

初學者指南：深入了解 JavaScript 模板字串（Template Literals）

By徐培鈞

在學習 JavaScript 時，字串操作是非常常見的任務。

傳統的字串連接方式使用加號（+）或 concat() 方法，這可能導致程式碼冗長且難以閱讀。

ES6 引入了模板字串（Template Strings），也稱為模板字面量（Template Literals），為字串操作提供了更簡潔、更強大的方式。

本文將為新手詳細介紹 JavaScript 中的模板字串。

初學者指南：深入了解 JavaScript reduce() 方法

By徐培鈞

在 JavaScript 中，陣列方法提供了許多強大的工具來處理資料，reduce() 是其中最常用也最靈活的方法之一。

reduce() 允許你將陣列中的每個元素累積到一個單一的結果中，不論這個結果是數字、字串、物件，還是其他類型的資料。

這篇文章將為新手介紹 reduce() 方法，並通過簡單範例解釋它的工作原理和應用場景。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *