如何使用 Django + MySQL + Bootstrap 5 快速開發部落格?

從零開始：使用 Django 快速搭建一個功能完整的部落格

親愛的 Web 開發者們，尤其是資深的 PHP 工程師們！

厭倦了重複的後台開發？想嘗試一個新的 Web 框架，但又希望它能具備強大的 ORM、清晰的 MVC (MTV) 結構和開箱即用的管理介面？那麼，Python 的 Django 框架絕對值得您一試！

在本教學中，我們將基於一個精心設計的 Django 範例專案，一步步教您如何快速搭建一個功能完整的部落格系統，它包含：

• 文章的 CRUD 操作：輕鬆創建、閱讀、更新和刪除部落格文章。
• Django Admin 後台：無需手寫程式碼，即可獲得強大的文章管理介面。
• 文章分頁：高效展示大量文章，提升使用者體驗。
• Bootstrap 5 響應式設計：確保網站在各種設備上都能完美呈現。
• MySQL 資料庫整合：使用 Django ORM 輕鬆操作 MySQL。

如果您已經熟悉 Laravel、CodeIgniter 等 PHP 框架，您會發現 Django 許多概念與之相通，學習曲線將會非常平緩。

---

一、專案概覽與檔案結構

本專案採用 Django 的標準應用程式 (App) 結構。核心檔案組織如下：

blog_project/               # 專案根目錄
├── blog_project/           # 專案配置目錄
│   ├── settings.py         # 主要配置：資料庫、應用程式、靜態檔案等
│   ├── urls.py             # 專案 URL 路由總入口
│   ├── wsgi.py             # WSGI 配置 (生產環境使用)
│   ├── asgi.py             # ASGI 配置 (異步功能使用)
│   └── __init__.py         # 標記為 Python 套件
├── blog/                   # 部落格應用程式目錄 (您的核心功能)
│   ├── migrations/         # 資料庫遷移檔案 (Django 自動生成)
│   ├── templates/
│   │   └── blog/
│   │       ├── base.html   # 基礎 HTML 模板 (共通佈局)
│   │       ├── post_list.html# 文章列表頁模板
│   │       └── post_detail.html# 文章詳情頁模板
│   ├── admin.py            # Django Admin 後台配置 (管理介面)
│   ├── apps.py             # 應用程式配置
│   ├── models.py           # 資料模型定義 (部落格文章的資料結構)
│   ├── urls.py             # 應用程式 URL 路由
│   ├── views.py            # 視圖邏輯 (處理請求，渲染模板)
│   ├── tests.py            # 測試檔案
│   └── __init__.py         # 標記為 Python 套件
├── static/                 # 全局靜態檔案目錄 (您放置自訂 CSS/JS/圖片)
├── manage.py               # Django 專案管理工具 (運行命令)
├── README.md               # 本專案說明文件
└── database_setup.sql      # MySQL 資料庫初始化參考 (可選，通常由 Django 自動處理)

簡要功能說明：

• models.py：定義了 Post 模型，包含文章標題、內容、創建/更新時間和分類等欄位，類似 PHP 框架中的模型類。
• views.py：處理使用者請求，從資料庫讀取資料，並將資料傳遞給模板進行渲染，類似 PHP 框架中的控制器方法。
• urls.py：定義了 URL 路徑與視圖函式的映射關係，類似 PHP 框架中的路由定義。
• templates/：存放 HTML 模板文件，使用 Django 模板語言渲染動態內容，類似 Blade 或 Twig 模板引擎。
• admin.py：這是 Django 的亮點！只需簡單幾行程式碼，即可為您的模型生成一個功能強大的後台管理介面。
• settings.py：專案的全局配置，包括資料庫連接、已安裝應用程式、靜態檔案路徑等。

---

二、環境準備與專案設置

在開始之前，請確保您的開發環境具備以下條件：

1. Python 3.9 或更高版本：您可以從 Python 官方網站 下載並安裝。
2. pip (Python 套件管理器)：通常隨 Python 一同安裝。
3. MySQL Community Server：確保 MySQL 服務正在運行，並且您知道 root 使用者的密碼。
4. Git (版本控制工具)：如果您從 Git 倉庫克隆專案。

