Django + Vue 前後端分離架構：後端路由渲染解析

更新日期： 2025 年 1 月 1 日

在現代 Web 開發中，前後端分離已成為主流架構。這種模式讓後端負責處理業務邏輯與 API，而前端專注於頁面渲染與互動，從而實現高度的模組化與可擴展性。

在這篇文章中，我們將深入探討如何使用 Django 作為後端框架，搭配 Vue 作為前端框架，實現一個高效且結構清晰的前後端分離項目。

本文將專注於 Django 的後端邏輯設計，從路由配置到視圖實現，幫助新手建立起完整的應用基礎。

Django 後端邏輯設計

Django 路由分配：處理多種請求

Django 的路由配置文件（urls.py）是處理 HTTP 請求的第一站。

它負責將客戶端的請求分發到相應的後端邏輯或前端模板。

範例配置：core/urls.py

以下是一個範例路由配置，展示了如何處理後端業務邏輯路徑與未匹配的前端路由：

from django.urls import path, re_path
from .views import vue404_page

urlpatterns = [
    # 後端功能路徑
    path('admin/', admin.site.urls),  # Django 管理員介面
    path('users/', include('users.urls')),  # 使用者相關功能
    path('accounts/', include('accounts.urls')),  # 帳號管理
    path('api/', include('api.urls')),  # 後端 API

    # Vue 前端路由
    re_path(r"^(?!admin|users|accounts|api/).*", vue404_page),
]

邏輯解析

1. 後端業務路徑優先級
   • path() 函數用於定義精確的路徑，例如 /admin/、/users/ 和 /accounts/，這些路徑由 Django 的後端邏輯處理。
   • 每個路徑對應的功能（如用戶管理、帳戶登錄等）都由對應應用的 urls.py 進一步處理，這樣可以模組化每個功能區域。
2. 捕獲未匹配的路徑
   • re_path() 使用正則表達式來匹配路徑。這裡的正則表達式 ^(?!admin|users|accounts|api/) 表示：
     • 匹配所有不以 /admin/、/users/、/accounts/ 或 /api/ 開頭的路徑。
     • 這些路徑將交由 vue404_page 處理，並返回一個 Vue 的模板文件。
   • 這種設計確保了後端業務邏輯的路徑優先處理，其餘路徑由前端接管。

Django 視圖：渲染模板文件

Django 視圖負責處理來自路由的請求，並決定返回的內容。對於前端路由，我們需要設置一個視圖，返回嵌有 Vue 應用的模板文件。

視圖實現：core/views.py

以下是一個簡單的視圖函數，用於返回 Vue 應用的入口模板：

from django.shortcuts import render

def vue404_page(request):
    """
    渲染 Vue 應用的模板文件。
    """
    return render(request, 'shared/vue404_page.html')

詳細說明

1. render 函數：
   • Django 提供的內建函數，用於渲染模板文件。
   • 第一個參數是 request，代表客戶端的請求對象。
   • 第二個參數是模板文件的路徑（相對於 templates/ 文件夾）。
2. 模板文件的作用：
   • 該模板文件作為 Vue 的入口點，包含 Vue 應用的容器（<div id="app"></div>），以及前端的靜態資源（例如 JavaScript 和 CSS）。

模板設計：嵌入 Vue 容器

模板文件是前後端交互的橋樑。

當 Django 視圖返回模板文件時，前端靜態資源會被加載，Vue 應用隨即啟動。

模板文件：templates/shared/vue404_page.html

以下是模板文件的範例內容：

{% extends "shared/layout.html" %}
{% load static %}
{% block content %}
<div id="app"></div> <!-- Vue 應用掛載的容器 -->
{% endblock %}

詳細解析

1. 繼承基礎模板：
   • {% extends "shared/layout.html" %} 指定該模板繼承自基礎模板 layout.html，確保頁面有統一的結構（如標頭和頁尾）。
2. 載入靜態資源：
   • {% load static %} 是 Django 模板標籤，用於引入靜態資源的輔助功能。
3. Vue 容器：
   • <div id="app"></div> 是 Vue 應用的容器，Vue 將把其內容渲染到這個元素中。

總結

通過上述設計，Django 的路由與視圖實現了後端邏輯與前端應用的分工協作：

• 路由分配：Django 處理與後端邏輯相關的路徑，並將未匹配的路徑交給 Vue 應用。
• 視圖渲染：Django 返回包含 Vue 容器的模板文件，啟動前端應用。
• 模板設計：模板文件嵌入 Vue 的容器和靜態資源，是前後端交互的關鍵。

這種架構充分發揮了 Django 和 Vue 的各自優勢，適用於業務邏輯與頁面交互分工明確的場景。

希望本文能幫助您更深入理解前後端分離的實現原理，並順利構建自己的應用！ 🎉