Streamlit 金融網站管理後台

01前台與後台的差異

前七章完成了金融網站前台、計算工具、JSON 資料庫、Python 分析、互動圖表、GitHub 版本控制、Cloudflare Pages 部署，以及 SEO 與流量分析。網站現在可以公開使用，但新增一篇文章仍可能需要手動開啟 JSON、修改欄位、確認逗號括號、執行完整的 Git 流程——這對非程式背景的內容編輯者而言，很容易產生格式錯誤。本章使用 Streamlit 建立 Python 管理後台，讓管理者只需填寫表單即可完成內容維護。

02CRUD 的基本概念

CRUD 是內容管理系統最核心的四種操作。無論是文章、書籍、題庫還是工具設定，都可以用這四個操作涵蓋。

03為何選擇 Streamlit

import streamlit as st

st.title('金融網站管理後台')          # 頁面標題
title = st.text_input('文章標題')     # 文字輸入欄
if st.button('儲存'):                  # 按鈕
    st.success(f'已儲存：{title}')

三行 Python 就能產生標題、輸入欄位與按鈕，不需要先建立完整的 HTML/CSS/JS 前端框架。

04安裝與啟動 Streamlit

# 確認已啟動虛擬環境（提示字元前有 (.venv)）
cd C:\financial-platform
.venv\Scripts\Activate.ps1

# 安裝 Streamlit
python -m pip install streamlit requests

# 建立後台資料夾與主程式
mkdir admin
# 在 admin/ 資料夾建立 app.py

# 啟動後台（在專案根目錄執行）
python -m streamlit run admin\app.py
# 執行後瀏覽器自動開啟：http://localhost:8501
# 停止後台：回到 PowerShell 按 Ctrl + C

financial-platform/
├─ index.html
├─ css/ / js/ / data/ / images/
├─ admin/
│  └─ app.py                    ← 後台主程式（新增）
├─ .streamlit/
│  └─ secrets.toml              ← 機密設定（新增，加入 .gitignore）
├─ data/
│  ├─ articles.json             ← 文章母資料
│  ├─ book-details.json         ← 書籍完整母資料
│  ├─ books.json                ← 書籍前台索引（由程式產生）
│  └─ backups/                  ← 自動備份資料夾
└─ .gitignore                   ← 包含 .streamlit/secrets.toml

05第一個後台主程式（基本架構）

import streamlit as st

st.set_page_config(
    page_title='金融網站管理後台',
    page_icon='📊',
    layout='wide'   # 使用全寬版面（適合資料管理）
)

st.title('金融網站管理後台')
st.caption('管理金融文章、書籍、題庫、圖片與發布。')

# ── 左側功能選單 ─────────────────────────────────
menu = st.sidebar.radio(
    '管理功能',
    ['後台首頁', '文章列表', '新增文章', '修改文章',
     '刪除文章', '書籍管理', '題庫管理', '資料備份', '發布網站']
)

# ── 依選單渲染對應頁面 ───────────────────────────
if menu == '後台首頁': render_dashboard(articles)
elif menu == '文章列表': render_article_table(articles)
elif menu == '新增文章': render_create_article(articles)
elif menu == '修改文章': render_edit_article(articles)
elif menu == '刪除文章': render_delete_article(articles)
elif menu == '資料備份': render_backup_page()
elif menu == '發布網站': render_publish_page()

06Streamlit 的重新執行特性與 Session State

# ✗ 普通變數無法跨次執行保存
selected_id = None   # 每次重新執行都歸為 None

# ✓ 使用 Session State 保存狀態
if 'selected_article_id' not in st.session_state:
    st.session_state.selected_article_id = None

# 之後可用 st.session_state.selected_article_id 存取

07讀取與寫入 JSON

from pathlib import Path
import json

BASE_DIR = Path(__file__).resolve().parent.parent
DATA_DIR = BASE_DIR / 'data'
ARTICLE_FILE = DATA_DIR / 'articles.json'

# ── 讀取函數 ─────────────────────────────────────
def load_json(file_path: Path, default_value):
    if not file_path.exists():
        return default_value
    try:
        with open(file_path, 'r', encoding='utf-8') as f:
            return json.load(f)
    except json.JSONDecodeError as error:
        raise ValueError(f'JSON 格式錯誤：{error}') from error

# ── 寫入函數 ─────────────────────────────────────
def save_json(file_path: Path, data) -> None:
    file_path.parent.mkdir(parents=True, exist_ok=True)
    with open(file_path, 'w', encoding='utf-8') as f:
        json.dump(
            data, f,
            ensure_ascii=False,   # 保留中文字元（不轉 \uXXXX）
            indent=2              # 縮排格式，容易閱讀
        )

