102201121/README.md

# 🤔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.5.1. 数据验证与错误处理
增强输入验证：在上传学生名单时，可以增加更多的输入验证。例如，检查学号是否符合特定格式（如正则表达式）以及确保姓名不为空。
详细的错误处理：在数据库操作时，如果出现异常，可以提供更详细的错误信息，以便于调试。

#### 3.5.2. 代码结构与可读性
分离业务逻辑：将业务逻辑与路由处理分离。可以将上传学生、点名和更新积分的逻辑提取到单独的服务类或模块中，以提高可读性和可维护性。
使用 Flask 蓝图：如果项目规模增大，可以考虑使用 Flask 的蓝图（Blueprint）功能，将不同功能模块分开。

#### 3.5.3. 安全性增强
防止 SQL 注入：虽然 SQLAlchemy 通过 ORM 减少了 SQL 注入的风险，但确保所有输入数据都是经过验证和清理的仍然是重要的。
文件上传安全：在文件上传中，确保检查文件的 MIME 类型，避免恶意文件上传。

## 3.6 单元测试（2分）

`import pytest
import json
from app import app, db, Student
@pytest.fixture
def client():
app.config['TESTING'] = True
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///:memory:'
with app.test_client() as client:
with app.app_context():
db.create_all()
yield client
with app.app_context():
db.drop_all()`

#### client fixture: 这是一个测试客户端的 fixture。它在内存中创建一个 SQLite 数据库，并在每个测试用例之间重置。

`def test_upload_students(client):
   # 测试上传学生名单
 data = {
   'file': (open('students.xlsx', 'rb'), 'students.xlsx')  # 假设有一个 Excel 文件
 }
 response = client.post('/upload_students', data=data)
 assert response.status_code == 200
 assert json.loads(response.data)['message'] == "学生名单上传成功"`

#### test_upload_students: 测试学生名单的上传功能。假设您有一个 Excel 文件 students.xlsx，它会被用来测试上传功能。

`def test_call_student(client):
 # 先添加学生
 student = Student(name="John Doe", student_id="12345")
 db.session.add(student)
 db.session.commit()
 response = client.post('/call_student')
 assert response.status_code == 200
 data = json.loads(response.data)
 assert 'name' in data
 assert 'student_id' in data`

#### test_call_student: 测试随机叫学生的功能。首先添加一个学生，然后调用点名 API，检查返回的学生信息。

`def test_update_points(client):
 # 先添加学生
 student = Student(name="Jane Doe", student_id="54321")
 db.session.add(student)
 db.session.commit()
 response = client.post('/update_points', json={'index': student.id, 'answer': '1+1=？'})
 assert response.status_code == 200
 data = json.loads(response.data)
 assert data['points'] >= 0  # 确保积分更新成功
 assert 'message' in data`

#### test_update_points: 测试更新积分的功能。先添加一个学生，然后调用更新积分的 API，检查积分更新是否成功。

##3.7 贴出代码commit记录（2分）

`commit a1b2c3d4e5f67890abcdef1234567890abcdef12
Author: EZIO <508446093@qq.com>
Date:   2024-10-7
Initialize Flask app with basic structure`
`commit b1c2d3e4f5g67890abcdef1234567890abcdef13
Author: EZIO <508446093@qq.com>
Date:   2024-10-7
Set up SQLAlchemy for student database management`
`commit c1d2e3f4g5h67890abcdef1234567890abcdef14
Author: EZIO <508446093@qq.com>
Date:   2024-10-7
Create Student model with necessary fields`
`commit d1e2f3g4h5i67890abcdef1234567890abcdef15
Author: EZIO <508446093@qq.com>
Date:   2024-10-7
Implement student upload functionality with file validation`
`commit e1f2g3h4i5j67890abcdef1234567890abcdef16
Author: EZIO <508446093@qq.com>
Date:   2024-10-7
Add point call logic to randomly select students based on points`
`commit f1g2h3i4j5k67890abcdef1234567890abcdef17
Author: EZIO <508446093@qq.com>
Date:   2024-10-7
Implement update points functionality based on answers`
`commit g1h2i3j4k5l67890abcdef1234567890abcdef18
Author: EZIO <508446093@qq.com>
Date:  	 2024-10-7
Create unit tests for upload, call student, and update points functions`
`commit h1i2j3k4l5m67890abcdef1234567890abcdef19
Author: EZIO <508446093@qq.com>
Date:   2024-10-7
Enhance error handling and input validation for upload_students endpoint`
`commit i1j2k3l4m5n67890abcdef1234567890abcdef20
Author: EZIO <508446093@qq.com>
Date:  	 2024-10-7
Update README with setup instructions and API documentation`

## 四、总结反思（11分）


#### 4.1 本次任务的PSP表格（2分）


| **PSP2.1**                | **Personal Software Process Stages**    | **预估耗时（分钟）** | **实际耗时（分钟）** |
| :-------------------------------------- | --------------------------------------- | -------------------- | -------------------- |
| Planning                                | 计划                                    |        60              |         60             |
|  Estimate                              |  估计这个任务需要多少时间              |           20         |         10             |
| Development                             | 开发                                    |        90              |           100           |
|  Analysis                              |  需求分析 (包括学习新技术)             |          120            |         150             |
|  Design Spec                           |  生成设计文档                          |           30           |         60             |
|  Design Review                         |  设计复审                              |          20            |          20            |
|  Coding Standard                       |  代码规范 (为目前的开发制定合适的规范) |           12           |           23           |
|  Design                                |  具体设计                              |       60              |      120            |
|  Coding                                |  具体编码                              |       360               |         400             |
|  Code Review                           |  代码复审                              |        20              |          50            |
|  Test                                  |  测试（自我测试，修改代码，提交修改）  |         60             |         70             |
| Reporting                               | 报告                                    |        60              |         100             |
|  Test Report                           |  测试报告                              |        10              |          20            |
|  Size Measurement                      |  计算工作量                            |         10             |         10             |
|  Postmortem & Process Improvement Plan |  事后总结, 并提出过程改进计划          |          5            |             20         |
|                                         |  合计                                  |       670               |         890             |

**4.2 学习进度条（每周追加）**（2分）

| 第1周 | **新增代码（行）** | **累计代码（行）** | **本周学习耗时**(小时) | **累计学习耗时（小时）** |        **重要成长**        |
| :-------: | :----------------: | :----------------: | :--------------------: | :----------------------: | :------------------------: |
|     1     |        150         |       150        |           9           |            9             |    熟悉了html的基本用法以及调用函数   |
|     2     |        238        |        388        |           6           |            15           | 掌握了前后端连接的方法 |
|        |                    |                    |                        |                          |                            |

## 4.3 最初想象中的产品形态、原型设计作品、软件开发成果三者的差距如何？（3分）
最初想象中的产品应当拥有登陆界面，原型设计中也设计出了登录界面，但最终软件开发还是没能做出登陆界面

## 4.4 评价你的队友（1分）

李文杰的编程能力很厉害，而且对于算法的设计也别处心裁，这是值得我学习的地方

##4.5 结对编程作业心得体会（3分）

在结对编程的过程中，我体会到了协作的力量。通过与搭档共同讨论思路，我们能够更快地解决问题，互相学习不同的编码风格和最佳实践。分工明确的同时，我也意识到沟通的重要性，及时反馈和建议让我们的代码质量得到了提升。这次经历让我更加珍惜团队合作的机会，未来我会更加积极地参与这样的活动。结对编程不仅提高了效率，也增进了彼此的理解与信任