Step6：前端交互
本模块不要求掌握 JavaScript、HTML、CSS 等前端技术，要求使用 Python 的
streamlit库实现前端页面，并通过 REST API 与 FastAPI 后端交互。
什么是 Streamlit？¶
Streamlit 是一个使用 Python 快速开发 Web 应用的开源框架。它提供表单、按钮、输入框、文件上传等常用组件，适合用于构建课程项目的交互界面。应用可通过以下命令启动：
streamlit run app.py
本模块要求实现一个与 OJ 后端配套的前端，覆盖用户、题目和评测提交三组页面。前端应调用前述模块实现的 API，不应绕过后端直接读写后端数据。
模块目标¶
- 实现 OJ 系统的基本前端页面，为用户管理、题目管理和评测提交提供可操作的图形界面。
- 完成前端与 FastAPI 后端的接口对接，正确处理身份状态、请求参数、响应数据和异常信息。
- 保证页面功能与前述模块的 API 行为一致。
前置知识要求¶
| 技术点 | 推荐学习内容 |
|---|---|
| Streamlit 基础 | 页面布局、表单、按钮、输入组件、session_state |
| REST API 调用 | HTTP 方法、请求参数、JSON 响应、异常处理 |
| Cookie / Session | 登录状态保存、身份信息传递 |
| 前后端交互 | 页面状态与后端数据的同步 |
任务分解¶
任务 1：用户页面组¶
实现与用户系统相关的页面。相关页面的内容至少包括：
- 用户注册；
- 用户登录和退出；
- 用户信息展示；
- 用户管理。
只有登录后用户才能进行题目提交、结果查询等操作，需安全地保存身份信息。前端需要实现登录表单，调用后端登录 API，完成用户身份认证。
- 实现建议：
- 可用 session_state 或本地文件存储 token。
- 登录失败时给出友好提示。
用户管理页面仅应向具备相应权限的管理员提供。页面应根据登录状态和用户角色展示可执行的操作，并正确处理未登录、权限不足、用户被禁用等情况。
任务 2：题目页面组¶
实现与题目管理相关的页面。相关页面的内容至少包括：
- 题目列表；
- 题目详情；
- 题目新增；
- 题目编辑；
- 题目删除。
题目表单应覆盖题目配置所需字段，并在提交前进行必要的格式检查。题目删除等受限操作应遵循后端权限要求。
任务 3：评测与提交页面组¶
实现与代码提交和评测结果查询相关的页面。相关页面的内容至少包括：
- 代码提交；
- 提交记录列表；
- 提交记录详情；
- 评测状态；
- 编译信息、运行结果和错误信息。
用户需要通过网页提交代码，并能实时查看评测状态和结果。前端需实现代码提交表单，调用后端提交 API，并展示评测结果。
- 实现建议：
- 使用 streamlit 的文本框、下拉框等组件收集题号、语言、代码内容。
- 调用后端提交 API，获取 submission_id。
- 轮询或手动查询 submission_id 的评测状态与结果，并展示。
提交后，页面应能够展示任务当前状态，并在评测完成后展示后端允许当前用户查看的结果。对于编译失败、运行错误、超时等情况，应提供明确的状态和错误提示。
任务 4：前端与后端接口对接¶
前后端分离架构下，所有数据流转均依赖 API，需保证参数、路径、状态码一致。应确保所有前端操作均通过 REST API 与后端交互，并严格遵循 API 文档中的接口规范。
实现时应注意：
- 可封装统一的 API 调用函数，集中处理请求、身份信息和异常；
- 正确保存和传递登录会话，不得在页面代码中硬编码用户身份；
- 根据 HTTP 状态码和响应中的
code字段展示成功或失败信息； - 页面状态应与后端数据保持一致，不应仅在前端模拟操作结果。
评分细则¶
| 功能/接口 | 分值 | 评分说明 |
|---|---|---|
| 用户页面组 | 2 | 注册、登录/退出、用户信息、角色管理 |
| 题目页面组 | 1 | 题目列表、详情、新增、编辑、删除 |
| 评测与提交页面组 | 1 | 代码提交、记录查询、状态及运行信息展示 |
| 前端与后端接口对接 | 1 | API 调用、会话传递、响应与异常处理 |
| 小计 | 5 |
作者：