08建立自動備份

from datetime import datetime
import shutil

def backup_file(file_path: Path, keep_versions: int = 10) -> Path | None:
    if not file_path.exists():
        return None
    BACKUP_DIR.mkdir(parents=True, exist_ok=True)

    # 備份檔名：articles_20260623_101530.json
    timestamp = datetime.now().strftime('%Y%m%d_%H%M%S')
    backup_name = f'{file_path.stem}_{timestamp}{file_path.suffix}'
    backup_path = BACKUP_DIR / backup_name

    shutil.copy2(file_path, backup_path)   # 保留原始時間戳

    # 只保留最新的 keep_versions 個備份，自動刪除舊的
    old_backups = sorted(
        BACKUP_DIR.glob(f'{file_path.stem}_*{file_path.suffix}'),
        key=lambda p: p.stat().st_mtime, reverse=True
    )
    for old in old_backups[keep_versions:]:
        old.unlink()

    return backup_path

09Streamlit 常用元件速查表

10建立文章資料母檔

[
  {
    "id": "ARTICLE001",              ← 唯一識別碼，格式固定
    "title": "複利效果為何在後期加速",
    "slug": "compound-growth",       ← 英文小寫 + 連字號
    "summary": "從本金、利率與時間說明複利成長的核心原理。",
    "category": "理財規劃",
    "content_type": "article",
    "publish_date": "2026-06-23",    ← YYYY-MM-DD 格式
    "cover_image": "images/compound-growth.jpg",  ← 相對路徑
    "tags": ["複利", "時間價值", "理財"],           ← 陣列（非字串）
    "featured": true,                ← 布林值（非字串 "true"）
    "active": true,                  ← 布林值（false = 下架）
    "sort_order": 1,
    "content": "複利是利息持續加入本金後，再產生下一期報酬的過程。"
  }
]

11建立唯一識別碼

def generate_next_id(records: list[dict], prefix: str) -> str:
    """從現有記錄中找出最大數字，回傳下一個 id。"""
    numbers = []
    for record in records:
        record_id = str(record.get('id', ''))
        if not record_id.startswith(prefix):
            continue
        # 取出前綴後的數字部分（例如 'ARTICLE001' → '001'）
        num_text = record_id[len(prefix):]
        if num_text.isdigit():
            numbers.append(int(num_text))
    next_num = max(numbers, default=0) + 1
    return f'{prefix}{next_num:03d}'   # 補零至三位（001, 002...）

# 使用範例：現有 ARTICLE001、ARTICLE002 → 產生 ARTICLE003
new_id = generate_next_id(articles, 'ARTICLE')

12資料驗證

import re

ALLOWED_CONTENT_TYPES = {'article','infographic','exam','quiz','external','resource'}

def validate_slug(slug: str) -> bool:
    # 只允許英文小寫、數字、連字號，且不能以連字號開頭或結尾
    return bool(re.fullmatch(r'^[a-z0-9]+(?:-[a-z0-9]+)*$', slug))

def validate_article(article: dict, all_articles: list[dict], editing_id: str | None = None) -> list[str]:
    errors = []
    title = str(article.get('title', '')).strip()
    slug = str(article.get('slug', '')).strip()

    if not title: errors.append('文章標題不得空白。')
    if not slug: errors.append('網址代稱不得空白。')
    elif not validate_slug(slug): errors.append('網址代稱只能使用英文小寫、數字與連字號。')

    # 檢查 slug 是否與其他文章重複
    for existing in all_articles:
        if existing.get('id') == editing_id:
            continue   # 修改模式：跳過自身
        if existing.get('slug') == slug:
            errors.append('網址代稱已被其他文章使用。')

    # 檢查圖片路徑不使用 Windows 絕對路徑
    if ':\\' in str(article.get('cover_image', '')):
        errors.append('圖片路徑不可使用 Windows 本機絕對路徑。')

    return errors

13建立文章新增表單

from datetime import date

