基于 SpringBoot + Vue3 的会议室预约管理系统设计与实现

温馨提示本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系方式的名片1. 项目背景与需求分析随着企业规模的扩大和办公模式的多样化会议室资源的管理日益复杂。传统的人工登记、电话协调方式存在信息不透明、预约冲突频发、资源利用率低等问题。本系统基于 SpringBoot Vue3 技术栈构建一套集会议室信息管理、在线预约、审批流程、统计分析于一体的会议室预约管理系统旨在提升会议室资源的调度效率和管理水平。2. 技术选型与架构设计本系统采用前后端分离架构前端使用 Vue3 Element Plus 构建单页应用后端基于 SpringBoot 提供 RESTful API 服务数据持久层使用 MyBatis-Plus 操作 MySQL 数据库。整体架构清晰、易于扩展和维护。2.1 技术栈清单层次技术选型说明前端框架Vue3 Vite组合式 API构建高效UI 组件库Element Plus企业级中后台组件状态管理Pinia轻量级状态管理路由Vue Router前端路由管理后端框架SpringBoot 2.7快速构建微服务持久层MyBatis-Plus简化 CRUD 操作数据库MySQL 8.0关系型数据库权限认证JWT Spring Security无状态认证授权2.2 系统架构图flowchart TD A[Vue3 前端] --|HTTP/RESTful| B[Nginx 反向代理] B -- C[SpringBoot 后端] C -- D[MyBatis-Plus] D -- E[(MySQL 数据库)] C -- F[Redis 缓存] C -- G[JWT 认证中心]3. 数据库设计系统核心数据表包括用户表、会议室表、预约记录表、审批记录表等。以下为主要表结构设计。3.1 会议室表 meeting_roomCREATE TABLE meeting_room ( id BIGINT PRIMARY KEY AUTO_INCREMENT COMMENT 会议室ID, room_name VARCHAR(50) NOT NULL COMMENT 会议室名称, location VARCHAR(100) COMMENT 所在位置, capacity INT COMMENT 容纳人数, equipment VARCHAR(255) COMMENT 设备配置如投影仪、视频会议, status TINYINT DEFAULT 1 COMMENT 状态1可用 0停用, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ) COMMENT 会议室信息表;3.2 预约记录表 reservationCREATE TABLE reservation ( id BIGINT PRIMARY KEY AUTO_INCREMENT COMMENT 预约ID, room_id BIGINT NOT NULL COMMENT 会议室ID, user_id BIGINT NOT NULL COMMENT 预约人ID, title VARCHAR(100) COMMENT 会议主题, start_time DATETIME NOT NULL COMMENT 开始时间, end_time DATETIME NOT NULL COMMENT 结束时间, status TINYINT DEFAULT 0 COMMENT 状态0待审批 1已通过 2已拒绝 3已取消, remark VARCHAR(500) COMMENT 备注, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, CONSTRAINT fk_room FOREIGN KEY (room_id) REFERENCES meeting_room(id), CONSTRAINT fk_user FOREIGN KEY (user_id) REFERENCES sys_user(id) ) COMMENT 会议室预约记录表;4. 后端核心实现后端采用分层架构包括 Controller、Service、Mapper 三层。以下展示核心模块的代码实现。4.1 预约冲突校验预约时需校验时间冲突确保同一会议室在同一时间段内不被重复预约。Service public class ReservationServiceImpl implements ReservationService { Autowired private ReservationMapper reservationMapper; Override Transactional public Result createReservation(ReservationDTO dto) { // 校验时间合法性 if (dto.getStartTime().isAfter(dto.getEndTime())) { return Result.error(开始时间不能晚于结束时间); } // 查询时间冲突的预约记录 LambdaQueryWrapperReservation wrapper new LambdaQueryWrapper(); wrapper.eq(Reservation::getRoomId, dto.getRoomId()) .eq(Reservation::getStatus, 1) .and(w - w.lt(Reservation::getStartTime, dto.getEndTime()) .gt(Reservation::getEndTime, dto.getStartTime())); Long count reservationMapper.selectCount(wrapper); if (count 0) { return Result.error(该时间段会议室已被预约); } // 保存预约记录 Reservation reservation new Reservation(); BeanUtils.copyProperties(dto, reservation); reservation.setStatus(0); reservationMapper.insert(reservation); return Result.success(预约提交成功等待审批); } }4.2 JWT 认证过滤器Component public class JwtAuthenticationFilter extends OncePerRequestFilter { Autowired private JwtUtil jwtUtil; Override protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain chain) throws ServletException, IOException { String token request.getHeader(Authorization); if (StringUtils.hasText(token) token.startsWith(Bearer )) { token token.substring(7); if (jwtUtil.validateToken(token)) { String username jwtUtil.getUsernameFromToken(token); UsernamePasswordAuthenticationToken authentication new UsernamePasswordAuthenticationToken(username, null, Collections.singletonList(new SimpleGrantedAuthority(ROLE_USER))); SecurityContextHolder.getContext().setAuthentication(authentication); } } chain.doFilter(request, response); } }5. 前端核心实现前端基于 Vue3 组合式 API 开发使用 Pinia 管理全局状态Element Plus 提供 UI 组件。5.1 会议室预约页面template div classreservation-page el-card template #header span会议室预约/span /template el-form :modelform label-width100px el-form-item label会议室 el-select v-modelform.roomId placeholder请选择会议室 el-option v-forroom in roomList :keyroom.id :labelroom.roomName :valueroom.id / /el-select /el-form-item el-form-item label会议主题 el-input v-modelform.title placeholder请输入会议主题 / /el-form-item el-form-item label预约时间 el-date-picker v-modeltimeRange typedatetimerange range-separator至 start-placeholder开始时间 end-placeholder结束时间 / /el-form-item el-form-item el-button typeprimary clicksubmitReservation提交预约/el-button /el-form-item /el-form /el-card /div /template script setup import { ref, reactive, onMounted } from vue import { ElMessage } from element-plus import { getRoomList, createReservation } from /api/reservation const form reactive({ roomId: , title: , remark: }) const timeRange ref([]) const roomList ref([]) onMounted(async () { const res await getRoomList() roomList.value res.data }) const submitReservation async () { if (!form.roomId || !form.title || !timeRange.value.length) { ElMessage.warning(请完整填写预约信息) return } const params { ...form, startTime: timeRange.value[0], endTime: timeRange.value[1] } const res await createReservation(params) if (res.code 200) { ElMessage.success(预约提交成功) } else { ElMessage.error(res.message) } } /script5.2 路由与权限控制// router/index.js import { createRouter, createWebHistory } from vue-router import { useUserStore } from /store/user const routes [ { path: /login, component: () import(/views/Login.vue) }, { path: /, component: () import(/layout/Index.vue), children: [ { path: dashboard, component: () import(/views/Dashboard.vue) }, { path: rooms, component: () import(/views/RoomList.vue) }, { path: reservation, component: () import(/views/Reservation.vue) }, { path: approval, component: () import(/views/Approval.vue) } ] } ] const router createRouter({ history: createWebHistory(), routes }) // 全局前置守卫 router.beforeEach((to, from, next) { const userStore useUserStore() if (to.path ! /login !userStore.token) { next(/login) } else { next() } }) export default router6. 系统功能模块系统主要包含以下功能模块用户管理管理员可维护用户信息分配角色权限。会议室管理维护会议室基本信息、设备配置和可用状态。在线预约用户选择会议室和时间段提交预约申请。审批管理管理员审批预约申请支持通过、拒绝和驳回操作。预约看板以日历或列表形式展示各会议室占用情况。统计分析统计会议室使用率、预约高峰时段等数据。7. 总结与展望本系统基于 SpringBoot Vue3 实现了会议室预约管理的核心业务流程具备用户认证、会议室管理、在线预约、审批流转等能力。后续可进一步扩展邮件通知、企业微信集成、智能排期推荐等功能持续提升会议室资源的利用效率和管理智能化水平。