根据之前设计的开发思路，我主要实现了刷题功能中专项刷题基础功能的开发。

一、后端开发

1.框架：选择了FastAPI框架，主要考虑其异步支持和自动生成API文档的特性，方便与前端联调。数据库使用 SQLAlchemy ORM，便于开发和后续迁移

2.收藏功能对应的数据表建立

较上次补充了新的数据表，是针对题目的收藏建立的数据表

CREATE TABLE favorites (
    id INT AUTO_INCREMENT PRIMARY KEY,
    user_id VARCHAR(50),
    question_id VARCHAR(10),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    UNIQUE KEY uk_user_question (user_id, question_id)
);

3.功能

3.1 CRUD数据访问层实现

crud/question_crud.py 负责题目的筛选查询和随机获取

crud/record_crud.py 负责答题记录的保存

crud/favorite_crud.py 负责收藏的增删查改

3.2 业务逻辑层实现

services/practice_service.py 负责实现专项刷题业务逻辑

3.3 路由接口层实现

api/practice_api.py 负责串联各个CRUD函数实现具体功能

3.4 数据验证模型实现

schemas/practice_schema.py 主要定义了前端请求的格式，FastAPI会自动根据这些定义校验前端传来的数据

4.主要接口设计

/api/practice/filters：获取筛选选项

/api/practice/questions：获取筛选后的题目列表

/api/practice/submit：提交答案并批改

/api/practice/favorite/add：添加收藏

/api/practice/favorite/remove：取消收藏

二、前端开发

前端开发从API封装开始。在api目录下创建practice.js，使用Axios封装了所有后端接口，统一管理请求路径和参数。

1.状态管理

使用Pinia。在store中定义了practice.js，管理筛选条件、题目列表、当前索引、答题记录、筛选选项等状态。同时提供了获取题目、提交答案、翻页、保存答案等功能，以及当前题目、进度百分比等的获取。

2.页面建立

2.1 PracticeView.vue是主页面，包含筛选侧边栏和内容区域。筛选侧边栏使用Element Plus的表单组件，科目和题型选项从后端动态获取。用户选择筛选条件后点击开始刷题，调用后端接口获取题目列表并更新store。

2.2 题目卡片组件是QuestionCard.vue，是整个刷题页面的核心。它负责展示题目内容和选项，处理用户答题，显示计时器，记录用户做题时长，提交答案后展示得分、正确答案和解析。还提供了上一题下一题导航功能和收藏按钮。

三、文件调用关系

前端请求进来后，API层接收请求 -> Service层处理业务逻辑 -> CRUD层操作数据库 -> 返回结果层层返回。

用户点击开始刷题时，前端调用practice_api.py的/questions接口，这个接口调用practice_service.py的get_questions方法，该方法再调用question_crud.py的filter_questions方法去数据库查询，查询结果原路返回。

用户提交答案时，前端调用/submit接口，API层调用service层的submit_answer方法，该方法依次调用judge批改、record_crud保存记录、返回结果。

四、问题解决

1.CORS跨域问题

前端运行在localhost:5173，后端在localhost:8000，浏览器拦截了跨域请求。解决方法是后端添加CORS中间件。开发环境直接使用了通配符。

2.前端store初始化时机问题

在Vue组件中直接使用store，但computed属性在store初始化前执行导致报错。解决方法是先声明store变量为null，在onMounted钩子中再初始化，computed中使用可选链访问。

五、总结

前后端联调阶段，验证了每个接口的功能，大部分功能可以正常实现。目前专项刷题模块的核心功能已经完成，但还有许多待完善的地方。结合AI实现相似题的生成功能和错题本功能计划在后续时间实现。