步驟 1：克隆專案 (如果從 Git 倉庫獲取)

如果您已經有了專案檔案，請跳過此步。否則，假設您的專案位於一個 Git 倉庫：

Bash

git clone <repository_url>
cd blog_project # 進入專案根目錄

步驟 2：創建並激活 Python 虛擬環境

強烈建議使用虛擬環境來隔離專案依賴，避免與系統或其他專案的套件衝突。

Bash

# 在專案根目錄下 (blog_project/) 執行
python -m venv venv

# 激活虛擬環境 (Windows)
.\venv\Scripts\activate

# 激活虛擬環境 (macOS/Linux)
source venv/bin/activate

激活後，您的終端提示符前面會出現 (venv)。

步驟 3：安裝專案依賴

在已激活的虛擬環境中，安裝 Django 和 MySQL 資料庫連接所需的驅動：

Bash

pip install django mysqlclient
# 如果您計劃部署到生產環境，也建議安裝 WSGI 伺服器
pip install gunicorn  # 常見於生產環境，特別是 Linux
# pip install waitress # 輕量級，適合 Windows 本地部署測試

步驟 4：配置 MySQL 資料庫

1. 創建資料庫：

   使用您的 MySQL 客戶端（例如 MySQL Workbench、phpMyAdmin 或命令行）連接到 MySQL 伺服器，然後執行以下 SQL 命令來創建資料庫：

   SQL

   CREATE DATABASE blog_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
   

   這個步驟與您手動執行 database_setup.sql 的效果相同，但 Django 的 migrate 命令會自動創建表。

2. 修改 settings.py：

   打開 blog_project/settings.py 檔案，找到 DATABASES 配置區塊，將 PASSWORD 替換為您的 MySQL root 使用者的實際密碼。

   Python

   # blog_project/settings.py
   
   DATABASES = {
       'default': {
           'ENGINE': 'django.db.backends.mysql',
           'NAME': 'blog_db',
           'USER': 'root',
           'PASSWORD': 'your_mysql_password',  # <-- 請務必替換為您的 MySQL root 密碼！
           'HOST': 'localhost',
           'PORT': '3306',
       }
   }
   

3. 確認 INSTALLED_APPS：

   在 blog_project/settings.py 中，確保 INSTALLED_APPS 列表包含了您的 blog 應用程式的配置。

   Python

   # blog_project/settings.py
   
   INSTALLED_APPS = [
       'django.contrib.admin',
       'django.contrib.auth',
       'django.contrib.contenttypes',
       'django.contrib.sessions',
       'django.contrib.messages',
       'django.contrib.staticfiles',
       'blog.apps.BlogConfig',  # <-- 確保這行存在，它會載入您的 blog 應用程式
   ]
   

步驟 5：執行資料庫遷移 (Migrations)

Django 使用遷移來管理資料庫結構。這一步會根據您的 models.py 定義，在 MySQL 資料庫中創建必要的表格。

在專案根目錄下 (blog_project/)，確保虛擬環境已激活，運行：

Bash

python manage.py makemigrations # 生成資料庫遷移檔案 (如果模型有變更)
python manage.py migrate        # 將所有遷移應用到資料庫

步驟 6：創建超級用戶 (Superuser)

您需要一個管理員帳號來登入 Django Admin 後台，以便管理部落格文章。

Bash

python manage.py createsuperuser

按照提示輸入用戶名、電子郵件（可選）和密碼。

步驟 7：收集靜態檔案 (Collect Static Files)

如果您有在專案根目錄下的 static/ 資料夾或應用程式下的 static/ 資料夾放置自訂的 CSS/JS/圖片等靜態檔案，在部署到生產環境前需要執行此命令。開發環境下通常不需要，但執行了也無妨。

Bash

python manage.py collectstatic

---

三、程式碼清理 (重要步驟！)

在運行專案之前，我們需要處理一些程式碼中的冗餘部分，以保持專案的整潔和高效。

清理模板中的冗餘 JavaScript

您提供的 base.html、post_list.html 和 post_detail.html 檔案開頭都包含了一大段與 Excel 檔案處理相關的 JavaScript 代碼（gk_isXlsx, loadFileData 等）。這段代碼與部落格的核心功能無關，且是多餘的。

