1. 项目概述与技术栈选型
这个毕业就业信息管理系统采用当前主流的前后端分离架构，后端基于SpringBoot 2.7.x构建，前端使用Vue 3组合式API开发，数据库选用MySQL 8.0。整套系统经过完整测试，源码开箱即用，只需基础开发环境即可快速部署运行。
技术栈选择背后有这些考量：
- SpringBoot的自动配置特性大幅简化了传统SSM框架的XML配置工作，内嵌Tomcat服务器让部署变得极其简单
- Vue 3的Composition API比Options API更灵活，适合构建复杂的前端交互界面
- MySQL作为最流行的开源关系型数据库，在事务处理和数据一致性方面表现优异
提示：虽然系统标注"可直接运行"，但实际部署时仍需注意JDK版本(推荐11+)、Node.js版本(16+)和MySQL字符集(utf8mb4)的兼容性问题
2. 系统架构设计与核心模块
2.1 后端工程结构
code复制src/
├── main/
│ ├── java/
│ │ └── com/
│ │ └── graduation/
│ │ ├── config/ # Spring配置类
│ │ ├── controller/ # 业务控制器
│ │ ├── entity/ # 数据库实体
│ │ ├── mapper/ # MyBatis接口
│ │ ├── service/ # 业务服务层
│ │ └── GraduationApplication.java # 启动类
│ └── resources/
│ ├── mapper/ # XML映射文件
│ ├── application.yml # 主配置文件
│ └── static/ # 静态资源
2.2 前端工程结构
code复制src/
├── api/ # 接口定义
├── assets/ # 静态资源
├── components/ # 公共组件
├── router/ # 路由配置
├── store/ # Pinia状态管理
├── utils/ # 工具类
└── views/ # 页面组件
2.3 数据库设计亮点
系统包含12张核心表，其中：
student_info表采用JSON类型存储证书等非结构化数据employment_record表使用触发器自动更新关联的学生就业状态- 所有表都包含
create_time和update_time审计字段
3. 关键功能实现解析
3.1 多条件分页查询实现
后端采用MyBatis-Plus的分页插件：
java复制// Controller
@GetMapping("/students")
public R<Page<StudentVO>> listStudents(
@RequestParam(required = false) String name,
@RequestParam(required = false) Integer collegeId,
@RequestParam(defaultValue = "1") Integer pageNum,
@RequestParam(defaultValue = "10") Integer pageSize) {
LambdaQueryWrapper<Student> wrapper = Wrappers.lambdaQuery();
wrapper.eq(StringUtils.isNotBlank(name), Student::getName, name)
.eq(collegeId != null, Student::getCollegeId, collegeId);
return R.success(studentService.page(
new Page<>(pageNum, pageSize), wrapper));
}
前端使用Element Plus的Pagination组件配合axios请求：
vue复制<script setup>
const queryParams = reactive({
name: '',
collegeId: null,
pageNum: 1,
pageSize: 10
})
const fetchData = async () => {
const res = await listStudents(queryParams)
tableData.value = res.data.records
total.value = res.data.total
}
</script>
3.2 文件导入导出功能
使用Apache POI处理Excel：
java复制// 导出示例
public void exportStudentTemplate(HttpServletResponse response) {
try (ExcelWriter writer = ExcelUtil.getWriter()) {
writer.addHeaderAlias("name", "姓名");
writer.addHeaderAlias("studentNo", "学号");
writer.merge(2, "学生信息模板");
writer.write(new ArrayList<>(), true);
response.setContentType("application/vnd.ms-excel");
response.setHeader("Content-Disposition", "attachment;filename=template.xlsx");
writer.flush(response.getOutputStream(), true);
}
}
3.3 权限控制方案
采用RBAC模型实现：
- 用户-角色多对多关系
- 角色-权限多对多关系
- 使用Spring Security的
@PreAuthorize注解进行方法级控制 - 前端基于路由元信息动态生成菜单
4. 部署与运行指南
4.1 环境准备
- JDK 11+
- MySQL 8.0+
- Node.js 16+
- Maven 3.6+
4.2 数据库初始化
- 创建数据库：
sql复制CREATE DATABASE graduation CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;
- 执行项目中的
sql/init.sql脚本
4.3 后端启动
bash复制# 打包
mvn clean package -DskipTests
# 运行
java -jar target/graduation-0.0.1-SNAPSHOT.jar
4.4 前端启动
bash复制# 安装依赖
npm install
# 开发模式
npm run dev
# 生产构建
npm run build
5. 常见问题排查
5.1 跨域问题
解决方案：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("*")
.allowedHeaders("*");
}
}
5.2 时区问题
在application.yml中配置：
yaml复制spring:
datasource:
url: jdbc:mysql://localhost:3306/graduation?serverTimezone=Asia/Shanghai
5.3 前端路由刷新404
Nginx配置需要添加：
nginx复制location / {
try_files $uri $uri/ /index.html;
}
6. 二次开发建议
- 接口文档：集成Swagger或Knife4j
- 日志增强：接入ELK日志系统
- 性能监控：集成Prometheus + Grafana
- 消息队列：使用RabbitMQ处理异步任务
- 缓存优化：Redis缓存热点数据
注意：修改前端API调用地址需同步更新
.env文件中的VITE_API_BASE_URL变量
实际开发中我发现几个值得注意的点：
- MyBatis-Plus的Lambda查询条件构造时，字段引用最好使用
实体类::get方法方式，避免硬编码字段名 - Vue 3的
<script setup>语法中，组件无需注册即可直接使用 - 批量导入数据时建议使用MySQL的
LOAD DATA INFILE语句，比单条INSERT快10倍以上