def render_create_article(articles: list[dict]) -> None:
    st.subheader('新增文章')

    # st.form 讓所有欄位集中後，按下提交才執行
    with st.form('create_article_form', clear_on_submit=False):
        title = st.text_input('文章標題 *')
        slug = st.text_input('網址代稱 *', help='例如：bond-price-yield')
        summary = st.text_area('文章摘要', height=100)
        category = st.selectbox('文章分類', ['理財規劃','固定收益','股票投資'])
        active = st.checkbox('立即上架', value=True)
        featured = st.checkbox('設為精選', value=False)
        sort_order = st.number_input('顯示順序', min_value=1, step=1, value=len(articles)+1)
        content = st.text_area('文章內容', height=200)

        submitted = st.form_submit_button('新增文章', type='primary')
        if not submitted:
            return

        new_article = {
            'id': generate_next_id(articles, 'ARTICLE'),
            'title': title.strip(), 'slug': slug.strip(),
            'summary': summary.strip(), 'category': category,
            'featured': bool(featured), 'active': bool(active),
            'sort_order': int(sort_order), 'content': content.strip(),
        }

        # ── 驗證 → 備份 → 儲存 ────────────────────────
        errors = validate_article(new_article, articles)
        if errors:
            for error in errors: st.error(error)
            return

        backup_file(ARTICLE_FILE)          # 先備份
        articles.append(new_article)       # 加入新文章
        save_json(ARTICLE_FILE, articles)  # 寫入 JSON
        st.success(f'文章已新增：{new_article["title"]}（{new_article["id"]}）')

14文章列表與搜尋

def filter_articles(articles, keyword='', category='全部') -> list[dict]:
    results = []
    kw = keyword.strip().lower()
    for article in articles:
        if category != '全部' and article.get('category') != category:
            continue
        # 合併所有可搜尋文字（含標籤）
        searchable = ' '.join([
            str(article.get('title', '')), str(article.get('summary', '')),
            ' '.join(article.get('tags', [])),
        ]).lower()
        if kw and kw not in searchable:
            continue
        results.append(article)
    return results

15修改文章

def render_edit_article(articles: list[dict]) -> None:
    st.subheader('修改文章')
    if not articles:
        st.info('目前沒有可修改的文章。'); return

    # 下拉選單同時顯示 id 與標題，方便辨識
    option_map = {f"{a['id']}｜{a['title']}": a['id'] for a in articles}
    selected_label = st.selectbox('選擇文章', list(option_map.keys()))
    selected_id = option_map[selected_label]
    selected = next(a for a in articles if a['id'] == selected_id)

    # 表單的 key 含 selected_id，避免切換文章時出現 DuplicateWidgetID
    with st.form(f'edit_article_{selected_id}'):
        title = st.text_input('文章標題', value=selected.get('title', ''))
        slug = st.text_input('網址代稱', value=selected.get('slug', ''))
        active = st.checkbox('上架', value=bool(selected.get('active', True)))
        submitted = st.form_submit_button('儲存修改', type='primary')
        if not submitted: return

        updated = {**selected,   # 保留其他欄位不變
                   'title': title.strip(), 'slug': slug.strip(), 'active': bool(active)}

        errors = validate_article(updated, articles, editing_id=selected_id)
        if errors:
            for e in errors: st.error(e)
            return

        backup_file(ARTICLE_FILE)
        for i, a in enumerate(articles):
            if a['id'] == selected_id: articles[i] = updated; break
        save_json(ARTICLE_FILE, articles)
        st.success('文章修改完成。')

16安全刪除機制

def render_delete_article(articles: list[dict]) -> None:
    st.subheader('刪除文章')
    st.warning('建議先將文章下架。永久刪除後，只能從備份或 Git 版本回復。')

    option_map = {f"{a['id']}｜{a['title']}": a['id'] for a in articles}
    selected_label = st.selectbox('選擇要刪除的文章', list(option_map.keys()))
    selected_id = option_map[selected_label]
    selected = next(a for a in articles if a['id'] == selected_id)

    # ── 雙重確認機制 ─────────────────────────────
    confirm_check = st.checkbox('我了解這是永久刪除，無法還原')
    confirm_text = st.text_input(f'請輸入 {selected_id} 確認刪除')

    if st.button('永久刪除文章', type='primary'):
        if not confirm_check:
            st.error('請先勾選確認。'); return
        if confirm_text.strip() != selected_id:
            st.error('輸入的 id 不一致，取消刪除。'); return

        backup_file(ARTICLE_FILE)   # 先備份！
        remaining = [a for a in articles if a['id'] != selected_id]
        save_json(ARTICLE_FILE, remaining)
        st.success('文章已永久刪除。')
        st.rerun()   # 刷新頁面更新列表

17上下架功能與排序管理

# ── 快速上下架 ───────────────────────────────────
def toggle_article_status(articles, article_id):
    backup_file(ARTICLE_FILE)
    for article in articles:
        if article['id'] == article_id:
            article['active'] = not bool(article.get('active', False))
            save_json(ARTICLE_FILE, articles)
            return article['active']
    raise ValueError('找不到指定文章。')

