在线考试系统小程序

在线考试系统小程序

Vue3 管理后台 + Express 后端 + 微信小程序 + MySQL。

管理员在 Web 端维护题库与考试，学员在小程序端登录答题、查分与复习错题。

---

一、目录结构

online-exam/
├── db_online_exam.sql       # 数据库导出脚本（Navicat，含表结构与数据）
├── 项目说明.md               # 本文件
├── 运行手册.md               # 环境与启动步骤
│
├── express/                 # 后端 API 服务（默认端口 5002）
│   ├── bin/www              # 启动入口
│   ├── app.js               # Express 应用
│   ├── config/              # 数据库、JWT 等配置
│   ├── middleware/          # 登录鉴权中间件
│   ├── controllers/         # 控制器目录（预留）
│   ├── services/            # 服务层目录（预留）
│   ├── routes/              # 路由
│   │   ├── index.js         # 总入口
│   │   ├── public-user.js   # 登录注册、资料、改密
│   │   ├── upload.js        # 文件上传
│   │   ├── admin/           # 管理端业务路由
│   │   └── user/            # 小程序端业务路由
│   ├── util/                # 工具与阅卷辅助
│   ├── public/images/       # 上传图片存放目录
│   ├── .env.example         # 环境变量模板
│   └── package.json
│
├── web/                     # 管理后台前端（默认端口 9402）
│   ├── src/
│   │   ├── api/             # 请求封装
│   │   ├── assets/          # 静态与 token 工具
│   │   ├── components/      # 富文本编辑器、上传组件等
│   │   ├── router/          # 路由
│   │   ├── stores/          # Pinia
│   │   ├── styles/          # 全局样式
│   │   └── views/
│   │       ├── Login.vue    # 管理员登录
│   │       └── admin/       # 后台各业务页
│   ├── .env.example
│   └── package.json
│
└── min/                     # 微信小程序（学员端）
    ├── pages/
    │   ├── login/           # 登录 / 注册
    │   ├── index/           # 考试首页（Tab）
    │   ├── info/            # 资讯列表与详情（Tab）
    │   ├── my/              # 我的（Tab）
    │   ├── examDetail/      # 考试详情
    │   ├── examTaking/      # 答题中
    │   ├── examResult/      # 成绩与解析
    │   ├── examRecords/     # 考试记录
    │   ├── wrongBook/       # 错题本
    │   ├── userInfo/        # 个人资料
    │   └── changePassword/  # 修改密码
    ├── components/          # 富文本解析等组件（如 wxParse）
    ├── utils/api.js         # 接口封装与 BASE_URL
    ├── images/              # 本地图片资源
    └── app.json

---

二、功能说明

1. 管理后台（Web）

面向管理员，浏览器访问。

功能	说明
登录	管理员账号登录，会话使用 Token
工作台	展示用户数、考试数、题目数、交卷数及近 7 日用户趋势
科目管理	维护考试科目（分类），供题库与考试归属使用
题库管理	维护题目：单选、多选、判断、填空、简答；可按科目筛选；含选项、答案、解析、分值
考试管理	创建/编辑考试：标题、说明、时长、科目、可考次数（0=不限，1/2/3=限定）、状态（草稿 / 即将开始 / 进行中 / 已结束）；从题库选题组卷
考试结果	查看学员交卷记录、得分、用时等信息
公告资讯	发布公告或资讯，富文本编辑，支持草稿与发布
轮播图	上传图片、配置跳转链接、排序与启用状态，展示在小程序首页
管理员管理	增删管理员账号、重置密码
个人资料	查看与修改当前管理员姓名、手机、邮箱；修改登录密码

2. 学员端（微信小程序）

面向考试学员，三个底部 Tab：考试、资讯、我的。

功能	说明
登录 / 注册	账号密码登录；可注册新学员；演示账号见运行手册
考试首页	轮播图、最新公告入口、考试列表；支持按科目与关键词筛选
考试详情	展示考试说明、时长、题量、可考次数；次数用尽可查看最近成绩
在线答题	倒计时；支持单选/多选/判断/填空/简答；上一题/下一题、答题卡跳转、左右滑切换；交卷确认；时间到自动交卷
成绩页	得分、用时、对错与解析
考试记录	历史交卷列表与汇总统计，可进入成绩详情
错题本	汇总历史错题，展示正确答案与解析
资讯	公告与资讯列表、详情（HTML 富文本）
个人资料	修改昵称、手机、邮箱、头像（上传至服务器）
修改密码	校验原密码后设置新密码
退出登录	清除本地登录态

3. 后端（Express）

为管理后台与小程序提供统一服务，主要职责：

• 用户登录注册、资料与改密
• 科目、题库、考试、结果等后台业务
• 小程序考试列表、详情、交卷阅卷、记录、错题本
• 轮播图与公告资讯
• 图片上传（保存到 express/public/images，库中存相对路径）

4. 业务规则（功能相关）

• 可考次数：考试可设 0（无限）或 1/2/3 次；达到上限后不可再答。
• 考试状态：仅「进行中」可开始答题并交卷。
• 自动阅卷：单选、多选、判断、填空自动判分；简答暂不自动给分。
• 满分：以试卷题目分值合计为准，成绩页按此展示。
• 内容发布：小程序端只展示已「发布」的公告/资讯；草稿仅后台可见。

5. 演示数据（db_online_exam.sql）

根目录 db_online_exam.sql 为 Navicat 导出的全库脚本（表结构 + 数据）。导入后大致包含：

• 管理员 admin、学员 test（密码见运行手册）
• 科目、题库、进行中的演示考试
• 公告、资讯、轮播及部分考试记录示例

---

三、默认端口与角色

端	端口 / 入口
后端	http://127.0.0.1:5002
管理后台	http://localhost:9402
小程序	微信开发者工具打开 min/

角色	使用端
管理员	Web 管理后台
学员	微信小程序

环境安装与启动步骤见 运行手册.md。

获取完整源码

• 网站：AI源码
• 本项目详情：https://www.aiyuanma.vip/posts/online-exam