Web 平台開發日記 - 用户管理界面實戰

核心內容: 用户管理 UI、角色權限界面、密碼安全、開發工具優化

📋 目錄

1. 目標
2. 用户管理界面
3. 角色管理界面
4. 密碼安全強化
5. 開發工具整合
6. Bug 修復實戰
7. 項目實踐總結

🎯 目標

• [x] 用户管理界面（增刪改查）
• [x] 角色管理與分配功能
• [x] 密碼複雜度統一驗證
• [x] Shell 腳本整合優化
• [x] 前後端數據契約對齊
• [x] 用户體驗優化

項目GitHub地址：https://github.com/Mythetic/web_platform

👥 用户管理界面

界面設計

用户管理頁面是管理系統的核心,提供了完整的用户生命週期管理功能。

核心功能模塊:

用户管理界面
├── 搜索欄（關鍵字搜索用户）
├── 操作按鈕（新增用户）
├── 用户列表表格
│   ├── 用户名
│   ├── 郵箱
│   ├── 手機號
│   ├── 角色標籤
│   ├── 狀態標識
│   └── 操作按鈕
│       ├── 編輯
│       ├── 分配角色
│       ├── 修改密碼
│       └── 刪除
└── 分頁組件

表單驗證規則

在用户創建和編輯時,我們設置了嚴格的表單驗證:

用户名驗證:

• 必填項
• 長度限制: 3-50 個字符
• 只能包含字母、數字、下劃線

郵箱驗證:

• 必填項
• 標準郵箱格式驗證

密碼驗證 (重點):

• 必填項（創建時）
• 最小長度: 8 個字符
• 必須包含大寫字母 (A-Z)
• 必須包含小寫字母 (a-z)
• 必須包含數字 (0-9)

手機號驗證:

• 可選項
• 中國大陸手機號格式: 1[3-9]\d{9}

角色分配功能

角色分配允許管理員為用户設置多個角色,支持:

• 加載所有可用角色列表
• 多選角色（Checkbox Group）
• 顯示角色的友好名稱（displayName）
• 實時更新用户角色關聯

關鍵實現:

// 顯示角色的友好名稱,而不是系統標識符
<el-checkbox v-for="role in roles" :key="role.id" :label="role.id">
  {{ role.displayName }}
</el-checkbox>

密碼修改功能

管理員可以為用户重置密碼,包含:

• 新密碼輸入（帶複雜度驗證）
• 確認密碼輸入（二次確認）
• 密碼一致性驗證
• 密碼要求提示

🎭 角色管理界面

角色的雙重標識

在實際開發中,我們發現角色需要兩個標識:

為什麼需要兩個字段？

1. 系統標識符 (name) - 用於程序內部識別,格式統一,不能隨意修改
2. 顯示名稱 (displayName) - 用於用户界面,可以是中文,容易理解

角色列表界面

角色管理頁面展示:

角色管理界面
├── 新增角色按鈕
├── 角色列表表格
│   ├── 角色標識 (name)
│   ├── 顯示名稱 (displayName)
│   ├── 描述信息
│   ├── 創建時間
│   └── 操作按鈕
│       ├── 編輯
│       ├── 查看用户
│       └── 刪除
└── 分頁組件

角色創建表單

創建角色時需要同時提供兩個標識:

表單字段:

┌─────────────────────────────────────┐
│ 角色標識: [role:editor        ]    │  ← 系統用,創建後不可修改
│ 提示: 用於系統內部識別              │
│                                     │
│ 顯示名稱: [編輯者             ]    │  ← 用户看,可以修改
│ 提示: 用於界面顯示                  │
│                                     │
│ 描述: [可以編輯內容但不能刪除]      │
└─────────────────────────────────────┘

設計考慮:

• name 在創建時輸入,之後禁用編輯（保證系統穩定性）
• displayName 可以隨時修改（滿足國際化需求）

查看角色用户

管理員可以查看某個角色下的所有用户:

• 點擊"查看用户"按鈕
• 彈出對話框顯示用户列表
• 展示用户基本信息（用户名、郵箱、狀態等）

項目效果

🛠️ 開發工具整合

腳本整合前的混亂

項目中原本有 4 個獨立的 shell 腳本:

start_dev.sh          - 啓動完整開發環境
start_services.sh     - 啓動基礎設施（MySQL、Redis）
test_auth.sh          - 測試認證接口
test_user_api.sh      - 測試用户API

存在的問題:

• ❌ 腳本過多,不知道用哪個
• ❌ 功能重複,代碼冗餘
• ❌ 缺少統一的日誌格式
• ❌ 沒有狀態檢查功能
• ❌ 錯誤處理不完善

統一開發腳本 dev.sh

我們將所有腳本整合成一個統一的開發工具:

./dev.sh <command>

支持的命令:

統一的輸出格式

使用顏色標識不同級別的信息:

[INFO]    藍色 - 普通信息
[SUCCESS] 綠色 - 成功操作
[WARNING] 黃色 - 警告信息
[ERROR]   紅色 - 錯誤信息

示例輸出:

[INFO] 啓動完整開發環境...
[INFO] 檢查基礎設施容器...
[SUCCESS] MySQL 已運行
[SUCCESS] Redis 已運行
[INFO] 啓動後端服務...
[SUCCESS] 後端啓動成功 (http://localhost:8888)
[INFO] 啓動前端服務...
[SUCCESS] 前端啓動成功 (http://localhost:8848)
[SUCCESS] 開發環境啓動完成!

健康檢查功能

腳本會自動檢查服務是否成功啓動:

# 後端健康檢查
# 最多等待 30 秒,每秒檢查一次
# 調用 /api/health 接口
# 返回 200 表示成功

# 前端健康檢查
# 檢查進程是否存在
# 檢查端口是否監聽

API 測試集成

內置完整的 API 測試流程:

./dev.sh test

# 測試流程:
# 1. 登錄接口測試
# 2. 獲取 Token
# 3. 用户列表接口測試
# 4. 角色列表接口測試
# 5. 登出接口測試

📚 相關文檔

技術文檔

• Element Plus 表單驗證 - 表單驗證指南
• Vue 3 Composition API - 組合式 API 説明
• TypeScript 類型系統 - 類型定義最佳實踐

安全參考

• OWASP 密碼指南 - 密碼安全最佳實踐
• NIST 密碼指南 - 密碼複雜度標準