2024软工K班结对编程任务

https://gitee.com/stone-integrity-universe/rollcall-system
https://www.cnblogs.com/scyskh/p/19259789
https://www.bilibili.com/video/BV12TUwBKEas/

一、结对探索

1.1 队伍基本信息

结对编号：2526；队伍名称：开发小队；

学号	姓名	作业博客链接	具体分工
102301425	石诚宇	https://www.cnblogs.com/scyskh/p/19259789	前端开发、UI设计、原型设计
102301426	潘炜豪	https://blog.csdn.net/2301_80393295/article/details/155165704	后端开发、数据库设计、API接口

1.2 描述结对的过程

我们是在课程项目分组时自愿组队，基于共同的兴趣选择开发课堂点名系统。结对过程采用了分工协作模式，前端使用Vue技术栈，后端使用Flask框架。我们通过定期会议沟通进度，使用Git进行版本控制，确保代码同步和功能整合。

1.3 非摆拍的两人在讨论设计或结对编程过程的照片

二、原型设计

2.1 原型工具的选择

我们选择了墨刀作为原型设计工具。选择这款工具的原因是：

1. 界面简洁易用，学习成本低
2. 支持丰富的交互效果和组件库
3. 支持团队协作和在线预览
4. 能够快速构建高保真原型

2.2 遇到的困难与解决办法

困难描述： 在原型设计阶段，如何合理布局各个功能模块，确保用户体验流畅是一个挑战。特别是点名界面需要同时显示学生信息、操作按钮和积分规则，界面容易显得拥挤。

解决尝试： 我们尝试了多种布局方案，包括分栏布局、标签页布局和卡片式布局。

是否解决： 最终采用了左右分栏布局，左侧显示点名核心功能，右侧显示评分操作和记录，既保证了功能完整性又确保了界面美观。

有何收获： 学会了从用户角度思考界面设计，理解了信息层级和视觉引导的重要性。

2.3 原型作品链接

