一、项目简介在线考试是校园信息化建设中非常常见的业务场景。传统纸质考试存在试卷印刷、人工阅卷、成绩统计效率低等问题而在线考试平台可以把“教师出题、学生答题、系统判分、成绩查询”串成一条完整流程。本文实现一个可运行的 Python 全栈项目校园在线考试平台。项目面向两类用户教师注册/登录后创建考试、添加选择题、发布试卷。学生注册/登录后查看已发布考试、在线答题、提交试卷并查看成绩。本项目不是单纯的算法演示而是一个包含后端 API、数据库、登录认证、前端交互和部署说明的完整全栈项目。二、技术栈层级技术后端框架FastAPI后端语言Python 3数据库SQLite数据校验Pydantic认证方式Bearer Token 密码 PBKDF2 哈希前端框架Vue 3前端构建Vite接口通信Fetch API前端主技术栈为Vue 3 Vite后端使用FastAPI SQLite适合课程设计、毕业设计原型。三、系统架构系统采用前后端分离架构浏览器 Vue 3 页面 │ HTTP / JSON / Bearer Token ▼ FastAPI REST API │ sqlite3 ▼ SQLite 数据库后端提供/api/auth/*、/api/exams/*、/api/submissions/*等接口前端通过src/api.js统一封装请求并在登录后把 Token 写入localStorage后续请求自动携带Authorization请求头。四、功能模块1. 用户与认证模块用户注册支持学生、教师两种角色。用户登录校验密码后签发随机 Token。登录状态前端保存 Token 和用户角色。退出登录删除服务端 Token 并清理前端缓存。接口保护核心接口必须携带有效 Token。2. 教师考试管理模块创建考试填写标题、说明、考试时长。添加题目维护 A/B/C/D 四个选项、正确答案和分值。发布考试草稿发布后学生可见。查看答案教师查看自己创建的考试时可以看到正确答案。3. 学生答题模块查看已发布考试列表。进入考试详情页选择答案。提交试卷后系统自动判分。查看个人历史成绩。五、数据库/数据模型设计SQLite 中设计了 5 张核心表。users 用户表字段说明id用户 IDusername用户名唯一password_hash加盐哈希后的密码rolestudent 或 teachercreated_at创建时间tokens 登录令牌表字段说明token登录 Tokenuser_id所属用户created_at创建时间exams 考试表字段说明id考试 IDtitle考试标题description考试说明duration_minutes考试时长published是否发布owner_id创建教师questions 题目表字段说明exam_id所属考试content题干option_a ~ option_d四个选项correct_answer正确答案score分值submissions 提交记录表字段说明exam_id考试 IDuser_id学生 IDscore得分total_score总分answers_json学生答案 JSONsubmitted_at提交时间六、后端接口设计方法地址说明鉴权POST/api/auth/register用户注册否POST/api/auth/login用户登录否GET/api/auth/me当前用户是POST/api/auth/logout退出登录是GET/api/exams考试列表是POST/api/exams教师创建考试教师GET/api/exams/{exam_id}考试详情是POST/api/exams/{exam_id}/questions教师添加题目教师POST/api/exams/{exam_id}/publish教师发布考试教师POST/api/exams/{exam_id}/submit学生提交试卷学生GET/api/submissions/me我的提交记录是七、前端页面设计前端使用 Vue 3 单文件组件实现主要页面区域如下顶部 Hero 区域展示系统名称、当前登录用户和退出按钮。登录/注册区域未登录时展示支持选择学生或教师角色。考试列表侧栏已登录用户可查看考试列表教师看到自己的草稿和已发布考试学生只看到已发布考试。教师出题台教师创建考试、添加题目、发布考试。考试详情与答题区学生选择答案并提交教师可查看正确答案。我的成绩区域学生查看历史提交成绩。八、核心代码讲解1. 数据库初始化backend/app/database.py中使用 sqlite3 创建连接并在应用启动时自动建表definit_db():connget_connection()curconn.cursor()cur.execute(PRAGMA foreign_keys ON)cur.executescript( CREATE TABLE IF NOT EXISTS users (...); CREATE TABLE IF NOT EXISTS exams (...); CREATE TABLE IF NOT EXISTS questions (...); CREATE TABLE IF NOT EXISTS submissions (...); )conn.commit()conn.close()SQLite 的优点是部署简单不需要额外安装数据库服务非常适合教学项目和中小型原型系统。2. 密码哈希与登录 Tokenbackend/app/crud.py中没有明文保存密码而是使用 PBKDF2-SHA256defhash_password(password:str)-str:saltsecrets.token_hex(16)digesthashlib.pbkdf2_hmac(sha256,password.encode(),salt.encode(),120_000)returnfpbkdf2_sha256$120000${salt}${digest.hex()}登录成功后生成随机 Token写入tokens表defcreate_token(user_id:int)-str:tokensecrets.token_urlsafe(32)conn.execute(INSERT INTO tokens(token, user_id) VALUES (?, ?),(token,user_id))conn.commit()returntoken3. FastAPI 鉴权依赖backend/app/main.py通过依赖函数解析请求头defget_current_user(authorization:Optional[str]Header(defaultNone)):ifnotauthorizationornotauthorization.startswith(Bearer ):raiseHTTPException(status_code401,detail缺少登录凭证)tokenauthorization.removeprefix(Bearer ).strip()usercrud.get_user_by_token(token)ifnotuser:raiseHTTPException(status_code401,detail登录已失效)returnuser教师接口再叠加角色校验defrequire_teacher(userDepends(get_current_user)):ifuser[role]!teacher:raiseHTTPException(status_code403,detail仅教师账号可操作)returnuser这样可以保证出题、发布考试等关键操作不会被学生账号调用。4. 自动判分逻辑学生提交答案时后端读取题目正确答案并计算得分forqinquestions:totalq[score]ifanswers.get(str(q[id]))q[correct_answer]:scoreq[score]提交记录会保存学生答案、得分、总分和提交时间便于后续成绩查询。5. Vue 3 API 封装frontend/src/api.js负责统一添加 Tokenexportasyncfunctionrequest(path,options{}){constheaders{Content-Type:application/json,...(options.headers||{})}consttokengetToken()if(token)headers.AuthorizationBearer${token}constresawaitfetch(${API_BASE}${path},{...options,headers})constdataawaitres.json().catch(()({}))if(!res.ok)thrownewError(data.detail||请求失败)returndata}页面组件只需要调用api.login()、api.listExams()、api.submitExam()等方法不必在每个按钮事件里重复拼接请求头。九、部署与运行步骤项目目录如下project/ backend/ frontend/ README.md1. 启动后端cdproject/backend python3-mvenv .venvsource.venv/bin/activate pipinstall-rrequirements.txt uvicorn app.main:app--reload--host0.0.0.0--port8000后端默认地址http://127.0.0.1:8000接口文档地址http://127.0.0.1:8000/docs。2. 启动前端cdproject/frontendnpminstallnpmrun dev前端默认通过 Vite 启动浏览器访问http://127.0.0.1:5173。3. 初始化使用流程打开前端页面注册教师账号。教师登录创建考试并添加题目。点击发布考试。注册学生账号并登录。学生进入考试选择答案并提交。系统返回分数学生可查看历史成绩。十、项目总结本文完成了一个基于FastAPI SQLite Vue 3Vite的校园在线考试平台。项目覆盖了全栈开发中的常见关键点后端 RESTful API 设计SQLite 数据库建模注册、登录、Token 鉴权角色权限控制Vue 3 前端状态管理和接口调用在线考试的业务闭环出题、发布、答题、判分、查成绩。如果继续扩展可以增加倒计时、防重复提交、题库管理、主观题阅卷、班级管理、成绩导出、考试监控等功能使其进一步接近真实校园考试系统。项目代码下载链接
