⁴

基于springboot+微信小程序的模拟软件资格水平考试平台

尼哥AI工具箱

2026-06-29 08:26

阅读539

尼哥AI工具箱

2026-06-29 08:26

阅读 539

考试学习管理系统

一个基于 Spring Boot + Vue 3 + 微信小程序的在线考试学习管理系统，支持在线考试、复习资料管理、成绩统计等功能。

项目简介

本系统是一个完整的在线考试学习平台，包含管理端（Web）和用户端（微信小程序）两部分。管理员可以通过 Web 端管理用户、科目、试卷、试题和复习资料；学生可以通过小程序进行在线考试、查看复习资料、查询考试成绩等。

技术架构

后端技术栈

框架： Spring Boot 3.x
ORM： MyBatis Plus
数据库： MySQL 8.0
认证： JWT Token
构建工具： Maven

管理端（Web）

框架： Vue 3.4 + Vite 5.0
UI 库： Element Plus 2.5
路由： Vue Router 4.2
状态管理： Pinia 2.1
HTTP 客户端： Axios

小程序端

框架： 微信小程序原生开发
语言： WXML + WXSS + JavaScript

项目结构

▼
text
复制代码
mnksxt/
├── mnk/                          # 后端项目（Spring Boot）
│   ├── src/main/java/com/mnk/
│   │   ├── controller/           # 控制器层
│   │   ├── service/              # 服务层
│   │   ├── mapper/               # 数据访问层
│   │   ├── entity/               # 实体类
│   │   ├── common/               # 公共类
│   │   ├── config/               # 配置类
│   │   ├── interceptor/          # 拦截器
│   │   └── utils/                # 工具类
│   └── src/main/resources/
│       └── application.yml       # 配置文件
├── mnkvue/                       # 管理端（Vue 3）
│   ├── src/
│   │   ├── api/                  # API 接口
│   │   ├── views/                # 页面组件
│   │   ├── router/               # 路由配置
│   │   ├── store/                # 状态管理
│   │   └── utils/                # 工具类
│   └── vite.config.js            # Vite 配置
├── mnkxcx/                       # 小程序端
│   ├── pages/                    # 页面
│   ├── api/                      # API 接口
│   ├── utils/                    # 工具类
│   ├── app.js                    # 入口文件
│   └── app.json                  # 配置文件
└── monitest.sql                  # 数据库脚本

功能模块

管理端功能

1. 用户管理

用户列表查看（分页）
新增用户
编辑用户信息
删除用户
用户搜索

2. 科目管理

科目列表
新增科目
编辑科目
删除科目

3. 试卷管理

试卷列表
新增试卷
编辑试卷
删除试卷
试卷启用/禁用
按科目和级别分类
试题管理（直接跳转）

4. 试题管理

试题列表（支持按试卷筛选）
新增试题（支持 4 种题型）
- 单选题
- 多选题
- 判断题
- 填空题
多图片上传（支持批量上传）
图片预览和删除
编辑试题
删除试题
按级别分类

5. 考试记录管理

查看所有考试记录
显示用户名
按用户/试卷查询
查看详细答题情况
删除记录

6. 题目收藏管理

查看所有收藏记录
按用户查询
删除收藏

7. 复习资料管理

资料列表
新增资料
编辑资料
删除资料
按科目和级别分类
科目下拉选择
图片上传
视频上传

小程序端功能

1. 用户模块

用户注册
用户登录
个人信息查看
个人信息修改
退出登录
登录拦截（未登录自动跳转）

2. 在线考试

试卷列表浏览（按级别分类）
在线答题
- 单选题
- 多选题
- 判断题
- 填空题
题目图片显示和预览
考试倒计时
自动提交
成绩查看
答案解析
答题记录详情

3. 复习资料

资料列表（分页加载）
按科目筛选
按级别筛选
资料详情查看
视频在线播放
点击量统计

4. 题目收藏

收藏题目（答题后）
我的收藏列表
收藏题目详情查看
取消收藏
收藏状态显示

5. 个人中心

个人信息展示
考试记录查看
我的收藏
成绩统计
个人信息修改

数据库设计

核心表结构

yonghu（用户表）

id：主键
yonghuming：用户名
mima：密码
xingming：姓名
xingbie：性别
touxiang：头像
shouji：手机号
youxiang：邮箱
addtime：添加时间

kemu（科目表）

id：主键
kemu：科目名称
addtime：添加时间