[](https://modao.cc/proto/J0h7lCRUt64vw9zRocgdJq/sharing?view_mode=read_only&screen=rbpV3ICxmtm2aNzX #课堂点名系统原型-分享)

2.4 原型界面图片展示

首页界面

功能说明：

• 支持Excel文件导入学生数据
• 支持手动添加单个学生
• 显示学生完整信息列表
• 提供数据清空和删除功能

点名界面

功能说明：

• 支持随机点名和顺序点名两种模式
• 实时显示当前被点名学生详细信息
• 集成积分规则说明
• 显示学生列表和统计信息

积分排名界面

功能说明：

• 按总积分降序显示学生排名
• 展示统计信息卡片（总学生数、平均积分等）
• 提供积分排名可视化图表
• 支持数据刷新

数据导出界面

功能说明：

• 导出学生积分清单为Excel格式
• 提供数据预览功能
• 支持下载导入模板
• 实时显示导出状态

三、编程实现

3.1 开发工具库的使用

前端技术栈：

• Vue 3 + Vite：现代化前端框架和构建工具
• Element Plus：企业级UI组件库
• Axios：Promise-based HTTP客户端
• XLSX：Excel文件读写库
• Vue Router：单页面应用路由

后端技术栈：

• Flask：轻量级Python Web框架
• Flask-SQLAlchemy：ORM数据库操作
• Flask-CORS：跨域请求处理
• Pandas：数据分析和处理
• OpenPyXL：Excel文件操作
• SQLite：轻量级数据库

3.2 代码组织与内部实现设计

前端类图

后端类图

3.3 说明算法的关键与关键实现部分流程图

随机点名算法流程图：

text

开始
↓
获取所有学生数据
↓
计算每个学生的权重：weight = 1 / (total_score + 1)
↓
计算总权重
↓
生成随机数 random_val ∈ [0,1)
↓
遍历学生列表，累加归一化权重
↓
当累加权重 ≥ random_val 时选择当前学生
↓
返回选中学生信息
结束

关键算法说明：
基于反比权重的概率选择，确保积分高的学生被点概率低，实现公平点名。算法时间复杂度O(n)，空间复杂度O(1)。

3.4 贴出重要的/有价值的代码片段并解释

python

# 权重随机点名算法核心实现
def random_rollcall():students = Student.query.all()if not students:return Noneweighted_students = []total_weight = 0# 计算每个学生的权重（积分越高权重越低）for student in students:weight = 1 / (student.total_score + 1)  # +1避免除零weighted_students.append({'student': student,'weight': weight})total_weight += weight# 基于权重进行随机选择random_val = random.random()current_weight = 0for ws in weighted_students:normalized_weight = ws['weight'] / total_weightcurrent_weight += normalized_weightif random_val <= current_weight:return ws['student']# 浮点数精度问题备选方案return random.choice(students)

javascript

// 前端积分记录方法
async recordScore(scoreChange, questionType = '') {if (!this.currentStudent) {this.showNotification('请先选择学生', 'warning')return}try {await rollcallAPI.recordRollcall({student_id: this.currentStudent.student_id,call_type: this.callMode,question_type: questionType,score_change: scoreChange})// 更新本地数据this.currentStudent.total_score += scoreChangeif (this.callMode === 'random') {this.currentStudent.random_count += 1}await this.loadStudents()  // 刷新数据await this.loadRecentRecords()this.showNotification(`${this.currentStudent.name} ${scoreChange > 0 ? '+' : ''}${scoreChange}分`,'success')} catch (error) {console.error('记录分数失败:', error)this.showNotification('记录失败', 'error')}
}

3.5 性能分析与改进

性能分析：
通过测试发现，学生数量超过100人时，随机点名算法的响应时间有所增加，主要瓶颈在于数据库查询和权重计算。

改进思路：

1. 添加学生数据分页查询
2. 对权重计算进行缓存优化
3. 使用Redis缓存热门数据

消耗最大的函数：
数据库查询操作和权重计算循环是性能消耗的主要部分。

3.6 单元测试

python

# 学生数据导入测试
def test_student_import_excel():# 测试数据：模拟Excel文件内容test_data = [{'学号': '20241101', '姓名': '测试学生1', '专业': '计算机科学'},{'学号': '20241102', '姓名': '测试学生2', '专业': '软件工程'}]# 测试函数：验证Excel导入功能result = import_students_from_excel(test_data)# 断言验证assert result['status'] == 'success'assert result['message'] == '成功导入 2 名学生'assert Student.query.count() == 2# 随机点名算法测试
def test_random_rollcall_algorithm():# 准备测试数据students = [Student(total_score=0),   # 高概率Student(total_score=10),  # 中概率  Student(total_score=50)   # 低概率]# 测试算法分布selection_count = {0: 0, 1: 0, 2: 0}for _ in range(1000):selected = random_rollcall(students)selection_count[students.index(selected)] += 1# 验证概率分布合理性assert selection_count[0] > selection_count[2]  # 低积分学生被点次数更多

3.7 贴出代码commit记录

四、总结反思

4.1 本次任务的PSP表格

PSP2.1	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	60	45
Estimate	估计这个任务需要多少时间	90	75
Development	开发	600	720
Analysis	需求分析（包括学习新技术）	120	90
Design Spec	生成设计文档	60	45
Design Review	设计复审	30	25
Coding Standard	代码规范	30	20
Design	具体设计	90	75
Coding	具体编码	300	360
Code Review	代码复审	60	50
Test	测试（自我测试，修改代码，提交修改）	60	55
Reporting	报告	90	75
Test Report	测试报告	30	25
Size Measurement	计算工作量	15	10
Postmortem & Process Improvement Plan	事后总结，并提出过程改进计划	30	25
合计		1565	1695

4.2 学习进度条

第N周	新增代码（行）	累计代码（行）	本周学习耗时(小时)	累计学习耗时（小时）	重要成长
1	600	600	8	8	掌握Vue 3组合式API、Flask基础开发、项目环境搭建
2	800	1400	12	20	深入理解前后端数据交互、Excel文件处理、权重算法
3	400	1800	6	26	掌握性能优化、单元测试、项目部署和文档编写

4.3 最初想象中的产品形态、原型设计作品、软件开发成果三者的差距如何？

理想与现实的差距分析：

1. ​功能完整性​：最初设想的进阶功能（如点名转移权、随机事件等）由于时间限制未能实现，但核心功能完整且稳定。
2. ​用户体验​：原型设计中的部分复杂交互在开发过程中进行了简化，更注重功能的实用性和稳定性。
3. ​技术实现​：在权重算法实现上比预期更加复杂，需要处理边界情况和性能优化。
4. ​界面美观度​：实际开发界面相比原型设计更加简洁，但功能布局更加合理。

造成差距的因素：

• ​时间约束​：开发周期有限，需要优先保证核心功能
• ​技术挑战​：某些技术方案的实施难度超出预期
• ​需求优先级​：根据实际使用场景调整了功能优先级
• ​用户体验​：在开发过程中根据测试反馈优化了交互设计

4.4 评价你的队友

石诚宇（前端开发）值得学习的地方：
对前端技术有深入研究，能够快速解决复杂的前端问题，代码规范整洁，对用户体验有很好的理解。

石诚宇需要改进的地方：
在项目初期对后端接口理解不够深入，导致部分前后端对接需要额外沟通时间。

潘炜豪（后端开发）值得学习的地方：
数据库设计能力突出，API接口设计合理规范，对系统架构有整体把握，代码健壮性强。

潘炜豪需要改进的地方：
在文档编写和代码注释方面可以更加详细，便于团队协作和理解。

4.5 结对编程作业心得体会

石诚宇心得体会：
通过本次结对编程项目，我深刻体会到了前后端分离开发模式的优势。最大的收获是学会了如何与后端工程师有效协作，理解API设计的重要性。在开发随机点名界面时，如何平衡功能丰富性和界面简洁性是一个挑战，通过多次迭代优化最终找到了平衡点。这次经历让我对完整的Web开发流程有了更深入的理解，也为今后的项目开发积累了宝贵经验。

潘炜豪心得体会：
这次结对编程让我认识到团队协作中沟通的重要性。在开发权重随机点名算法时，我们遇到了概率分布不均衡的问题，通过与队友的深入讨论和多次测试，最终优化了算法实现。最大的感悟是：一个好的系统不仅要有完善的功能，更要有良好的可维护性和扩展性。通过这个项目，我提升了对数据库设计、API规范和系统架构的理解，这些经验对未来的软件开发工作具有重要意义。