SpringBoot+Vue3实习生管理系统开发实践-育师

1. 项目概述

最近在帮朋友公司开发实习生管理系统时，基于SpringBoot+Vue3+MyBatis技术栈实现了一套前后端分离的解决方案。这个系统从需求分析到最终上线历时3个月，期间踩了不少坑，也积累了一些值得分享的经验。

传统实习生管理通常依赖Excel表格和邮件往来，不仅效率低下，还容易出现数据不一致的问题。我们设计的系统实现了实习生全生命周期管理，包括信息录入、考勤记录、任务分配、绩效评估等核心功能。系统上线后，人力资源部门的工作效率提升了60%以上，实习生满意度调查显示90%的用户对系统体验表示满意。

2. 技术架构设计

2.1 整体架构方案

系统采用经典的三层架构设计：

前端：Vue3 + Element Plus + Axios
后端：SpringBoot 2.7 + MyBatis Plus
数据库：MySQL 8.0
部署：Docker + Nginx

选择前后端分离架构主要基于以下考虑：

开发效率：前后端可以并行开发，接口定义好后互不干扰
性能优化：静态资源单独部署，减轻服务器压力
技术栈灵活性：前端可以随时升级框架而不影响后端

2.2 关键技术选型

后端技术栈：

SpringBoot：简化配置，快速启动
MyBatis Plus：强大的CRUD操作和条件构造器
Hutool：Java工具包，处理各种常见操作
JWT：无状态认证方案
Redis：缓存热点数据和会话管理

前端技术栈：

Vue3：组合式API开发体验更好
Pinia：状态管理替代Vuex
Element Plus：UI组件库
ECharts：数据可视化
Axios：HTTP请求库

3. 数据库设计详解

3.1 核心表结构设计

实习生信息表(trainee_info)：

