Python全栈项目--校园在线考试平台

一、项目简介

在线考试是校园信息化建设中非常常见的业务场景。传统纸质考试存在试卷印刷、人工阅卷、成绩统计效率低等问题，而在线考试平台可以把“教师出题、学生答题、系统判分、成绩查询”串成一条完整流程。

本文实现一个可运行的 Python 全栈项目：校园在线考试平台。项目面向两类用户：

• 教师：注册/登录后创建考试、添加选择题、发布试卷。
• 学生：注册/登录后查看已发布考试、在线答题、提交试卷并查看成绩。

本项目不是单纯的算法演示，而是一个包含后端 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 用户表

tokens 登录令牌表

exams 考试表

questions 题目表

submissions 提交记录表

六、后端接口设计

七、前端页面设计

前端使用 Vue 3 单文件组件实现，主要页面区域如下：

1. 顶部 Hero 区域：展示系统名称、当前登录用户和退出按钮。
2. 登录/注册区域：未登录时展示，支持选择学生或教师角色。
3. 考试列表侧栏：已登录用户可查看考试列表；教师看到自己的草稿和已发布考试，学生只看到已发布考试。
4. 教师出题台：教师创建考试、添加题目、发布考试。
5. 考试详情与答题区：学生选择答案并提交；教师可查看正确答案。
6. 我的成绩区域：学生查看历史提交成绩。

八、核心代码讲解

1. 数据库初始化

backend/app/database.py 中使用 sqlite3 创建连接，并在应用启动时自动建表：

def init_db():
    conn = get_connection()
    cur = conn.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. 密码哈希与登录 Token

backend/app/crud.py 中没有明文保存密码，而是使用 PBKDF2-SHA256：

def hash_password(password: str) -> str:
    salt = secrets.token_hex(16)
    digest = hashlib.pbkdf2_hmac('sha256', password.encode(), salt.encode(), 120_000)
    return f"pbkdf2_sha256$120000${salt}${digest.hex()}"

登录成功后生成随机 Token，写入 tokens 表：

def create_token(user_id: int) -> str:
    token = secrets.token_urlsafe(32)
    conn.execute('INSERT INTO tokens(token, user_id) VALUES (?, ?)', (token, user_id))
    conn.commit()
    return token

3. FastAPI 鉴权依赖

backend/app/main.py 通过依赖函数解析请求头：

def get_current_user(authorization: Optional[str] = Header(default=None)):
    if not authorization or not authorization.startswith('Bearer '):
        raise HTTPException(status_code=401, detail='缺少登录凭证')
    token = authorization.removeprefix('Bearer ').strip()
    user = crud.get_user_by_token(token)
    if not user:
        raise HTTPException(status_code=401, detail='登录已失效')
    return user

教师接口再叠加角色校验：

def require_teacher(user=Depends(get_current_user)):
    if user['role'] != 'teacher':
        raise HTTPException(status_code=403, detail='仅教师账号可操作')
    return user

这样可以保证出题、发布考试等关键操作不会被学生账号调用。

4. 自动判分逻辑

学生提交答案时，后端读取题目正确答案并计算得分：

for q in questions:
    total += q['score']
    if answers.get(str(q['id'])) == q['correct_answer']:
        score += q['score']

提交记录会保存学生答案、得分、总分和提交时间，便于后续成绩查询。

5. Vue 3 API 封装

frontend/src/api.js 负责统一添加 Token：

export async function request(path, options = {}) {
  const headers = { 'Content-Type': 'application/json', ...(options.headers || {}) }
  const token = getToken()
  if (token) headers.Authorization = `Bearer ${token}`
  const res = await fetch(`${API_BASE}${path}`, { ...options, headers })
  const data = await res.json().catch(() => ({}))
  if (!res.ok) throw new Error(data.detail || '请求失败')
  return data
}

页面组件只需要调用 api.login()、api.listExams()、api.submitExam() 等方法，不必在每个按钮事件里重复拼接请求头。

九、部署与运行步骤

项目目录如下：

project/
  backend/
  frontend/
  README.md

1. 启动后端

cd project/backend
python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
uvicorn app.main:app --reload --host 0.0.0.0 --port 8000

后端默认地址：http://127.0.0.1:8000，接口文档地址：http://127.0.0.1:8000/docs。

2. 启动前端

cd project/frontend
npm install
npm run dev

前端默认通过 Vite 启动，浏览器访问 http://127.0.0.1:5173。

3. 初始化使用流程

1. 打开前端页面，注册教师账号。
2. 教师登录，创建考试并添加题目。
3. 点击发布考试。
4. 注册学生账号并登录。
5. 学生进入考试，选择答案并提交。
6. 系统返回分数，学生可查看历史成绩。

十、项目总结

本文完成了一个基于 FastAPI + SQLite + Vue 3（Vite） 的校园在线考试平台。项目覆盖了全栈开发中的常见关键点：

• 后端 RESTful API 设计；
• SQLite 数据库建模；
• 注册、登录、Token 鉴权；
• 角色权限控制；
• Vue 3 前端状态管理和接口调用；
• 在线考试的业务闭环：出题、发布、答题、判分、查成绩。

如果继续扩展，可以增加倒计时、防重复提交、题库管理、主观题阅卷、班级管理、成绩导出、考试监控等功能，使其进一步接近真实校园考试系统。

项目代码

下载链接