# ── 排序輔助 ─────────────────────────────────────
def sort_records(records):
    return sorted(records, key=lambda r: (
        int(r.get('sort_order', 999999)), str(r.get('title', ''))
    ))

def move_record(records, record_id, direction):
    """將指定 id 的記錄上移（'up'）或下移（'down'）。"""
    sorted_records = sort_records(records)
    idx = next((i for i, r in enumerate(sorted_records) if r.get('id') == record_id), None)
    if idx is None: return records

    swap_idx = idx - 1 if direction == 'up' else idx + 1
    if not (0 <= swap_idx < len(sorted_records)): return records

    # 交換 sort_order，而非直接移動陣列位置
    a_order = sorted_records[idx].get('sort_order', idx + 1)
    b_order = sorted_records[swap_idx].get('sort_order', swap_idx + 1)
    for r in records:
        if r.get('id') == sorted_records[idx]['id']: r['sort_order'] = b_order
        elif r.get('id') == sorted_records[swap_idx]['id']: r['sort_order'] = a_order
    return records

18圖片上傳與安全路徑

def create_safe_filename(original_name: str, slug: str) -> str:
    suffix = Path(original_name).suffix.lower()   # .jpg / .png
    allowed = {'.jpg', '.jpeg', '.png', '.webp'}
    if suffix not in allowed:
        raise ValueError('只允許 jpg、jpeg、png 或 webp 圖片。')
    safe_slug = re.sub(r'[^a-z0-9-]', '', slug.lower())
    if not safe_slug:
        raise ValueError('無法產生安全圖片檔名。')
    return f'{safe_slug}{suffix}'

def save_uploaded_image(uploaded_file, slug: str) -> str:
    if uploaded_file is None: return ''
    IMAGE_DIR.mkdir(parents=True, exist_ok=True)
    safe_filename = create_safe_filename(uploaded_file.name, slug)
    target_path = IMAGE_DIR / safe_filename
    file_bytes = uploaded_file.getbuffer()
    max_size = 5 * 1024 * 1024   # 5 MB
    if len(file_bytes) > max_size:
        raise ValueError('圖片檔案不可超過 5 MB。')
    with open(target_path, 'wb') as f:
        f.write(file_bytes)
    return f'images/{safe_filename}'   # 回傳相對路徑存入 JSON

19書籍母資料與前台索引自動產生

def generate_book_index(book_details: list[dict]) -> list[dict]:
    """篩選上架書籍，抽取前台需要的欄位，依 sort_order 排序。"""
    active = [b for b in book_details if b.get('active') is True]
    sorted_books = sorted(active, key=lambda b: (int(b.get('sort_order', 999999)), str(b.get('title', ''))))
    return [{
        'id': b.get('id'), 'title': b.get('title'), 'author': b.get('author'),
        'cover_image': b.get('cover_image'), 'featured': bool(b.get('featured', False)),
        'sort_order': int(b.get('sort_order', 999999)),
    } for b in sorted_books]

def rebuild_book_index() -> None:
    book_details = load_json(BOOK_DETAILS_FILE, [])
    index_records = generate_book_index(book_details)
    backup_file(BOOK_INDEX_FILE)
    save_json(BOOK_INDEX_FILE, index_records)
    # 每次修改書籍後自動呼叫此函數

20題庫資料設計與管理

[
  {
    "id": "QUESTION001",
    "module": "NM1",           ← 科目模組
    "chapter": 1,               ← 章節（正整數）
    "question": "貨幣時間價值的核心概念為何？",
    "options": {
      "A": "不同時間點的相同金額價值可能不同",
      "B": "所有利率皆固定不變",
      "C": "未來金額一定低於現值",
      "D": "報酬與時間無關"
    },
    "answer": "A",              ← 只能是 A/B/C/D
    "explanation": "現在資金可以投資，因此不同時間點的相同金額具有不同價值。",
    "difficulty": "基礎",       ← 來自允許清單
    "active": true,
    "sort_order": 1
  }
]

21設定 secrets.toml 與 GitHub 發布

# 此檔案必須加入 .gitignore！絕對不能上傳 GitHub
[github]
token = "YOUR_GITHUB_TOKEN"   ← Fine-grained Token（最小權限）
owner = "YOUR_GITHUB_ACCOUNT"
repo = "financial-platform"
branch = "main"

# 若有後台登入密碼
[admin]
password = "YOUR_ADMIN_PASSWORD"

import base64, requests

def get_github_headers() -> dict:
    token = st.secrets['github']['token']
    return {
        'Accept': 'application/vnd.github+json',
        'Authorization': f'Bearer {token}',   # ← 不可用 st.write 顯示！
        'X-GitHub-Api-Version': '2022-11-28'
    }

