Django - 整合前端框架(Vue 3)

在現代 Web 開發中，後端和前端分離已成為主流架構。Django 通過其 REST API 支持與 Vue.js、React 等前端框架整合，使得前端處理用戶界面，後端專注於數據處理和 API。

---

課程目標

1. 瞭解前後端分離架構的基本概念。
2. 使用 Django REST Framework 創建後端 API。
3. 使用 Vue 3 + Vite 作為前端框架，並整合至 Django。
4. 實現前後端通信。

---

課程內容

1. 前後端分離的基本概念

1. 傳統模式：模板渲染

   • Django 使用模板語言 (Django Template Language, DTL) 渲染 HTML。
   • 缺點：渲染壓力集中在後端，不適合複雜的交互。

2. 前後端分離模式

   • 後端負責提供 API（JSON 格式數據）。
   • 前端通過框架（如 Vue.js、React）處理用戶界面，並通過 API 與後端通信。

---

2. 後端：創建 REST API

步驟 1：安裝 Django REST Framework

確保已安裝 Django REST Framework：

pip install djangorestframework

在 settings.py 中配置：

INSTALLED_APPS += [
    'rest_framework',
]

步驟 2：創建簡單 API

假設我們有一個 Blog 模型：

from django.db import models

class Blog(models.Model):
    title = models.CharField(max_length=100)
    content = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)

為其創建 API：

from rest_framework import serializers, viewsets
from .models import Blog

# 序列化器
class BlogSerializer(serializers.ModelSerializer):
    class Meta:
        model = Blog
        fields = '__all__'

# 視圖集
from rest_framework.viewsets import ModelViewSet

class BlogViewSet(ModelViewSet):
    queryset = Blog.objects.all()
    serializer_class = BlogSerializer

步驟 3：配置路由

在 urls.py 中配置路由：

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import BlogViewSet

router = DefaultRouter()
router.register('blogs', BlogViewSet)

urlpatterns = [
    path('api/', include(router.urls)),
]

API 現已可用於 http://127.0.0.1:8000/api/blogs/。

---

3. 前端：整合 Vue 3 + Vite

步驟 1：安裝 Vue 3 + Vite

在項目的根目錄下創建前端文件夾：

mkdir frontend && cd frontend
npm init vite@latest .

選擇 Vue 作為框架。

安裝依賴：

npm install

啟動開發伺服器：

npm run dev

步驟 2：配置跨域

在 Django 中安裝 django-cors-headers：

pip install django-cors-headers

在 settings.py 中配置：

INSTALLED_APPS += [
    'corsheaders',
]

MIDDLEWARE.insert(0, 'corsheaders.middleware.CorsMiddleware')

CORS_ALLOWED_ORIGINS = [
    "http://localhost:5173",  # Vite 默認伺服器
]

步驟 3：創建 Vue 頁面

在 frontend/src/main.js 中配置：

import { createApp } from "vue";
import App from "./App.vue";

createApp(App).mount("#app");

創建 App.vue：

<template>
  <div>
    <h1>Blog List</h1>
    <ul>
      <li v-for="blog in blogs" :key="blog.id">
        {{ blog.title }} - {{ blog.created_at }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      blogs: [],
    };
  },
  async created() {
    const response = await axios.get("http://127.0.0.1:8000/api/blogs/");
    this.blogs = response.data;
  },
};
</script>

---

4. 整合前後端至同一伺服器

步驟 1：構建前端應用

在 frontend 文件夾中構建 Vue 應用：

npm run build

構建後，靜態文件將出現在 frontend/dist 文件夾中。

步驟 2：在 Django 中提供靜態文件

將構建後的文件移動到 Django 靜態文件目錄，例如 static/frontend/。

在 urls.py 中添加路由：

from django.views.generic import TemplateView

urlpatterns += [
    path('', TemplateView.as_view(template_name='frontend/index.html')),
]

確保靜態文件已正確加載：

python manage.py collectstatic

---

課堂練習

1. 使用 REST API 提供用戶的註冊和登入功能。
2. 使用 Vue.js 創建可新增和刪除 Blog 的界面。
3. 配置 Nginx 或 Apache 作為反向代理，部署完整應用。

---

作業

1. 在 Django 後端新增一個評論（Comment）功能，並通過 API 提供給前端。
2. 在 Vue 頁面中實現評論的新增與顯示。
3. 探索 Vue Router，並實現多頁面的 Blog 應用（例如，列表頁與詳細頁）。

---