CREATE TABLE `trainee_info` ( `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键ID', `name` varchar(50) NOT NULL COMMENT '姓名', `gender` char(1) DEFAULT NULL COMMENT '性别', `phone` varchar(20) NOT NULL COMMENT '手机号', `email` varchar(50) DEFAULT NULL COMMENT '邮箱', `school` varchar(100) DEFAULT NULL COMMENT '学校', `major` varchar(50) DEFAULT NULL COMMENT '专业', `department_id` int DEFAULT NULL COMMENT '部门ID', `position` varchar(50) DEFAULT NULL COMMENT '实习岗位', `status` tinyint DEFAULT '0' COMMENT '状态(0-待入职,1-实习中,2-已离职)', `entry_date` date DEFAULT NULL COMMENT '入职日期', `leave_date` date DEFAULT NULL COMMENT '离职日期', `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间', PRIMARY KEY (`id`), UNIQUE KEY `uk_phone` (`phone`), KEY `idx_department` (`department_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='实习生信息表';

考勤记录表(attendance_record)：

CREATE TABLE `attendance_record` ( `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键ID', `trainee_id` bigint NOT NULL COMMENT '实习生ID', `check_in_time` datetime DEFAULT NULL COMMENT '签到时间', `check_out_time` datetime DEFAULT NULL COMMENT '签退时间', `status` tinyint DEFAULT '0' COMMENT '状态(0-正常,1-迟到,2-早退,3-缺勤)', `remark` varchar(200) DEFAULT NULL COMMENT '备注', `record_date` date NOT NULL COMMENT '记录日期', `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', PRIMARY KEY (`id`), UNIQUE KEY `uk_trainee_date` (`trainee_id`,`record_date`), KEY `idx_date` (`record_date`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='考勤记录表';

3.2 索引设计原则

所有表必须有主键，优先使用自增ID
频繁查询的条件字段建立普通索引
唯一性约束建立唯一索引
联合索引遵循最左前缀原则
避免在更新频繁的字段上建索引

4. 后端核心实现

4.1 SpringBoot应用配置

application.yml关键配置：

server: port: 8080 servlet: context-path: /api spring: datasource: url: jdbc:mysql://localhost:3306/trainee_manage?useSSL=false&serverTimezone=Asia/Shanghai username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver hikari: maximum-pool-size: 20 minimum-idle: 5 redis: host: localhost port: 6379 password: database: 0 mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl global-config: db-config: logic-delete-field: deleted # 逻辑删除字段 logic-delete-value: 1 # 逻辑已删除值 logic-not-delete-value: 0 # 逻辑未删除值

4.2 权限控制实现

基于RBAC模型设计权限系统，核心类结构：

// 用户实体 @Data public class User { private Long id; private String username; private String password; private String salt; private Integer status; private List<Role> roles; } // 角色实体 @Data public class Role { private Long id; private String name; private String code; private List<Permission> permissions; } // 权限实体 @Data public class Permission { private Long id; private String name; private String code; private String url; private String method; } // 自定义注解 @Target({ElementType.METHOD, ElementType.TYPE}) @Retention(RetentionPolicy.RUNTIME) public @interface RequiresPermissions { String[] value(); Logical logical() default Logical.AND; }

权限校验拦截器实现：

public class PermissionInterceptor implements HandlerInterceptor { @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { // 获取请求路径和方法 String requestURI = request.getRequestURI(); String method = request.getMethod(); // 获取用户权限列表 User user = (User) request.getSession().getAttribute("user"); Set<String> permissions = user.getPermissions(); // 校验权限 if (!permissions.contains(method + ":" + requestURI)) { response.sendError(HttpStatus.FORBIDDEN.value(), "无权限访问"); return false; } return true; } }

5. 前端关键实现

5.1 Vue3项目结构

src/ ├── api/ # API请求 ├── assets/ # 静态资源 ├── components/ # 公共组件 ├── composables/ # 组合式函数 ├── router/ # 路由配置 ├── stores/ # Pinia状态管理 ├── styles/ # 全局样式 ├── utils/ # 工具函数 ├── views/ # 页面组件 ├── App.vue # 根组件 └── main.js # 入口文件

5.2 动态路由实现

根据用户权限动态生成路由：

// 路由配置 const routes = [ { path: '/', component: Layout, children: [ { path: '', name: 'Dashboard', component: () => import('@/views/dashboard.vue'), meta: { title: '首页', icon: 'home', requiresAuth: true } }, // 其他路由... ] } ] // 动态添加路由 function addDynamicRoutes() { const userStore = useUserStore() const permissionRoutes = userStore.permissions.map(permission => { return { path: permission.path, name: permission.name, component: () => import(`@/views/${permission.component}.vue`), meta: { title: permission.title, icon: permission.icon, requiresAuth: true } } }) router.addRoute({ path: '/', component: Layout, children: permissionRoutes }) }

5.3 考勤打卡组件

<template> <div class="attendance-card"> <el-card> <template #header> <div class="card-header"> <span>考勤打卡</span> <el-tag :type="statusTag.type">{{ statusTag.text }}</el-tag> </div> </template> <div class="card-body"> <el-button type="primary" :disabled="!canCheckIn" @click="handleCheckIn" > 上班打卡 </el-button> <el-button type="success" :disabled="!canCheckOut" @click="handleCheckOut" > 下班打卡 </el-button> <div class="time-display"> <p v-if="checkInTime">上班时间: {{ formatTime(checkInTime) }}</p> <p v-if="checkOutTime">下班时间: {{ formatTime(checkOutTime) }}</p> </div> </div> </el-card> </div> </template> <script setup> import { ref, computed, onMounted } from 'vue' import { ElMessage } from 'element-plus' import { checkIn, checkOut, getTodayRecord } from '@/api/attendance' const checkInTime = ref(null) const checkOutTime = ref(null) const attendanceStatus = ref(0) const statusMap = { 0: { text: '未打卡', type: 'info' }, 1: { text: '已签到', type: 'success' }, 2: { text: '已签退', type: 'warning' }, 3: { text: '迟到', type: 'danger' }, 4: { text: '早退', type: 'danger' } } const statusTag = computed(() => { return statusMap[attendanceStatus.value] }) const canCheckIn = computed(() => { return !checkInTime.value }) const canCheckOut = computed(() => { return checkInTime.value && !checkOutTime.value }) onMounted(async () => { await loadTodayRecord() }) async function loadTodayRecord() { try { const res = await getTodayRecord() checkInTime.value = res.data.checkInTime checkOutTime.value = res.data.checkOutTime attendanceStatus.value = res.data.status } catch (error) { console.error(error) } } async function handleCheckIn() { try { const res = await checkIn() checkInTime.value = res.data.checkInTime attendanceStatus.value = res.data.status ElMessage.success('打卡成功') } catch (error) { ElMessage.error(error.message) } } async function handleCheckOut() { try { const res = await checkOut() checkOutTime.value = res.data.checkOutTime attendanceStatus.value = res.data.status ElMessage.success('签退成功') } catch (error) { ElMessage.error(error.message) } } function formatTime(time) { return new Date(time).toLocaleTimeString() } </script>

6. 系统部署方案

6.1 生产环境部署架构

+-----------------+ | Nginx | | (负载均衡/反向代理) | +--------+--------+ | +----------------+----------------+ | | +---------+---------+ +---------+---------+ | SpringBoot App | | SpringBoot App | | (Docker) | | (Docker) | +-------------------+ +-------------------+ | | +---------+---------+ +---------+---------+ | MySQL | | Redis | | (主从复制) | | (集群) | +-------------------+ +-------------------+

6.2 Docker部署配置

后端Dockerfile：

FROM openjdk:11-jre-slim WORKDIR /app COPY target/trainee-manage.jar app.jar EXPOSE 8080 ENTRYPOINT ["java", "-jar", "app.jar"]

前端Dockerfile：

FROM nginx:alpine WORKDIR /usr/share/nginx/html COPY dist . COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80

docker-compose.yml：

version: '3.8' services: mysql: image: mysql:8.0 container_name: mysql environment: MYSQL_ROOT_PASSWORD: root123 MYSQL_DATABASE: trainee_manage ports: - "3306:3306" volumes: - mysql_data:/var/lib/mysql restart: always redis: image: redis:6.2 container_name: redis ports: - "6379:6379" volumes: - redis_data:/data restart: always backend: build: ./backend container_name: backend ports: - "8080:8080" environment: - SPRING_DATASOURCE_URL=jdbc:mysql://mysql:3306/trainee_manage - SPRING_DATASOURCE_USERNAME=root - SPRING_DATASOURCE_PASSWORD=root123 - SPRING_REDIS_HOST=redis depends_on: - mysql - redis restart: always frontend: build: ./frontend container_name: frontend ports: - "80:80" depends_on: - backend restart: always volumes: mysql_data: redis_data:

7. 开发经验与优化建议

7.1 性能优化实践

接口响应优化：
- 启用MyBatis二级缓存
- 使用Redis缓存热点数据
- 批量操作代替循环单条处理
- 合理使用@Transactional注解
前端加载优化：
- 路由懒加载
- 组件异步加载
- 图片压缩和CDN加速
- 启用Gzip压缩
数据库优化：
- 建立合适的索引
- 避免SELECT * 查询
- 使用连接池控制连接数
- 定期执行ANALYZE TABLE

7.2 常见问题解决方案

问题1：MyBatis查询结果映射失败

解决方案：

检查实体类字段名与数据库列名是否一致
使用@TableField注解指定映射关系
确认是否开启了驼峰命名转换
检查SQL语句中的AS别名

问题2：Vue3响应式数据更新但视图不更新

解决方案：

确保使用ref或reactive声明响应式数据
对于数组操作，使用push等变更方法或重新赋值
对于对象新增属性，使用Vue.set或重新赋值
检查是否在异步回调中正确更新数据

问题3：跨域问题

后端解决方案：

@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") .allowedHeaders("*") .maxAge(3600); } }

前端解决方案：

// vite.config.js export default defineConfig({ server: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, rewrite: path => path.replace(/^\/api/, '') } } } })