【2026 | 人工智慧雲端系統實務】 02. Django 6 快速搭建網站

這篇教學透過 Django 實作建立一個陽春部落格。透過 Django Framework 指令快速構建網站框架。
透過簡單的專案體驗 Django 的基本功能。
本篇文章已經更新至 Python 3.13 與 Django 6 版。

版本需求
Python 3.13
Django 6.0

1
2
3
4

pyenv install --list # 列出有安裝的 Python 版本
pyenv install 3.13.7 # 安裝指定版本的 Python
pyenv global 3.13 # 設定全域預設的 Python 版本
pyenv local 3.12 # 指定當前專案/目錄的 Python 版本

1. 建立虛擬環境

1

python -m venv .venv

1
2
3

source .venv/bin/activate # Mac/Linux
.venv\Scripts\activate.bat # Windows

1

(venv) C:\Users\wycha>

1

deactivate

1
2

# pip install (套件名稱)(版本條件運算子)(版本號碼)
pip install django==6

2. django-admin 初始化專案

1

cd %HOMEDRIVE%%HOMEPATH%\Desktop

1
2

# django-admin startproject (專案名稱)
django-admin startproject DjangoBlog

1
2

# code (專案資料夾的路徑)
code DjangoBlog

3. 管理程式 manage.py 構建 app

即終端機輸入開頭出現 (.venv)。

接著輸入以下指令建立新的 web app：

1
2

# python manage.py startapp (APP 的名字)
python manage.py startapp article

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

│  manage.py
│
├─.vscode
│      settings.json
│
├─article
│  │  admin.py
│  │  apps.py
│  │  models.py
│  │  tests.py
│  │  views.py
│  │  __init__.py
│  │
│  └─migrations
│          __init__.py
│
└─DjangoBlog
        asgi.py
        settings.py
        urls.py
        wsgi.py
        __init__.py

4. 修改 Django 框架的設定

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# line:28
ALLOWED_HOSTS = ['*']

# line:106
LANGUAGE_CODE = 'zh-hant'

# line:108
TIME_ZONE = 'Asia/Taipei'

# line:40
INSTALLED_APPS = [
    # ... (略) ...
    'article',
]

• Line 28: ALLOWED_HOSTS 設定允許連線的來源
• Line 106: LANGUAGE_CODE 網站的預設語言。
• Line 108: TIME_ZONE 網站的時區
• Line 40: INSTALLED_APPS 啟用的 APP 清單

  注意
  這邊的 INSTALLED_APPS 是一個 python list 的型態，因此每個元素需要加上逗點分隔。

接著，啟動【測試】伺服器：

1

python manage.py runserver

開啟瀏覽器連接上 http://127.0.0.1:8000/ 將會看到 django 初始化面，如下圖：

5. 定義資料模型 Models

構建一個 CMS(Content Management System) 系統，最重要的部分就是將資訊內容儲存於資料庫裡，方便後續維戶與更新。而 Django 框架提供 ORM(Object Relational Manager) 方式將資料庫邏輯構建成物件導向式的程式碼型態，可以節省開發人員維護資料庫結構的時間。

1. 接下來我們到新增的 APP (article/) 裡面 models.py 程式碼進行修改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

from django.db import models

class Post(models.Model):
    title = models.CharField(max_length=200)
    slug = models.CharField(max_length=200)
    content = models.TextField()
    pub_date = models.DateTimeField(auto_now_add=True)

    class Meta:
        ordering = ['-pub_date']

    def __str__(self):
        return self.title

