一、結對探索（4分）（漢字序號為一級標題，下同）
1.1 隊伍基本信息**（1分）（阿拉伯數字序號為二級標題，下同）
結對編號：；隊伍名稱：；
|
學號
|
姓名
|
作業博客鏈接
|
具體分工 |
|
102301617
|
蘇坤傑
|
全部
|
|
1.2 描述結對的過程（1分）
左手握右手達成共識
1.3 非擺拍的兩人在討論設計或結對編程過程的照片（2分）
👦
👕
👖
👟👟
二、原型設計（16分）
一、系統架構設計
1.1 整體架構
┌─────────────────────────────────────────────────┐
│ 前端層 (Client) │
│ React + TypeScript + Ant Design + ECharts │
│ - 用户界面展示 │
│ - 用户交互處理 │
│ - 數據可視化 │
└──────────────────┬──────────────────────────────┘
│ HTTP/API
│ (RESTful)
┌──────────────────▼──────────────────────────────┐
│ 後端層 (Server) │
│ Node.js + Express + TypeScript │
│ - 業務邏輯處理 │
│ - API接口提供 │
│ - 數據驗證和處理 │
└──────────────────┬──────────────────────────────┘
│ SQL
│
┌──────────────────▼──────────────────────────────┐
│ 數據層 (Database) │
│ MySQL (db4free.net) │
│ - students 表 │
│ - roll_call_records 表 │
└─────────────────────────────────────────────────┘1.2 技術架構分層
- 表現層：React 組件、Ant Design UI組件
- 業務邏輯層：Express 控制器、工具函數
- 數據訪問層：MySQL2 連接池、數據模型
- 數據存儲層：MySQL 數據庫
1.3 前後端分離架構
前端 (Port 3000) 後端 (Port 3001) 數據庫
│ │ │
│ HTTP Request │ │
├────────────────────────>│ │
│ │ SQL Query │
│ ├─────────────────────>│
│ │ SQL Result │
│ │<─────────────────────┤
│ HTTP Response │ │
│<────────────────────────┤ │
│ │ │二、數據庫設計
2.1 ER圖（實體關係圖）
┌──────────────┐ ┌──────────────────┐
│ students │ │ roll_call_records │
├──────────────┤ ├──────────────────┤
│ id (PK) │◄────────│ id (PK) │
│ student_id │ 1:N │ student_id (FK) │
│ name │ │ call_type │
│ major │ │ is_present │
│ total_score │ │ repeat_question_ │
│ random_call_ │ │ score │
│ count │ │ answer_question_ │
│ created_at │ │ score │
│ updated_at │ │ total_score_ │
└──────────────┘ │ change │
│ created_at │
└──────────────────┘關係説明：
- 一個學生可以有多個點名記錄（1:N）
- 外鍵約束：
roll_call_records.student_id→students.student_id - 級聯刪除：刪除學生時，自動刪除相關記錄
2.2 表結構詳細設計
students 表
|
字段名
|
類型
|
約束
|
説明
|
|
id
|
INT
|
PRIMARY KEY, AUTO_INCREMENT
|
主鍵
|
|
student_id
|
VARCHAR(50)
|
UNIQUE, NOT NULL
|
學號（唯一）
|
|
name
|
VARCHAR(100)
|
NOT NULL
|
姓名
|
|
major
|
VARCHAR(100)
|
NULL
|
專業
|
|
total_score
|
DECIMAL(10,2)
|
DEFAULT 0
|
總積分
|
|
random_call_count
|
INT
|
DEFAULT 0
|
隨機點名次數
|
|
created_at
|
TIMESTAMP
|
DEFAULT CURRENT_TIMESTAMP
|
創建時間
|
|
updated_at
|
TIMESTAMP
|
DEFAULT CURRENT_TIMESTAMP ON UPDATE
|
更新時間
|
索引：
- PRIMARY KEY: id
- UNIQUE: student_id
- INDEX: idx_student_id (student_id)
- INDEX: idx_total_score (total_score)
roll_call_records 表
|
字段名
|
類型
|
約束
|
説明
|
|
id
|
INT
|
PRIMARY KEY, AUTO_INCREMENT
|
主鍵
|
|
student_id
|
VARCHAR(50)
|
NOT NULL, FOREIGN KEY
|
學號（外鍵）
|
|
call_type
|
ENUM('random','sequential')
|
NOT NULL
|
點名類型
|
|
is_present
|
BOOLEAN
|
DEFAULT FALSE
|
是否到達課堂
|
|
repeat_question_score
|
DECIMAL(3,1)
|
DEFAULT 0
|
重複問題得分
|
|
answer_question_score
|
DECIMAL(3,1)
|
DEFAULT 0
|
回答問題得分
|
|
total_score_change
|
DECIMAL(5,2)
|
DEFAULT 0
|
本次積分變化
|
|
created_at
|
TIMESTAMP
|
DEFAULT CURRENT_TIMESTAMP
|
創建時間
|
索引：
- PRIMARY KEY: id
- FOREIGN KEY: student_id → students.student_id (ON DELETE CASCADE)
- INDEX: idx_student_id (student_id)
- INDEX: idx_created_at (created_at)
2.3 數據庫設計原則
- 規範化：符合第三範式，減少數據冗餘
- 性能優化：關鍵字段建立索引
- 數據完整性：使用外鍵約束和級聯刪除
- 可擴展性：預留擴展字段（如 major 可為空）
三、UI/UX設計
3.1 頁面佈局設計
3.1.1 首頁（HomePage）佈局
┌─────────────────────────────────────────────────────┐
│ 頂部導航欄 (AppHeader) │
│ [課堂隨機點名系統] [點名系統] [積分排名] │
├─────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────────────────────────┐ │
│ │ 學生管理 Card │ │
│ │ ┌────────────────┐ ┌────────────────┐ │ │
│ │ │ [導入Excel] │ │ [導出積分詳單] │ │ │
│ │ └────────────────┘ └────────────────┘ │ │
│ │ 當前學生總數: 15 │ │
│ └──────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────┐ │
│ │ 點名操作 Card │ │
│ │ ┌──────────────┐ ┌──────────────┐ │ │
│ │ │ [隨機點名] │ │ [順序點名] │ │ │
│ │ └──────────────┘ └──────────────┘ │ │
│ │ │ │
│ │ 順序點名設置： │ │
│ │ 起始學號: [下拉選擇框 ▼] │ │
│ │ 連續數量: [輸入框: 1] │ │
│ └──────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────┐ │
│ │ 點名結果 Card (動畫/結果) │ │
│ │ ┌──────────────────────────────────────┐ │ │
│ │ │ 🎲 (旋轉動畫) │ │ │
│ │ │ 張三 (快速切換) │ │ │
│ │ │ 隨機點名中... │ │ │
│ │ └──────────────────────────────────────┘ │ │
│ │ 或 │ │
│ │ ┌──────────────────────────────────────┐ │ │
│ │ │ 張三 │ │ │
│ │ │ 學號: 2021001 │ │ │
│ │ │ 專業: 計算機科學 │ │ │
│ │ │ 當前積分: 16.94 │ │ │
│ │ └──────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────┘3.1.2 排名頁（RankingPage）佈局
┌─────────────────────────────────────────────────────┐
│ 頂部導航欄 │
├─────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────────────────────────┐ │
│ │ 積分排名 Card │ │
│ │ ┌──────────────────────────────────────┐ │ │
│ │ │ [柱形圖] [折線圖] [排名表格] │ │ │
│ │ │ ┌────────┐ ┌────────┐ │ │ │
│ │ │ │ 圖表1 │ │ 圖表2 │ │ │ │
│ │ │ └────────┘ └────────┘ │ │ │
│ │ │ ┌──────────────────────────────┐ │ │ │
│ │ │ │ 排名 | 姓名 | 學號 | 積分 │ │ │ │
│ │ │ │ 1 | 張三 | ... | 16.94 │ │ │ │
│ │ │ │ 2 | 李四 | ... | 9.80 │ │ │ │
│ │ │ └──────────────────────────────┘ │ │ │
│ │ └──────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────┘3.2 交互流程設計
3.2.1 隨機點名交互流程
┌─────────┐
│ 用户點擊 │
│隨機點名 │
└────┬────┘
│
▼
┌─────────────┐
│ 顯示動畫 │
│ (2秒) │
│ - 旋轉骰子 │
│ - 切換名字 │
└────┬────────┘
│
▼
┌─────────────┐
│ 顯示選中 │
│ 的學生 │
└────┬────────┘
│
▼
┌─────────────┐
│ 彈出記錄 │
│ 彈窗 │
└────┬────────┘
│
▼
┌─────────────┐
│ 用户填寫 │
│ 點名結果 │
└────┬────────┘
│
▼
┌─────────────┐
│ 保存記錄 │
│ 更新積分 │
└────┬────────┘
│
▼
┌─────────────┐
│ 刷新顯示 │
└─────────────┘3.2.2 順序點名交互流程
┌─────────────┐
│ 用户設置 │
│ 起始學號 │
│ 和數量 │
└────┬────────┘
│
▼
┌─────────────┐
│ 點擊順序 │
│ 點名按鈕 │
└────┬────────┘
│
▼
┌─────────────┐
│ 顯示學生 │
│ 列表(多個) │
└────┬────────┘
│
▼
┌─────────────┐
│ 用户點擊 │
│ 某個學生 │
└────┬────────┘
│
▼
┌─────────────┐
│ 彈出記錄 │
│ 彈窗 │
└────┬────────┘
│
▼
┌─────────────┐
│ 保存記錄 │
│ 自動更新 │
│ 起始學號 │
└─────────────┘2.1 原型工具的選擇（2分）
（在此處説明選擇了什麼原型設計工具？為什麼選擇這一款原型軟件？）
選擇墨刀。原因：第一眼看到了
2.2 遇到的困難與解決辦法**（3分）
（原型設計過程中的困難描述、解決嘗試、是否解決、有何收穫）
2.3 原型作品鏈接**（5分）
（靜態原型作品得2分，交互性強的原型作品得5分）
=2.4 原型界面圖片展示**（6分）
（儘可能圖文並茂地在此處介紹你們隊伍設計的各功能模塊，創新點也在此處展示説明）
隨機點名會從所有學生中隨機選取一名進行點名，並設置分數
按照名單中的學生的分數進行排序
三、編程實現（14分）
**3.1 開發工具庫（如文件讀取包等）的使用**（1分）後端
- Node.js + Express + TypeScript
- db4free（支持免費在線數據庫）
- xlsx（Excel文件處理）
前端
- React + TypeScript
- Ant Design（UI組件庫）
- ECharts（數據可視化）
- axios（HTTP請求）
**3.2 代碼組織與內部實現設計（類圖）**（3分）.
├── server/ # 後端服務
│ ├── src/
│ │ ├── routes/ # 路由
│ │ ├── controllers/ # 控制器
│ │ ├── models/ # 數據模型
│ │ ├── utils/ # 工具函數
│ │ └── app.ts # 應用入口
│ ├── database/ # 數據庫腳本
│ └── package.json
├── client/ # 前端應用
│ ├── src/
│ │ ├── components/ # 組件
│ │ ├── pages/ # 頁面
│ │ ├── services/ # API服務
│ │ └── App.tsx # 應用入口
│ └── package.json
└── README.md**3.3 説明算法的關鍵與關鍵實現部分流程圖**（2分）開始
↓
獲取所有學生列表
↓
檢查學生列表是否為空
↓
├─ 是 → 拋出錯誤：學生列表為空
↓
└─ 否
↓
計算每個學生的權重
weight[i] = 1 / (student[i].total_score + 1)
↓
計算總權重
totalWeight = Σ(weight[i])
↓
生成隨機數
random = Math.random() * totalWeight
↓
遍歷學生列表，累減權重
for i in students:
random -= weight[i]
if random <= 0:
返回 students[i]
↓
返回選中的學生
↓
結束3.4 貼出重要的/有價值的代碼片段並解釋（3分）
關鍵解釋
- 權重計算：使用反比例函數
1/(score+1)，確保積分為0時權重為1，積分越高權重越低 - 加權隨機：通過累減權重的方式實現加權隨機選擇，時間複雜度O(n)
- 邊界處理：
Math.max(0, score)確保積分非負，避免除零錯誤 - 精度處理：如果由於浮點數精度問題沒有選中，返回最後一個學生作為兜底
價值：這是系統的核心公平性保證，確保積分低的學生有更多被點到的機會。
關鍵解釋：
- 模塊化設計：三個獨立的加分項，互不干擾，易於維護和擴展
- 靈活處理：使用
null表示未記錄重複問題，避免強制要求所有字段 - 規則清晰：每個規則都有明確的數值定義，符合業務需求
- 可擴展性：如果需要添加新的積分規則，只需添加新的判斷分支
價值：這是積分系統的核心計算邏輯，所有積分變化都通過這個函數計算，保證了數據一致性。
關鍵解釋：
- 事務保證：使用數據庫事務確保積分更新和計數更新的原子性
- 錯誤處理：如果任何操作失敗，自動回滾，保證數據一致性
- 資源管理：使用
finally確保連接總是被釋放，避免連接泄漏 - 條件更新：根據點名類型決定是否更新隨機點名次數
價值：這是數據一致性的關鍵保證，確保積分和統計數據的準確性。
3.5 性能分析與改進（1分）
（描述改進思路，展示性能分析圖和程序中消耗最大的函數）
消耗最大的函數排名：
Excel文件解析（parseExcelFile）- 40-50%
數據庫查詢（getAllStudents）- 30-40%
加權隨機點名（weightedRandomSelect）- 5-10%（數據量大時）
主要改進思路：
數據庫：添加索引、優化查詢字段
Excel解析：流式處理、禁用不必要的解析選項
算法：使用二分查找替代線性搜索
前端：虛擬滾動、防抖節流
3.6 單元測試（2分）
（展示部分單元測試代碼，並説明測試的函數功能、構造測試數據的思路）
┌─────────────────────────────────────┐
│ 第3層：MySQL 應用層連接測試 │
│ - 認證測試 │
│ - 數據庫存在性測試 │
│ - 查詢功能測試 │
└──────────────┬──────────────────────┘
│
┌──────────────▼──────────────────────┐
│ 第2層：網絡端口層測試 │
│ - TCP 端口可達性測試 │
│ - 端口連接超時檢測 │
└──────────────┬──────────────────────┘
│
┌──────────────▼──────────────────────┐
│ 第1層：網絡基礎層測試 │
│ - 主機可達性測試（ping） │
│ - DNS 解析測試 │
└──────────────┬──────────────────────┘
│
┌──────────────▼──────────────────────┐
│ 第0層：配置信息檢查 │
│ - 環境變量讀取 │
│ - 配置完整性驗證 │
└─────────────────────────────────────┘
測試數據庫的連接，判斷狀態，
3.7 貼出代碼commit記錄（2分）
四、總結反思（11分）
**4.1 本次任務的PSP表格**（2分）|
PSP2.1 |
Personal Software Process Stages |
預估耗時（分鐘） |
實際耗時（分鐘） |
|
Planning
|
計劃
|
120
|
150
|
|
Estimate
|
估計這個任務需要多少時間
|
30
|
35
|
|
Development
|
開發
|
960
|
1080
|
|
Analysis
|
需求分析 (包括學習新技術)
|
90
|
110
|
|
Design Spec
|
生成設計文檔
|
120
|
150
|
|
Design Review
|
設計複審
|
30
|
40
|
|
Coding Standard
|
代碼規範 (為目前的開發制定合適的規範)
|
30
|
30
|
|
Design
|
具體設計
|
120
|
150
|
|
Coding
|
具體編碼
|
720
|
840
|
|
Code Review
|
代碼複審
|
60
|
60
|
|
Test
|
測試（自我測試，修改代碼，提交修改）
|
180
|
210
|
|
Reporting
|
報告
|
60
|
60
|
|
Test Report
|
測試報告
|
30
|
30
|
|
Size Measurement
|
計算工作量
|
20
|
20
|
|
Postmortem & Process Improvement Plan
|
事後總結, 並提出過程改進計劃
|
40
|
40
|
|
合計 |
1200 |
1380 |
4.2 學習進度條（每週追加）（2分）
|
第N周 |
新增代碼（行） |
累計代碼（行） |
本週學習耗時（小時） |
累計學習耗時（小時） |
重要成長 |
|
1
|
400
|
400
|
6
|
6
|
學習React + TypeScript基礎語法，掌握組件開發、Hooks使用；學習Express框架和RESTful API設計；熟悉Node.js異步編程和Promise/async-await
|
|
2
|
500
|
900
|
8
|
14
|
深入學習MySQL數據庫操作，掌握連接池、事務處理；學習Ant Design組件庫使用；實現加權隨機點名算法，理解反比例函數在權重計算中的應用
|
|
3
|
450
|
1350
|
7
|
21
|
學習Excel文件處理（xlsx庫），掌握文件上傳和解析；實現積分計算系統，理解模塊化設計；學習前端狀態管理和API調用（axios）
|
|
4
|
350
|
1700
|
6
|
27
|
優化數據庫查詢性能，學習索引優化；實現順序點名增強功能，掌握算法擴展；學習CSS動畫和前端交互優化；解決數據庫認證兼容性問題
|
|
5
|
200
|
1900
|
4
|
31
|
性能分析和優化實踐；完善文檔編寫（算法説明、性能分析、PSP表格）；總結項目經驗，提出改進計劃
|
|
合計 |
1900 |
1900 |
31 |
31 |
-
|
4.3 最初想象中的產品形態、原型設計作品、軟件開發成果三者的差距如何？（3分）
最初想象中的產品像學習通的上課點名系統，不過學習通的點名系統還有學生端。
造成因素：任務中沒寫
（也就是談一談本次任務中“理想與現實的差距”，是哪些因素造成了這些差距？）
4.4 評價你的隊友（1分）
需要改進的地方：AI用的還是太多了
（分別評價隊友值得學習的地方和需要改進的地方）
（本部分需要包含隊伍內所有成員的心得體會，若缺少一人，則隊伍總分減少2分，減滿4分為止）
4.5 結對編程作業心得體會（3分）
作業還是太難了，完成後有點成就感
遇到的困難：MySQL 8.0+ 認證插件不兼容錯誤 端口衝突； 導出積分詳單失敗， 前端啓動腳本錯誤等等
啓發：現在的軟件開發遇到困難或不知道如何實現什麼功能再也不用苦苦搜尋資料，只要問AI就能對症下藥了。
（可包含但不限於評價作業難度、完成後的感受、遇到的代碼模塊異常或結對困難及解決方法、對之後學習或軟件開發的啓發）
（本部分需要包含隊伍內所有成員的心得體會，若缺少一人，則隊伍總分減少3分，減滿6分為止）