請手動打開這三個檔案 (blog_project/blog/templates/blog/base.html, blog_project/blog/templates/blog/post_list.html, blog_project/blog/templates/blog/post_detail.html)，並完整移除開頭的 <script type="text/javascript">...</script> 區塊。

例如，在 base.html 中，找到類似這樣的區塊並刪除：

HTML

<script type="text/javascript">
        var gk_isXlsx = false;
        var gk_xlsxFileLookup = {};
        // ... (中間省略大量代碼) ...
        return gk_fileData[filename] || "";
        }
</script>

刪除後，您的 base.html 應該直接以 <!DOCTYPE html> 開頭，post_list.html 和 post_detail.html 應該直接以 {% extends 'blog/base.html' %} 開頭。

統一 Django Admin 配置

您在 blog/ 目錄下同時有 admin.py 和 admin_custom.py。為了避免混淆和重複，推薦您將 admin_custom.py 中更詳細的配置內容合併到 admin.py 中，然後刪除 admin_custom.py。

1. 打開 blog_project/blog/admin_custom.py，複製其中 PostAdmin 類的完整定義（包括 @admin.register(Post) 裝飾器）。

2. 打開 blog_project/blog/admin.py，將其內容替換為從 admin_custom.py 複製過來的內容。替換後 admin.py 應該如下所示：

   Python

   # blog_project/blog/admin.py
   from django.contrib import admin
   from .models import Post
   
   @admin.register(Post)
   class PostAdmin(admin.ModelAdmin):
       list_display = ['title', 'category', 'created_at']  # 列表顯示的欄位
       list_filter = ['category', 'created_at']           # 過濾器
       search_fields = ['title', 'content']              # 搜尋欄位
       date_hierarchy = 'created_at'                     # 日期導航
   

3. 刪除 blog_project/blog/admin_custom.py 檔案。

---

四、運行您的部落格！

萬事俱備，現在可以啟動您的 Django 開發服務器了。

在專案根目錄下 (blog_project/)，確保虛擬環境已激活，然後運行：

Bash

python manage.py runserver

您將看到類似以下的輸出：

Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
June 14, 2025 - 08:30:00
Django version 5.0.6, using settings 'blog_project.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

（如果出現「unapplied migration(s)」提示，可能是您跳過了之前的 migrate 步驟，請再次運行 python manage.py migrate。）

驗證功能：

1. 訪問部落格首頁：

   在瀏覽器中打開 http://127.0.0.1:8000/ (或 http://localhost:8000/)。您應該能看到一個乾淨的部落格列表頁面。由於剛建立，目前應該會顯示「暫無文章」。

2. 訪問 Django Admin 後台：

   在瀏覽器中打開 http://127.0.0.1:8000/admin/。

   使用您在步驟 6 創建的超級用戶帳號和密碼登入。

   登入後，您會看到「認證和授權」以及您的「BLOG」應用程式下的「Posts」。

3. 添加文章：

   點擊「Posts」旁邊的「Add」按鈕。

   填寫文章標題、內容和分類（預設為 Uncategorized）。點擊「Save」或「Save and add another」來創建文章。

4. 查看文章和分頁：

   回到部落格首頁 http://127.0.0.1:8000/，您應該就能看到您剛才添加的文章列表了。

   點擊文章標題可以查看詳細內容。如果您添加的文章數量超過 10 篇，底部就會出現分頁導航。

---

五、結語

恭喜您！您已經成功地使用 Django 框架搭建並運行了一個功能完整的部落格系統。

透過這個教學，您應該已經對 Django 的 MVC (或稱 MTV: Model-Template-View) 架構有了初步的了解，並且體驗到它在後台管理方面的強大之處。Django 社群活躍，文件完善，是您深入學習 Web 開發的絕佳選擇。

如果您是資深 PHP 工程師，您會發現 Django 許多設計理念與現代 PHP 框架相通，上手並應用到實際專案中將會非常迅速。

現在，您可以開始撰寫您的第一篇部落格文章了！

專案 GitHub 連結： https://github.com/BpsEason/django-blog.git

感謝你的閱讀！希望這篇文章能幫助你打開高併發爬蟲世界的大門。