产品介绍
云帆考试系统是一款基于SpringBoot3+Vue3前后端分离架构的在线学习考试系统，系统采用Java语言开发，系统模块设计清晰、文档完善、功能稳定，无论是作为成品使用或者二次开发，都是极佳的选择。
在线试用
电脑端：https://exam.yfhl.net
移动端：
| H5手机端 | 微信小程序 |
|---|---|
 |  |
在线咨询
微信：gyh_yinzi（微信号）或搜索手机18603038204
手机：18603038204（郭）
邮箱：835487894@qq.com
技术栈
服务端
- Java版本: JDK17或JDK21
- 技术框架: SpringBoot3,MyBatisPlus,Shiro,Redis等
- 数据库: 默认MySQL5.7或MySQL8.0，可适配达梦、人大金仓、南大通用国产数据库
电脑端
- Vue版本: 3.5+
- 框架组件: ElementPlus,Pinia,Tinymce,ECharts,UNO-CSS等
- NODE&NPM版本: Node v23.4.0, NPM 10.9.2
- 编译&发行: Vite
移动端
- Vue版本: 3.4+
- 框架组件: UNI-UI,Pinia
- NODE&NPM版本: Node v23.4.0, NPM 10.9.2
- 编译&发行: HBilderX Vite
服务端
服务端基于SpringBoot3开发，模块划分清晰，目录结构如下：
yf-exam-server 后端服务主项目（Java Maven多模块）
│ ├── pom.xml Maven父项目文件，统一版本引用
│ ├── yf-ability 公共能力模块：验证码/基础配置/人脸/文件上传/权限等
│ ├── yf-core 基础模块：接口规范/异常处理/工具类等
│ ├── yf-job 定时任务模块：SpringQuartz统一任务管理
│ ├── yf-modules 业务模块
│ │ ├── yf-module-activity 活动报名模块
│ │ ├── yf-module-battle 知识竞赛模块
│ │ ├── yf-module-cert 证书模块
│ │ ├── yf-module-course 课程模块
│ │ ├── yf-module-exam 在线考试模块
│ │ ├── yf-module-mall 积分商城模块
│ │ ├── yf-module-notify 消息通知模块
│ │ ├── yf-module-openapi 开放接口模块
│ │ ├── yf-module-pay 支付模块
│ │ ├── yf-module-plan 培训计划模块，用于串联功能、定制培训学习流程
│ │ ├── yf-module-repo 题库模块：试题管理/题库训练/错题本
│ │ ├── yf-module-stat 统计模块
│ │ ├── yf-module-survey 问卷调查模块
│ │ └── yf-module-system 系统模块：用户/角色/架构/群组/公告/数据字典等
│ └── yf-web 前端接口业务调用模块：Web项目，开放业务接口
核心项目：yf-core
定义了基础的接口通信规范协议、注解类、工具类、枚举数据等等
基础能力：yf-ability
基础能力模块，里面包含图形验证码、短信验证码、文件上传、导入导出、人脸识别、文档转换等一些基础能力
定时任务：yf-job
定时任务模块、用于处理系统中的定时任务、如：证书发放、文档转换、数据处理、强制交卷等业务逻辑处理，用于处理各个系统不同模块的业务解耦，这里同时也充当了类似消息列队的功能；
模块列表：yf-modules
系统的各个分业务模块项目，请参考以上文件结构中的说明，其中yf-module-system为系统核心项目，处理用户角色权限菜单等核心逻辑
接口项目：yf-web
此项目引用全部子项目，以接口的方式为前端提供服务，类似于微服务中的网关项目
前端VUE项目
VUE前端项目用于实现PC学员端及管理员后台功能（学员端和管理端是放在一起的），用户登录后，根据角色来自动跳转到学员端或者管理端；项目基于Vue3.0+ElementPlus搭建
文件结构
.
├── .env.demo 演示环境变量
├── .env.development 开发环境变量
├── .env.production 生产环境变量
├── .prettierrc Prettier 代码格式化配置
├── eslint.config.js ESLint 代码规范配置
├── index.html 应用入口 HTML 文件
├── package.json 项目配置文件（依赖/脚本）
├── prettier.config.js Prettier 工程配置
├── uno.config.js UnoCSS 原子化 CSS 配置
├── vite.config.js Vite 构建工具配置
├── public 静态文件目录
│ ├── favicon.ico 站标/浏览器地址栏图标
│ ├── pdf PDF 阅读器资源
│ ├── player 视频播放器资源
│ ├── prismplayer Prism 播放器资源
│ └── tinymce TinyMCE 富文本编辑器离线版
└── src 源码目录
├── App.vue 根组件入口
├── main.js Vue 应用核心入口文件
├── permission.js 路由权限守卫/鉴权逻辑
├── settings.js 全局静态配置
├── api 接口层（按业务模块划分）
│ ├── common.js 公共接口
│ ├── ability/ 能力/权限相关接口
│ ├── activity/ 活动相关接口
│ ├── battle/ 竞赛相关接口
│ ├── cert/ 证书相关接口
│ ├── client/ 客户端/终端相关接口
│ ├── course/ 课程相关接口
│ ├── exam/ 考试相关接口
│ ├── mall/ 商城相关接口
│ ├── notify/ 通知相关接口
│ ├── order/ 订单相关接口
│ ├── paper/ 试卷相关接口
│ ├── plan/ 学习计划相关接口
│ ├── qu/ 试题相关接口
│ ├── repo/ 题库相关接口
│ ├── stat/ 统计相关接口
│ ├── survey/ 问卷调查相关接口
│ ├── sys/ 系统管理相关接口
│ └── tmpl/ 模板相关接口
├── assets 静态资源目录（图片/字体等）
│ ├── dash/ 仪表盘相关资源
│ ├── images/ 图片资源
│ ├── tinymce/ TinyMCE 编辑器资源
│ └── web/ 网站公共资源
├── components 通用业务组件目录
│ ├── index.js 组件全局注册入口
│ ├── BatchCatalogDialog/ 批量目录选择弹窗
│ ├── CertSelect/ 证书选择器
│ ├── ChapterSelect/ 章节选择器
│ ├── CourseSelect/ 课程选择器
│ ├── DataGrid/ 数据表格组件
│ ├── DateTimePicker/ 日期时间选择器
│ ├── DepartTreeSelect/ 部门树选择器
│ ├── DicListSelect/ 字典列表选择器
│ ├── FileUpload/ 文件上传组件
│ ├── HeaderSearch/ 顶部搜索组件
│ ├── ImageCropper/ 图片裁剪组件
│ ├── ImportExcel/ Excel 导入组件
│ ├── KeyPointSelect/ 知识点选择器（弹窗）
│ ├── KeyPointTreeSelect/ 知识点树选择器
│ ├── MarkdownViewer/ Markdown 预览器
│ ├── Pagination/ 分页组件
│ ├── PdfReader/ PDF 阅读器
│ ├── Recorder/ 录音组件
│ ├── SvgIcon/ SVG 图标组件
│ ├── Tinymce/ TinyMCE 编辑器组件
│ ├── VideoPlayer/ 视频播放器
│ ├── WebSocket/ WebSocket 通信组件
│ ├── YfTreeSelect/ 云帆树形选择器
│ └── ...（80+ 个封装组件）
├── directive 自定义指令
│ ├── draggable/ 拖拽指令
│ ├── permission/ 权限控制指令
│ └── sign-html/ HTML 签名指令
├── filters 过滤器
│ └── index.js 全局过滤器
├── hooks 组合式函数（Vue 3 Composables）
│ ├── useShareDialogBase.js 分享弹窗逻辑
│ ├── useTableOptions.js 表格选项逻辑
│ ├── useTableQuery.js 表格请求逻辑
│ └── useUploadBase.js 上传基础逻辑
├── i18n 国际化多语言
│ ├── index.js 国际化入口
│ └── lang/ 语言包文件
├── icons SVG 图标
│ ├── index.js 图标注册入口
│ ├── svg/ 原始 SVG 图标文件
│ └── svgo.yml SVG 优化配置
├── layout 布局文件
│ ├── index.vue 主布局入口
│ ├── Layout.vue 后台管理布局
│ ├── UserLayout.vue 用户中心布局
│ ├── WebLayout.vue 官网前端布局
│ ├── EmptyLayout.vue 空白布局
│ ├── components/ 布局子组件（侧边栏/导航栏等）
│ └── composables/ 布局组合式函数
├── router 路由
│ ├── index.js 路由主入口
│ └── modules/ 按模块拆分的路由文件
├── store 状态管理（Pinia）
│ ├── index.js 状态管理入口
│ └── modules/ 按模块拆分的状态文件
├── styles 样式表
│ ├── index.scss 样式入口
│ ├── variables.scss 全局变量
│ ├── mixin.scss SCSS Mixin
│ ├── element-plus-fixes.scss Element Plus 样式覆盖
│ ├── element-ui.scss Element UI 兼容样式
│ ├── element-variables.scss Element 主题变量
│ ├── transition.scss 过渡动画
│ ├── sidebar.scss 侧边栏样式
│ ├── page.scss 页面公共样式
│ └── login.scss 登录页样式
├── utils 工具类
│ ├── request.js Axios 请求封装
│ ├── auth.js 认证 Token 管理
│ ├── permission.js 权限工具函数
│ ├── validate.js 表单验证规则
│ ├── upload.js 上传工具
│ ├── calc.js 计算工具
│ ├── common.js 通用工具
│ ├── watermark.js 水印生成
│ ├── scroll-to.js 滚动工具
│ ├── clipboard.js 剪贴板工具
│ ├── sse.js SSE 长连接
│ ├── base64.js Base64 编解码
│ ├── qu-parser.js 试题解析器
│ ├── file-utils.js 文件工具
│ ├── msg.js 消息提示工具
│ └── theme.js 主题切换工具
└── views 视图页面目录
├── index.vue 首页入口
├── admin/ 后台管理页面
├── dashboard/ 仪表盘页面
├── login/ 登录页面
├── profile/ 个人中心页面
├── redirect/ 重定向页面
└── web/ 官网前端页面
参考网站
ElementPlus： https://element-plus.org/zh-CN/
VUE 基础： https://cn.vuejs.org
移动端UNI-APP项目
移动端基于UNI-APP + Vue3.0开发，一个项目支持发布到不同的平台、如：H5、小程序、APP等
文件结构
.
├── .env 默认环境变量配置
├── .env.development 开发环境变量配置
├── .env.production 生产环境变量配置
├── App.vue 应用入口组件
├── api 接口目录，所有与后端通信的接口都在这里
│ ├── ability 基础能力接口，如文件签名等通用能力
│ ├── activity 活动相关接口
│ ├── battle 知识竞赛接口
│ ├── book.js 错题本接口
│ ├── cert.js 证书接口
│ ├── course 课程相关接口
│ ├── exam 考试相关接口
│ ├── mall 商城相关接口
│ ├── notice.js 系统公告接口
│ ├── order 订单相关接口
│ ├── paper 试卷相关接口
│ ├── plan 培训计划相关接口
│ ├── points.js 积分接口
│ ├── repo 题库/刷题相关接口
│ ├── survey 问卷相关接口
│ └── sys 系统配置与公共接口
├── common 通用工具目录
│ ├── config.js 项目配置与接口基础配置
│ ├── file-utils.js 文件处理工具
│ ├── filters.js 文本/富文本显示过滤工具
│ ├── navs.js 导航菜单或页面导航配置
│ ├── request.js 请求封装
│ ├── sse.js SSE 流式消息封装
│ ├── upload.js 文件上传封装
│ ├── utils.js 其他通用工具
│ └── validate.js 数据校验工具
├── components 通用组件
│ ├── yf-addr-select 地址选择组件
│ ├── yf-avatar 头像展示组件
│ ├── yf-banner Banner 轮播组件
│ ├── yf-cover 封面展示组件
│ ├── yf-dict-tree 字典树组件
│ ├── yf-dict-tree-node 字典树节点组件
│ ├── yf-empty-view 空状态展示组件
│ ├── yf-fav 收藏/点赞类组件
│ ├── yf-file-upload 文件上传组件
│ ├── yf-markdown-viewer Markdown 渲染组件
│ ├── yf-more-grid 宫格更多入口组件
│ ├── yf-more-list 列表更多入口组件
│ ├── yf-pay-alipay-h5 H5 支付宝支付组件
│ ├── yf-pay-wx-h5 H5 微信支付组件
│ ├── yf-pay-wx-mp 小程序微信支付组件
│ ├── yf-photo-take 拍照组件
│ ├── yf-price-show 价格展示组件
│ ├── yf-progress 进度展示组件
│ ├── yf-qu-item-show 题目展示组件
│ ├── yf-rich-text-viewer 富文本展示组件
│ ├── yf-sec-format 秒数/时长格式化组件
│ ├── yf-state-msg 状态信息提示组件
│ ├── yf-sticky-segmented 吸顶分段控制组件
│ ├── yf-tree 树形组件
│ ├── yf-tree-node 树节点组件
│ ├── yf-tree-select 树选择组件
│ ├── yf-video-player 视频播放组件
│ ├── yf-voice-player 语音播放组件
│ ├── yf-voice-recorder 录音组件
│ └── yf-watermark 水印组件
├── hooks 公共 hooks 目录
│ └── useUrlSign.js 文件 URL 授权签名 hook
├── hybrid 内嵌静态资源目录
│ └── html H5 内嵌页面资源，如 PDF 阅读器
├── i18n 国际化目录
│ ├── index.js 国际化入口
│ └── lang 多语言包
├── index.html Vite/H5 入口模板
├── main.js 应用启动入口
├── manifest.json uni-app 应用配置文件
├── package.json npm 依赖与脚本配置
├── pages 业务页面目录
│ ├── activity 活动页面
│ ├── battle 知识竞赛页面
│ ├── cam.vue 摄像/拍照相关独立页面
│ ├── course 课程页面
│ ├── exam 考试页面
│ ├── index 首页相关页面
│ ├── index.vue 首页入口页
│ ├── license.vue 协议/授权说明页面
│ ├── login 登录注册页面
│ ├── mall 商城页面
│ ├── mup.vue 上传或媒体处理独立页面
│ ├── notice 公告页面
│ ├── pay 支付页面
│ ├── plan 培训计划页面
│ ├── repo 题库训练页面
│ ├── survey 问卷页面
│ ├── user 用户中心页面
│ └── webview web-view 页面
├── pages.json uni-app 页面路由与窗口配置
├── static 静态资源目录
├── store 状态管理目录
│ ├── index.js store 入口
│ └── modules 状态模块
│ ├── redirect.js 页面跳转状态模块
│ ├── site.js 站点配置状态模块
│ └── user.js 用户状态模块
├── style 全局样式目录
│ ├── style.css 业务公共样式
│ ├── uni-nvue.css nvue 样式
│ └── uni.css uni-app 通用样式
├── uni_modules uni-app 插件市场模块目录
├── uni.scss uni-app 全局 scss 变量与样式
├── unpackage 编译输出目录
└── vite.config.js Vite 构建配置
参考网站
UNI-APP 官方： https://uniapp.dcloud.net.cn/
文件结构可能随着产品迭代发生一些细小变化，但整体结构不会有太大变化