exampaper（试卷表）

id：主键
name：试卷名称
kemu：科目
level：级别（初级/中级/高级）
time：考试时长
status：状态（0-禁用，1-启用）
addtime：添加时间

examquestion（试题表）

id：主键
paperid：试卷ID
papername：试卷名称
level：级别（初级/中级/高级）
type：题型（0-单选，1-多选，2-判断，3-填空）
questionname：题目
options：选项（JSON格式）
answer：答案
analysis：解析
images：图片（多张，逗号分隔）
score：分值
sequence：序号
addtime：添加时间

examrecord（考试记录表）

id：主键
userid：用户ID
username：用户名
paperid：试卷ID
papername：试卷名称
questionid：试题ID
questionname：题目名称
options：选项
score：分值
answer：正确答案
analysis：解析
batchid：批次ID
myanswer：我的答案
myscore：得分
addtime：答题时间

questioncollect（题目收藏表）

id：主键
userid：用户ID
username：用户名
questionid：题目ID
questionname：题目名称
papername：试卷名称
level：级别
addtime：收藏时间
唯一索引：(userid, questionid)

fuxiziliao（复习资料表）

id：主键
ziliaomingcheng：资料名称
kemu：科目
level：级别（初级/中级/高级）
tupian：图片
ziliaoshipin：视频
xiangqing：详情
faburiqi：发布日期
clicknum：点击量
clicktime：点击时间
addtime：添加时间

快速开始

环境要求

JDK 17+
Node.js 16+
MySQL 8.0+
Maven 3.6+
微信开发者工具

1. 数据库配置

▼
sql
复制代码
-- 创建数据库
CREATE DATABASE monitest DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

-- 导入数据
mysql -u root -p monitest < monitest.sql

2. 后端启动

▼
bash
复制代码
cd mnk

# 修改配置文件 src/main/resources/application.yml
# 配置数据库连接信息

# 启动项目
mvn spring-boot:run

# 或使用 IDEA 直接运行 MnkApplication

后端服务地址：http://localhost:8080/mnk

3. 管理端启动

▼
bash
复制代码
cd mnkvue

# 安装依赖
npm install

# 启动开发服务器
npm run dev

管理端地址：http://localhost:3000

默认管理员账号：

用户名：admin
密码：admin

4. 小程序启动

打开微信开发者工具
导入项目，选择 mnkxcx 目录
配置 AppID（测试可使用测试号）
点击"详情" -> 勾选"不校验合法域名"
编译运行

测试账号：

用户名：001
密码：001

配置说明

后端配置（application.yml）

▼
yaml
复制代码
server:
  port: 8080                      # 服务端口
  servlet:
    context-path: /mnk            # 上下文路径

spring:
  datasource:
    url: jdbc:mysql://localhost:3307/monitest  # 数据库地址
    username: root                # 数据库用户名
    password: root                # 数据库密码
  jackson:
    date-format: yyyy-MM-dd HH:mm:ss  # 日期格式
    time-zone: GMT+8              # 时区

jwt:
  secret: mnk-secret-key-2026     # JWT 密钥
  expiration: 604800000           # 过期时间（7天）

file:
  upload-path: d:/idea/mnksxt/mnk/upload/  # 文件上传路径

前端配置

管理端（vite.config.js）

▼
javascript
复制代码
server: {
  port: 3000,
  proxy: {
    '/mnk': {
      target: 'http://localhost:8080',
      changeOrigin: true
    }
  }
}

小程序（app.js）

▼
javascript
复制代码
globalData: {
  baseUrl: 'http://localhost:8080/mnk'  // 后端接口地址
}

接口文档

基础 URL

▼
text
复制代码
http://localhost:8080/mnk

主要接口

用户相关

POST /yonghu/login - 用户登录
POST /yonghu/register - 用户注册
GET /yonghu/page - 用户列表（分页）
POST /yonghu/save - 新增用户
POST /yonghu/update - 更新用户
POST /yonghu/delete - 删除用户

试卷相关

GET /exampaper/page - 试卷列表（分页）
GET /exampaper/list - 试卷列表（不分页）
GET /exampaper/info/{id} - 试卷详情
POST /exampaper/save - 新增试卷
POST /exampaper/update - 更新试卷
POST /exampaper/delete - 删除试卷

试题相关

