孙静伟1. 项目概述：SpringBoot+Vue教学资源共享平台
这个基于SpringBoot+Vue的教学资源共享平台，是我在指导计算机专业毕业设计时反复打磨的一个经典案例。它完美融合了当下企业级开发中最主流的技术栈，既能满足高校对毕业设计的学术性要求，又具备实际商业项目的完整架构。平台采用前后端分离设计，后端使用SpringBoot+MyBatis+MySQL构建RESTful API，前端采用Vue+ElementUI实现响应式交互，整套代码结构清晰、模块划分明确，特别适合作为Java全栈开发的入门实战项目。
提示：这个项目我特意保留了开发过程中的完整commit记录，包括初期架构设计、中期功能迭代和后期性能优化的各个版本，非常适合学习者观察一个真实项目的演进过程。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 核心功能模块解析
2.1 教学资源管理子系统
资源管理是整个平台的核心，我采用了树形目录结构设计，支持PDF、PPT、视频等多媒体格式的上传与在线预览。关键技术点包括：
- 使用阿里云OSS实现海量文件存储（本地存储方案也保留在代码中）
- 基于FFmpeg的视频转码服务（docker-compose.yml已包含FFmpeg容器配置）
- 采用Redis缓存热门资源，减轻数据库压力
java复制// 文件上传核心代码示例（SpringBoot）
@PostMapping("/upload")
public Result upload(@RequestParam MultipartFile file,
@RequestParam Long parentId) {
// 文件类型校验逻辑
if(!FileTypeUtil.isAllowed(file.getOriginalFilename())){
return Result.error("不支持的文件格式");
}
// 阿里云OSS上传逻辑
String url = ossClient.upload(file);
// 数据库记录存储
Resource resource = new Resource()
.setName(file.getOriginalFilename())
.setUrl(url)
.setParentId(parentId);
resourceMapper.insert(resource);
return Result.success(resource);
}
2.2 用户权限控制系统
权限管理采用RBAC（基于角色的访问控制）模型，我特别设计了：
- 五类角色：超级管理员、院系管理员、教师、助教、学生
- 动态权限拦截：基于Spring Security的注解式权限控制
- 前端路由守卫：Vue中实现按钮级权限控制
踩坑提醒：初期我直接在JWT token中存储权限信息，后来发现权限变更后token无法实时更新。最终方案改为token只存储用户ID，权限信息每次从Redis获取。
3. 技术架构详解
3.1 后端技术栈选型
| 技术组件 | 版本 | 选用理由 |
|---|---|---|
| SpringBoot | 2.7.0 | 快速构建微服务，starter开箱即用 |
| MyBatis-Plus | 3.5.1 | 简化CRUD操作，内置分页插件 |
| Redis | 6.2.6 | 缓存热点数据，分布式锁实现 |
| JWT | 0.11.2 | 无状态认证，适合前后端分离架构 |
| Hutool | 5.8.0 | 国产工具库，简化各种常见操作 |
3.2 前端工程化实践
前端项目采用Vue CLI脚手架搭建，值得注意的配置：
- 按需引入ElementUI组件（减小打包体积）
- 配置Webpack分包策略（vendor、elementUI单独打包）
- 集成Sass预处理器（方便主题定制）
- 使用axios拦截器统一处理401/403/500等异常
javascript复制// axios请求拦截示例
service.interceptors.request.use(config => {
// 从localStorage获取token
const token = localStorage.getItem('token')
if (token) {
config.headers['Authorization'] = 'Bearer ' + token
}
return config
}, error => {
return Promise.reject(error)
})
4. 数据库设计要点
4.1 核心表结构
sql复制CREATE TABLE `sys_user` (
`user_id` bigint NOT NULL AUTO_INCREMENT,
`username` varchar(50) NOT NULL COMMENT '登录账号',
`password` varchar(100) NOT NULL COMMENT '密码',
`real_name` varchar(50) DEFAULT NULL COMMENT '真实姓名',
`avatar` varchar(255) DEFAULT NULL COMMENT '头像URL',
`email` varchar(100) DEFAULT NULL COMMENT '邮箱',
`mobile` varchar(20) DEFAULT NULL COMMENT '手机号',
`status` tinyint DEFAULT '1' COMMENT '状态 0:禁用 1:正常',
`dept_id` bigint DEFAULT NULL COMMENT '院系ID',
`create_time` datetime DEFAULT NULL COMMENT '创建时间',
PRIMARY KEY (`user_id`),
UNIQUE KEY `username` (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='系统用户';
4.2 性能优化策略
- 为所有外键字段添加索引
- 大文本字段（如资源描述）使用TEXT类型单独建表
- 采用逻辑删除而非物理删除（is_deleted字段）
- 敏感字段（如密码）使用AES加密存储
5. 开发环境搭建指南
5.1 后端启动步骤
- 安装JDK17+和Maven3.6+
- 导入项目到IntelliJ IDEA
- 修改application-dev.yml中的数据库配置
- 运行
mvn clean install - 启动Application主类
常见问题：如果Lombok注解不生效，需要IDEA安装Lombok插件并在设置中启用Annotation Processing
5.2 前端启动流程
- 安装Node.js 16+
- 执行
npm install --registry=https://registry.npmmirror.com - 配置.env.development中的API基础路径
- 运行
npm run serve - 访问http://localhost:8080
6. 项目扩展建议
在实际教学中，我通常会引导学生做以下扩展：
- 集成WebSocket实现站内消息实时推送
- 添加Elasticsearch实现资源全文检索
- 使用Prometheus+Grafana搭建监控系统
- 编写Dockerfile实现容器化部署
- 接入第三方登录（微信、钉钉等）
这个项目最让我自豪的是它的文档完整性——除了代码注释，我还准备了：
- 数据库设计文档（含ER图）
- API接口文档（Swagger+离线Markdown版）
- 部署手册（Windows/Linux/Docker三种方案）
- 二次开发指南（含代码规范说明）
最后分享一个调试技巧：在开发跨域问题时，可以先在后端关闭Security配置测试，确认功能正常后再仔细调整CORS配置，比盲目修改效率高得多。