2. 讓資料模型生效需要執行以下指令：

   1 2	python manage.py makemigrations python manage.py migrate

   執行結果

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

   (django_env) C:\Users\wycha\OneDrive\桌面\djangoBLOG>python manage.py makemigrations Migrations for 'blog_post': blog_post\migrations\0001_initial.py - Create model Post (django_env) C:\Users\wycha\OneDrive\桌面\djangoBLOG>python manage.py migrate Operations to perform: Apply all migrations: admin, auth, blog_post, contenttypes, sessions Running migrations: Applying contenttypes.0001_initial... OK Applying auth.0001_initial... OK Applying admin.0001_initial... OK Applying admin.0002_logentry_remove_auto_add... OK Applying admin.0003_logentry_add_action_flag_choices... OK Applying contenttypes.0002_remove_content_type_name... OK Applying auth.0002_alter_permission_name_max_length... OK Applying auth.0003_alter_user_email_max_length... OK Applying auth.0004_alter_user_username_opts... OK Applying auth.0005_alter_user_last_login_null... OK Applying auth.0006_require_contenttypes_0002... OK Applying auth.0007_alter_validators_add_error_messages... OK Applying auth.0008_alter_user_username_max_length... OK Applying auth.0009_alter_user_last_name_max_length... OK Applying auth.0010_alter_group_name_max_length... OK Applying auth.0011_update_proxy_permissions... OK Applying auth.0012_alter_user_first_name_max_length... OK Applying blog_post.0001_initial... OK Applying sessions.0001_initial... OK

6. 啟用管理介面並新增資料

Django 框架有提供後台管理介面給開發者使用，除了有使用者帳號模組以外，也包含資料庫管理模組於其中。啟用 admin 功能時需要建立超級使用者的使用者帳號密碼。

1. 透過指令建立超級使用者

   1	python manage.py createsuperuser

   按照提示訊息進行輸入：

   1 2 3 4 5 6 7

   使用者名稱 (leave blank to use 'wycha'): admin 電子信箱: admin@django_example.com Error: 請輸入有效的電子郵件地址。 電子信箱: admin@djangoexample.com Password: Password (again): Superuser created successfully.

   注意

   1. 使用者名稱為登入後台的帳號。
   2. 電子信箱可以使用假信箱作為替代，不過如果後須會使用到 email 發信功能時，請輸入正常使用中的 email 地址
   3. 終端機的系統互動介面 Password 欄位，基於安全性在輸入的時候不會有任何反應。
   4. 當然這些資料都可以在後台進行修改

2. 將 APP 納入管理後台的程式中

   1 2 3 4 5 6 7

   from django.contrib import admin from article.models import Post # Register your models here. admin.site.register(Post)

   • Line 2: 表示將會使用到 APP.models 中的 Post Class。
   • Line 6: 使用 django.contrib 中的 admin Class，並把託管的 model 以參數形式傳入。

3. 進入後台並嘗試操作資料庫管理介面

   第 1/7 步： 啟動測試伺服器

   1	python manage.py runserver

   第 2/7 步： 連上後台管理程式

   1. 打開瀏覽器
   2. 輸入 http://localhost:8000/admin

   第 3/7 步： 輸入帳號密碼並點選登入

   

   第 4/7 步： 對著 APP Model 的 Posts 按下新增按鈕

   

   第 5/7 步： 在新增 post 介面中按照欄位填入資訊並按下儲存

   

   注意
   Slug 欄位是作為文章的網址的資料，此欄位資料不重複、限定英文小寫與減字號 (-)、底線 (_) 符號，其餘字元盡量不要使用，特別是中文。

   第 6/7 步： 按下新增 POST 按鈕繼續新增下一篇文章

   

   第 7/7 步： 新增文章直到 Posts Table 裡免有 5 筆資料

   

   完成： 接續下一步實作

4. 讓 admin 介面中的顯示其他欄位於總表上 (修改 )

   1 2 3 4 5 6 7 8 9 10 11

   from django.contrib import admin from article.models import Post # Register your models here. class PostAdmin(admin.ModelAdmin): # 新增 list_display = ['title', 'slug', 'pub_date'] # 新增 admin.site.register(Post, PostAdmin) # 修改

   • Line 8: 新增 PostAdmin Class 繼承自 admin.ModelAdmin 並定義屬性 list_display。
   • Line 11: 將 PostAdmin Class 作為第二參數傳入 admin.site.register 方法內

   重新整理 http://127.0.0.1:8000/admin/blog_post/post/ 畫面