def get_github_file_sha(owner, repo, branch, repo_path) -> str | None:
    """取得 GitHub 現有檔案的 sha（更新時必須提供）。"""
    url = f'https://api.github.com/repos/{owner}/{repo}/contents/{repo_path}'
    resp = requests.get(url, headers=get_github_headers(), params={'ref': branch}, timeout=30)
    if resp.status_code == 404: return None   # 新檔案
    resp.raise_for_status()
    return resp.json()['sha']

def publish_file_to_github(local_file: Path, repo_path: str, commit_message: str):
    """將本機 JSON 發布至 GitHub（新建或更新）。"""
    if not local_file.exists():
        raise FileNotFoundError(f'找不到本機檔案：{local_file}')

    owner = st.secrets['github']['owner']
    repo = st.secrets['github']['repo']
    branch = st.secrets['github'].get('branch', 'main')

    sha = get_github_file_sha(owner, repo, branch, repo_path)
    content_b64 = base64.b64encode(local_file.read_bytes()).decode('utf-8')

    payload = {'message': commit_message, 'content': content_b64, 'branch': branch}
    if sha: payload['sha'] = sha   # 更新既有檔案時必須提供 sha

    url = f'https://api.github.com/repos/{owner}/{repo}/contents/{repo_path}'
    resp = requests.put(url, headers=get_github_headers(), json=payload, timeout=30)
    resp.raise_for_status()
    return resp.json()

22建立發布介面

def render_publish_page() -> None:
    st.subheader('發布網站內容')
    st.warning('發布後將修改 GitHub 正式 Repository，並可能觸發 Cloudflare 重新部署。')

    publish_options = {
        '文章資料': (ARTICLE_FILE, 'data/articles.json'),
        '書籍前台索引': (BOOK_INDEX_FILE, 'data/books.json'),
    }
    selected_names = st.multiselect('選擇要發布的檔案', list(publish_options.keys()))
    commit_message = st.text_input('Commit 訊息', value='更新網站內容')
    confirm = st.checkbox('我已確認資料已檢查與備份，同意發布至 GitHub')

    if not st.button('開始發布', type='primary'): return
    if not selected_names: st.error('請選擇至少一個要發布的檔案。'); return
    if not confirm: st.error('請先確認資料已檢查與備份。'); return

    progress = st.progress(0)
    results = []
    total = len(selected_names)
    for i, name in enumerate(selected_names, start=1):
        local_file, repo_path = publish_options[name]
        try:
            publish_file_to_github(local_file, repo_path, commit_message)
            results.append((name, True, '發布成功'))
        except Exception as e:
            results.append((name, False, str(e)))
        progress.progress(i / total)

    for name, success, msg in results:
        (st.success if success else st.error)(f'{name}：{msg}')

23後台首頁儀表板

def render_dashboard(articles: list[dict]) -> None:
    st.subheader('後台首頁')
    total = len(articles)
    active = sum(1 for a in articles if a.get('active') is True)
    inactive = total - active
    featured = sum(1 for a in articles if a.get('featured') is True)

    # 四個指標卡片並排
    col1, col2, col3, col4 = st.columns(4)
    col1.metric('文章總數', total)
    col2.metric('已上架', active)
    col3.metric('已下架', inactive)
    col4.metric('精選文章', featured)

    st.subheader('最近 5 篇文章')
    recent = sorted(articles, key=lambda a: a.get('publish_date',''), reverse=True)[:5]
    render_article_table(recent)

24後台登入與安全控制

def check_password() -> bool:
    if st.session_state.get('authenticated'):
        return True
    st.title('金融網站管理後台')
    password = st.text_input('管理密碼', type='password')
    if st.button('登入'):
        if password == st.secrets['admin']['password']:
            st.session_state.authenticated = True
            st.rerun()
        else:
            st.error('密碼錯誤。')
    return False

# 在 main() 最開始呼叫
def main():
    if not check_password():
        st.stop()   # 密碼錯誤時停止執行
    # ... 其他功能 ...

25多人操作與資料衝突

26實務案例

27常見錯誤與除錯

28後台安全檢查表

29關鍵字

30實作練習

Streamlit 是伺服器端執行的 Python 框架，無法在瀏覽器裡直接執行，所以本章的挑戰任務（04 分頁）跟第四、六章一樣改成「程式碼診斷」——針對 Session State、資料驗證與 GitHub 發布安全設計選擇題；示範分頁則用 HTML/CSS/JS 重現同一套 CRUD 操作邏輯，讓你先體會後台操作的感覺，實際的 Streamlit 後台請在自己電腦安裝執行。