|
|
# 🤔Part·3 博客撰写内容
|
|
|
|
|
|
在正文第1行给出平台 https://code.educoder.net/projects 中的代码仓库地址（本行除链接外无任何其他文本内容）
|
|
|
|
|
|
在正文第二行给出知士荟博客地址（本行除链接外无任何其他文本内容）
|
|
|
|
|
|
在正文第2行给出视频在线播放网址（本行除链接外无任何其他文本内容）
|
|
|
|
|
|
## 一、结对探索（4分）（汉字序号为一级标题，下同）
|
|
|
|
|
|
**1.1 队伍基本信息**（1分）（阿拉伯数字序号为二级标题，下同）
|
|
|
|
|
|
结对编号：_19___；队伍名称：____；
|
|
|
|
|
|
| 学号 | 姓名 | 作业博客链接 | **具体分工** |
|
|
|
| :--: | :--: | :----------: | :----------: |
|
|
|
| 102201121 | 邵子瑞 | https://www.learnerhub.net/#/resources/3196 | 前端开发以及后端代码优化 |
|
|
|
| 102201112 | 李文杰 | | 后端开发 |
|
|
|
|
|
|
|
|
|
##1.2 描述结对的过程（1分）
|
|
|
我和李文杰平时就会一起讨论代码，因此我们会一起组队
|
|
|
|
|
|
##1.3 非摆拍的两人在讨论设计或结对编程过程的照片（2分）
|
|
|
|
|
|
|
|
|
## 二、原型设计（16分）
|
|
|
|
|
|
##2.1 原型工具的选择（2分）
|
|
|
|
|
|
选择了mockplus这一工具，首先是因为mockplus是国内的原型设计工具，因此自带的UI有很多国内的元素，例如Harmony UI以及Wechat UI,其次，此原型设计工具可以实现多人同时对一个画板进行设计，方便了结对编程双人的合作
|
|
|
|
|
|
##2.2 遇到的困难与解决办法（3分）
|
|
|
|
|
|
刚开始时对如何实现交互还不是很了解，经过查阅资料之后了解到需要内置连接，最后成功解决如何实现交互的问题
|
|
|
|
|
|
|
|
|
##2.3 原型作品链接（5分）
|
|
|
|
|
|
https://rp.mockplus.cn/run/OQHkOev8AU/6FZZmdkDN?cps=expand&rps=expand&nav=1&ha=0&la=0&fc=0&out=1&rt=1&as=true
|
|
|
|
|
|
##2.4 原型界面图片展示（6分）
|
|
|
|
|
|
### 2.4.1登录界面
|
|
|
登录界面：设计一个专为教师服务的点名系统，需要登录教师自己的账号
|
|
|
### 2.4.2主界面名单导入按钮
|
|
|
名单导入按钮：设计一个按钮，让不同学科的老师选择不同的名单进行导入
|
|
|
### 2.4.3点名按钮
|
|
|
点名按钮：设计一个按钮，让老师点击后可以进行随机点名，同时还要进行对名单是否导入的判断，若没有导入名单则弹窗显示没有名单
|
|
|
### 2.4.4特殊模式按钮
|
|
|
特殊模式开启按钮：点击后可以开启特殊规则点名，例如周四加分到五十分
|
|
|
|
|
|
|
|
|
## 三、编程实现（14分）
|
|
|
|
|
|
## 3.1 开发工具库（如文件读取包等）的使用**（1分）
|
|
|
### 3.1.1后端
|
|
|
Flask: 轻量级的Web框架，用于构建RESTful API。
|
|
|
Flask-CORS: 处理跨域请求（如果前端与后端分开运行）。
|
|
|
requests: 用于处理HTTP请求。
|
|
|
### 3.1.2前端
|
|
|
Fetch API: 用于发送HTTP请求。
|
|
|
### 3.1.3数据库
|
|
|
SQLAlchemy: ORM工具，用于与数据库交互（如果需要持久化存储
|
|
|
## 3.2 代码组织与内部实现设计（类图）（3分）
|
|
|
+-------------------+
|
|
|
| Student |
|
|
|
+-------------------+
|
|
|
| - id: str |
|
|
|
| - name: str |
|
|
|
| - isPresent: bool |
|
|
|
+-------------------+
|
|
|
| + mark_present() |
|
|
|
| + mark_absent() |
|
|
|
+-------------------+
|
|
|
|
|
|
+-------------------+
|
|
|
| Class |
|
|
|
+-------------------+
|
|
|
| - class_id: str |
|
|
|
| - class_name: str |
|
|
|
| - students: List[Student] |
|
|
|
+-------------------+
|
|
|
| + add_student(student: Student) |
|
|
|
| + remove_student(student: Student) |
|
|
|
| + get_student_list() |
|
|
|
+-------------------+
|
|
|
|
|
|
+-------------------+
|
|
|
| AttendanceRecord |
|
|
|
+-------------------+
|
|
|
| - date: str |
|
|
|
| - class: Class |
|
|
|
| - attendance_list: List[Student] |
|
|
|
+-------------------+
|
|
|
| + add_record(student: Student) |
|
|
|
| + get_attendance_summary() |
|
|
|
+-------------------+
|
|
|
|
|
|
+-------------------+
|
|
|
| API |
|
|
|
+-------------------+
|
|
|
| + add_student(data: dict) |
|
|
|
| + get_students() |
|
|
|
| + take_attendance(data: dict) |
|
|
|
| + get_attendance(date: str) |
|
|
|
+-------------------+
|
|
|
|
|
|
## 3.3 说明算法的关键与关键实现部分流程图（2分）
|
|
|
### 3.3.1. 后端（Flask API）
|
|
|
Flask 应用 (app.py):
|
|
|
路由定义：
|
|
|
/students：处理学生的添加和获取。
|
|
|
/attendance：处理点名记录的添加和获取。
|
|
|
数据存储：
|
|
|
使用内存中的列表（students）和字典（attendance_records）来存储学生和点名记录，适合小型应用。
|
|
|
模型类:
|
|
|
Student、Class 和 AttendanceRecord 类用于定义数据结构和行为。
|
|
|
功能实现：
|
|
|
add_student(): 处理学生的添加请求。
|
|
|
get_students(): 获取所有学生信息。
|
|
|
take_attendance(): 处理点名请求，并更新学生的到场状态。
|
|
|
get_attendance(): 获取特定日期的出勤记录。
|
|
|
### 3.3.2. 前端（HTML + JavaScript）
|
|
|
用户界面 (index.html):
|
|
|
提供输入框和按钮用于添加学生、查看学生列表和点名。
|
|
|
使用 JavaScript 的 Fetch API 与后端进行交互。
|
|
|
功能实现：
|
|
|
addStudent(): 将新学生添加到系统。
|
|
|
loadStudents(): 获取并展示学生列表。
|
|
|
takeAttendance(): 处理点名过程，并提交到后端。
|
|
|
### 3.3.3流程图
|
|
|
graph TD;
|
|
|
A[用户输入学生ID和姓名] --> B[发送 POST 请求到 /students API]
|
|
|
B --> C[后端接收请求并添加学生]
|
|
|
C --> D[返回学生数据给前端更新列表]
|
|
|
D --> E[用户选择点名日期]
|
|
|
E --> F[显示学生列表并提示是否到场]
|
|
|
F --> G[发送 POST 请求到 /attendance API]
|
|
|
G --> H[后端处理点名记录并更新学生状态]
|
|
|
H --> I[返回点名结果给前端更新显示状态]
|
|
|
|
|
|
## 3.4 贴出重要的/有价值的代码片段并解释（3分）
|
|
|
####3.4.1 Flask 应用及配置:
|
|
|
app = Flask(__name__)
|
|
|
CORS(app) # 启用 CORS
|
|
|
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///students.db'
|
|
|
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
|
|
|
app.config['MAX_CONTENT_LENGTH'] = 64 * 1024 * 1024 # 最大上传文件限制
|
|
|
db = SQLAlchemy(app)
|
|
|
Flask 应用实例：创建 Flask 应用实例。
|
|
|
CORS：启用跨域资源共享，允许前端与后端的跨域请求。
|
|
|
数据库配置：配置 SQLite 数据库及其连接字符串，设置 SQLAlchemy 的追踪修改功能为 False，以提高性能。
|
|
|
文件大小限制：限制上传文件大小为 64MB
|
|
|
####3.4.2上传学生名单
|
|
|
@app.route('/upload_students', methods=['POST'])
|
|
|
def upload_students():
|
|
|
# 文件检查和处理
|
|
|
...
|
|
|
df = pd.read_excel(file) # 读取 Excel 文件
|
|
|
# 校验列是否存在
|
|
|
...
|
|
|
for _, row in df.iterrows():
|
|
|
student = Student(name=row['姓名'], student_id=row['学号'])
|
|
|
db.session.add(student)
|
|
|
db.session.commit()
|
|
|
return jsonify(message="学生名单上传成功"), 200
|
|
|
文件上传：接收学生名单的 Excel 文件，检查文件格式和内容。
|
|
|
数据验证：确保文件包含必需的“姓名”和“学号”列。
|
|
|
数据存储：使用 Pandas 读取 Excel 文件并将学生信息存入数据库。
|
|
|
## 3.5 性能分析与改进（1分）
|
|
|
|
|
|
（描述改进思路，展示性能分析图和程序中消耗最大的函数）
|
|
|
|
|
|
## 3.6 单元测试（2分）
|
|
|
|
|
|
（展示部分单元测试代码，并说明测试的函数功能、构造测试数据的思路）
|
|
|
|
|
|
**3.7 贴出代码commit记录**（2分）
|
|
|
```
|
|
|
|
|
|
## 四、总结反思（11分）
|
|
|
|
|
|
```
|
|
|
**4.1 本次任务的PSP表格**（2分）
|
|
|
```
|
|
|
|
|
|
| **PSP2.1** | **Personal Software Process Stages** | **预估耗时（分钟）** | **实际耗时（分钟）** |
|
|
|
| :-------------------------------------- | --------------------------------------- | -------------------- | -------------------- |
|
|
|
| Planning | 计划 | | |
|
|
|
| Estimate | 估计这个任务需要多少时间 | | |
|
|
|
| Development | 开发 | | |
|
|
|
| Analysis | 需求分析 (包括学习新技术) | | |
|
|
|
| Design Spec | 生成设计文档 | | |
|
|
|
| Design Review | 设计复审 | | |
|
|
|
| Coding Standard | 代码规范 (为目前的开发制定合适的规范) | | |
|
|
|
| Design | 具体设计 | | |
|
|
|
| Coding | 具体编码 | | |
|
|
|
| Code Review | 代码复审 | | |
|
|
|
| Test | 测试（自我测试，修改代码，提交修改） | | |
|
|
|
| Reporting | 报告 | | |
|
|
|
| Test Report | 测试报告 | | |
|
|
|
| Size Measurement | 计算工作量 | | |
|
|
|
| Postmortem & Process Improvement Plan | 事后总结, 并提出过程改进计划 | | |
|
|
|
| | 合计 | | |
|
|
|
|
|
|
**4.2 学习进度条（每周追加）**（2分）
|
|
|
|
|
|
| **第**N周 | **新增代码（行）** | **累计代码（行）** | **本周学习耗时**(小时) | **累计学习耗时（小时）** | **重要成长** |
|
|
|
| :-------: | :----------------: | :----------------: | :--------------------: | :----------------------: | :------------------------: |
|
|
|
| 1 | 500 | 500 | 5 | 5 | 熟悉x语言1、2、3特性 |
|
|
|
| 2 | 1000 | 1500 | 12 | 17 | 通过练习xxx，掌握了xxx用法 |
|
|
|
| … | | | | | |
|
|
|
|
|
|
**4.3 最初想象中的产品形态、原型设计作品、软件开发成果三者的差距如何？**（3分）
|
|
|
|
|
|
（也就是谈一谈本次任务中**“理想与现实的差距”**，是哪些因素造成了这些差距？）
|
|
|
|
|
|
**4.4 评价你的队友**（1分）
|
|
|
|
|
|
（分别评价队友**值得学习的地方**和**需要改进的地方**）
|
|
|
（本部分需要包含队伍内所有成员的心得体会，若缺少一人，则队伍总分减少2分，减满4分为止）
|
|
|
|
|
|
**4.5 结对编程作业心得体会**（3分）
|
|
|
|
|
|
（可包含但不限于评价作业难度、完成后的感受、遇到的代码模块异常或结对困难及解决方法、对之后学习或软件开发的启发）
|
|
|
（本部分需要包含队伍内所有成员的心得体会，若缺少一人，则队伍总分减少3分，减满6分为止）
|
|
|
|
