Web应用技术课程设计学生宿舍住宿系统项目总结一、作业说明本次博客根据自己的课程设计项目进行整理项目名称为“学生宿舍住宿系统”。本系统是在前面住宿信息查询、删除、分页和 RESTful CRUD 的基础上继续完善的增加了登录页面、首页仪表盘、Element UI 前端页面、分页显示、住宿信息新增、修改、删除和统计展示等功能。说明如果作业要求包含视频演示本篇博客先完成文字说明、核心代码和测试过程视频演示部分后续再补充。二、项目简介学生宿舍住宿系统主要用于管理学生在宿舍中的住宿信息。管理员登录系统后可以查看住宿统计信息也可以对学生住宿记录进行查询、分页浏览、新增、修改和删除。本项目的主要目标是把 Web 应用技术课程中学习到的 Spring Boot、MyBatis、MySQL、Vue、axios、Element UI 等知识综合应用到一个完整项目中。项目主要功能如下管理员登录。首页仪表盘统计展示。学生住宿信息条件查询。住宿信息分页显示。新增学生住宿记录。修改学生住宿记录。删除学生住宿记录。前端登录状态校验。三、开发环境和技术栈类型技术后端框架Spring Boot 3.3.5持久层框架MyBatis数据库MySQL前端技术HTML、CSS、Vue 2、axiosUI 组件Element UI构建工具Maven接口测试Apifox / 浏览器项目默认运行端口为http://localhost:8080默认管理员账号用户名admin 密码123456四、系统功能模块1. 登录模块登录页面为login.html。管理员输入用户名和密码后前端向后端/login接口发送请求。登录成功后前端将用户信息保存到localStorage并跳转到首页仪表盘。2. 首页仪表盘模块首页页面为dashboard.html。该页面主要展示住宿统计信息包括住宿总人数、男生人数、女生人数、已使用楼栋、已使用房间和最近入住记录。3. 住宿信息管理模块住宿信息列表页面为dorm_listAll.html。该页面使用 Element UI 的表格和分页组件支持按关键字查询按宿舍楼查询按房间号查询按性别筛选分页显示删除住宿记录跳转到新增页面跳转到编辑页面。4. 新增住宿模块新增页面为dorm_add.html。管理员填写学生姓名、学号、性别、宿舍楼、房间号、床位号、联系电话和入住日期后点击保存即可新增住宿记录。5. 编辑住宿模块编辑页面为dorm_edit.html。页面通过 URL 中的id参数查询原住宿记录并回显修改后提交到后端保存。五、数据库设计本项目数据库名称为students_dorm主要包含两张表sys_user系统用户表。dorm_stay学生宿舍住宿信息表。1. 系统用户表 sys_user字段名说明id用户 IDusername用户名password密码real_name真实姓名role角色2. 住宿信息表 dorm_stay字段名说明id住宿记录 IDstudent_name学生姓名student_no学号gender性别1 表示男2 表示女building_no宿舍楼号room_no房间号bed_no床位号phone联系电话check_in_date入住日期建表 SQL 核心内容如下createtableifnotexistsdorm_stay(idbigintprimarykeyauto_incrementcomment住宿记录ID,student_namevarchar(50)notnullcomment学生姓名,student_novarchar(30)notnullcomment学号,gendertinyintnullcomment性别1-男2-女,building_novarchar(30)notnullcomment宿舍楼号,room_novarchar(30)notnullcomment房间号,bed_novarchar(30)notnullcomment床位号,phonevarchar(30)nullcomment联系电话,check_in_datevarchar(20)nullcomment入住日期)comment学生宿舍住宿信息表;六、接口设计系统后端采用 RESTful 风格设计接口统一返回BaseResult格式。通用返回格式如下{code:1,msg:success,data:{}}主要接口如下功能请求方式请求路径登录POST/login首页统计GET/dashboard/stats查询住宿列表GET/dorms分页查询GET/dorms/page根据 ID 查询GET/dorms/{id}新增住宿POST/dorms修改住宿PUT/dorms/{id}删除住宿DELETE/dorms/{id}七、核心代码实现1. 登录接口PostMapping({/login,/api/login})publicBaseResultLoginUserlogin(RequestBodyLoginRequestloginRequest){returnauthService.login(loginRequest.getUsername(),loginRequest.getPassword()).map(BaseResult::ok).orElseGet(()-BaseResult.fail(用户名或密码错误));}这段代码接收前端传来的用户名和密码调用AuthService进行校验。校验成功返回用户信息失败返回错误提示。2. 分页查询接口GetMapping({/dorms/page,/api/dorms/page,/dormpage})publicBaseResultPageResultDormStaypage(RequestParam(defaultValue1)Integerpage,RequestParam(defaultValue5)IntegerpageSize,RequestParam(requiredfalse)Stringkeyword,RequestParam(requiredfalse)StringbuildingNo,RequestParam(requiredfalse)StringroomNo,RequestParam(requiredfalse)Integergender){returnBaseResult.ok(dormStayService.findPage(page,pageSize,keyword,buildingNo,roomNo,gender));}分页接口接收页码、每页条数和查询条件返回当前页数据和总记录数。3. Service 层分页处理publicPageResultDormStayfindPage(Integerpage,IntegerpageSize,Stringkeyword,StringbuildingNo,StringroomNo,Integergender){intsafePagepagenull||page1?1:page;intsafePageSizepageSizenull||pageSize1?5:Math.min(pageSize,50);intoffset(safePage-1)*safePageSize;LongtotaldormStayMapper.count(keyword,buildingNo,roomNo,gender);ListDormStayrowsdormStayMapper.selectPage(keyword,buildingNo,roomNo,gender,offset,safePageSize);returnnewPageResult(safePage,safePageSize,total,rows);}该方法主要完成分页参数处理并调用 Mapper 查询总数和当前页数据。4. MyBatis 分页 SQLselectidselectPageresultTypeDormStayselect id, student_name, student_no, gender, building_no, room_no, bed_no, phone, check_in_date from dorm_stayincluderefidQueryWhere/order by id asc limit #{offset}, #{pageSize}/select分页查询使用 MySQL 的limit实现offset表示从第几条数据开始查询。5. 动态条件查询 SQLsqlidQueryWherewhereiftestkeyword ! null and keyword ! and ( student_name like concat(%, #{keyword}, %) or student_no like concat(%, #{keyword}, %) or building_no like concat(%, #{keyword}, %) or room_no like concat(%, #{keyword}, %) or bed_no like concat(%, #{keyword}, %) or phone like concat(%, #{keyword}, %) )/ififtestbuildingNo ! null and buildingNo ! and building_no #{buildingNo}/ififtestroomNo ! null and roomNo ! and room_no #{roomNo}/ififtestgender ! nulland gender #{gender}/if/where/sql通过 MyBatis 动态 SQL可以根据前端传入的不同条件组合生成查询语句。6. 前端分页请求代码axios.get(/dorms/page,{params:{page:this.page.page,pageSize:this.page.pageSize,keyword:this.query.keyword,buildingNo:this.query.buildingNo,roomNo:this.query.roomNo,gender:this.query.gender||null}}).then(response{varbaseResultresponse.data;if(baseResult.code1){varpageDatabaseResult.data||{};this.dormspageData.rows||[];this.page.totalpageData.total||0;}});前端通过 axios 调用后端分页接口并把返回的rows赋值给表格把total赋值给分页组件。7. 新增住宿信息代码addDorm(){this.$refs.dormForm.validate(valid{if(!valid)return;axios.post(/dorms,this.dorm).then(response{varbaseResultresponse.data;if(baseResult.code1){this.$message.success(新增成功);location.hrefdorm_listAll.html;}else{this.$message.error(baseResult.msg||操作失败);}});});}新增页面提交表单后调用POST /dorms接口保存数据。八、页面效果说明1. 登录页面访问地址http://localhost:8080/login.html登录页面用于管理员登录输入默认账号admin和密码123456即可进入系统。【截图位置登录页面截图】2. 首页仪表盘访问地址http://localhost:8080/dashboard.html首页展示住宿人数统计和最近入住记录。【截图位置首页仪表盘截图】3. 住宿信息列表页面访问地址http://localhost:8080/dorm_listAll.html该页面使用 Element UI 表格和分页组件可以进行查询、分页、编辑和删除操作。【截图位置住宿信息列表页面截图】4. 新增住宿页面访问地址http://localhost:8080/dorm_add.html【截图位置新增住宿页面截图】5. 编辑住宿页面访问地址http://localhost:8080/dorm_edit.html?id1【截图位置编辑住宿页面截图】九、Apifox 接口测试说明以登录接口为例在 Apifox 中可以这样测试新建 HTTP 请求。请求方式选择POST。请求地址填写http://localhost:8080/loginBody 选择 JSON填写{username:admin,password:123456}点击发送返回code1表示登录成功。分页查询接口测试GET http://localhost:8080/dorms/page?page1pageSize5新增接口测试POST http://localhost:8080/dorms请求体示例{studentName:测试学生,studentNo:2026999,gender:1,buildingNo:1栋,roomNo:101,bedNo:3号床,phone:13800009999,checkInDate:2026-07-08}修改接口测试PUT http://localhost:8080/dorms/1删除接口测试DELETE http://localhost:8080/dorms/1十、系统运行步骤1. 执行数据库脚本先在 MySQL 中执行项目中的schema.sql文件src/main/resources/schema.sql2. 修改数据库配置如果本机数据库账号密码不同需要修改application.propertiesspring.datasource.urljdbc:mysql://localhost:3306/students_dorm?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/ShanghaiuseSSLfalseallowPublicKeyRetrievaltrue spring.datasource.usernameroot spring.datasource.password1234563. 启动项目在项目根目录执行mvn spring-boot:run或者运行已经打包好的 jarjava-jartarget/students-dorm-system-0.0.1-SNAPSHOT.jar4. 浏览器访问http://localhost:8080/login.html十一、视频演示说明本次先完成博客文字内容、核心代码、接口说明和测试说明。视频演示部分可以后续补充视频内容可以按照以下顺序录制启动 Spring Boot 项目。打开登录页面并登录。展示首页仪表盘。展示住宿信息分页查询。演示新增住宿信息。演示编辑住宿信息。演示删除住宿信息。简单展示 Apifox 接口测试。十二、总结通过本次课程设计我完成了学生宿舍住宿系统的完整开发过程。系统从数据库表设计开始到后端接口实现再到前端页面联调最终完成了登录、首页统计、分页查询、住宿信息新增、修改和删除等功能。本项目让我进一步熟悉了 Spring Boot MyBatis MySQL 的后端开发流程也掌握了 Vue、axios 和 Element UI 在前端页面中的基本使用方式。通过前后端联调我认识到字段名称、接口路径、请求方式和返回格式必须保持一致否则很容易出现参数为空、页面不显示或 SQL 执行失败等问题。后续如果继续完善该系统可以增加以下功能密码加密和后端登录认证。多角色权限控制。床位占用冲突校验。学生信息批量导入导出。宿舍楼、房间和床位基础数据管理。总体来说本系统已经完成了课程设计所需的主要功能也为后续扩展宿舍管理相关功能打下了基础。