GET /examquestion/page - 试题列表（分页）
GET /examquestion/list - 试题列表（不分页，支持按 questionid 查询）
GET /examquestion/info/{id} - 试题详情
POST /examquestion/save - 新增试题
POST /examquestion/update - 更新试题
POST /examquestion/delete - 删除试题

考试记录相关

GET /examrecord/page - 考试记录列表（分页）
GET /examrecord/list - 考试记录列表（不分页）
GET /examrecord/info/{id} - 考试记录详情
POST /examrecord/save - 保存答题记录
GET /examrecord/score - 获取考试成绩
POST /examrecord/delete - 删除记录

题目收藏相关

GET /questioncollect/list - 收藏列表
GET /questioncollect/check - 检查是否已收藏
POST /questioncollect/save - 收藏题目
POST /questioncollect/cancel - 取消收藏
POST /questioncollect/delete - 删除收藏

复习资料相关

GET /fuxiziliao/page - 资料列表（分页）
GET /fuxiziliao/detail/{id} - 资料详情
POST /fuxiziliao/save - 新增资料
POST /fuxiziliao/update - 更新资料
POST /fuxiziliao/delete - 删除资料

文件上传

POST /file/upload - 文件上传

项目特色

1. 美观的 UI 设计

渐变色背景
卡片式布局
圆角设计
阴影效果
响应式交互
蓝色主题色

2. 完整的考试流程

试卷管理（按级别分类）
试题管理（4 种题型）
题目图片上传（支持多张）
在线答题
倒计时功能
自动提交
成绩统计
答案解析
答题记录详情

3. 题目收藏功能

答题后收藏错题
我的收藏列表
收藏题目详情
查看正确答案和解析
取消收藏

4. 视频学习功能

视频上传
在线播放
全屏支持
点击量统计

5. 级别分类系统

初级、中级、高级分类
试卷按级别筛选
试题按级别管理
资料按级别分类

6. 数据安全

JWT Token 认证
密码加密存储
接口权限控制
登录拦截

技术亮点

前后端分离架构 - 清晰的职责划分，便于维护和扩展
RESTful API 设计 - 统一的接口规范，易于理解和使用
组件化开发 - 可复用的组件设计，提高开发效率
响应式布局 - 适配不同屏幕尺寸
数据缓存 - 提升用户体验
完善的错误处理 - 统一的异常处理机制

注意事项

开发环境

数据库端口：默认 3307，如需修改请同步修改配置文件
跨域配置：开发环境已配置代理，生产环境需配置 CORS
文件上传路径：需确保目录存在且有写入权限
小程序域名：开发环境需勾选"不校验合法域名"

生产环境

修改 JWT 密钥：使用更复杂的密钥
配置 HTTPS：小程序要求使用 HTTPS
配置服务器域名：在微信公众平台配置合法域名
数据库优化：添加索引，优化查询
文件存储：建议使用 OSS 等云存储服务

常见问题

1. 后端启动失败

检查数据库是否启动
检查数据库连接配置是否正确
检查端口是否被占用

2. 管理端无法访问后端

检查后端服务是否启动
检查代理配置是否正确
检查浏览器控制台是否有错误

3. 小程序无法加载数据

检查后端服务是否启动
检查 baseUrl 配置是否正确
检查是否勾选"不校验合法域名"

4. 图片/视频上传失败

检查上传路径是否存在
检查目录是否有写入权限
检查文件大小是否超过限制

5. 日期格式错误

确保前端发送的日期格式为 yyyy-MM-dd 或 yyyy-MM-dd HH:mm:ss
检查实体类的 @JsonFormat 注解配置

后续优化建议

功能扩展

性能优化

安全加固

用户体验

小程序-考试记录.png

小程序-考试结果.png

小程序-首页.png

小程序-题目收藏.png

小程序-题目详情.png

小程序-题目详情2.png

小程序-题目详情3.png

小程序-我的收藏.png

小程序-在线考试.png

管理端-复习资料-列表.png

管理端-考试记录-列表.png

管理端-科目管理-编辑.png

管理端-科目管理-列表.png

管理端-试卷管理-编辑.png

管理端-试卷管理-列表.png

管理端-试题管理-编辑.png

管理端-试题管理-列表.png

管理端-首页.png

管理端-用户管理-编辑.png

管理端-用户管理-列表.png

小程序-答题页面.png

小程序-登录.png

小程序-复习资料列表.png

小程序-复习资料详情.png

小程序-个人信息.png

小程序-个人中心.png

问答助学