第九次作业博客

Web应用技术第9次课后作业基于 RESTful 风格的学生宿舍住宿信息 CRUD一、作业要求第九次课后作业要求采用 RESTful 风格完成自己项目中某个功能模块的完整增删改查代码。我的项目模块是“学生宿舍住宿信息管理”在第八次作业查询和删除的基础上本次继续补充新增、根据 ID 查询、修改功能最终完成完整 CRUD。本项目技术栈后端Spring Boot、MyBatis、MySQL前端Vue 2、axios、HTML/CSS功能模块学生宿舍住宿信息管理二、RESTful 接口设计RESTful 风格强调用请求方式表达操作含义用统一资源路径表示资源。功能请求方式请求路径说明查询列表GET/dorms查询全部住宿信息支持条件查询根据 ID 查询GET/dorms/{id}查询某条住宿详情新增POST/dorms新增住宿记录修改PUT/dorms/{id}修改住宿记录删除DELETE/dorms/{id}删除住宿记录通用返回格式{code:1,msg:success,data:{}}三、项目结构students-dorm-system ├── src/main/java/com/example/dorm │ ├── controller/DormStayController.java │ ├── service/DormStayService.java │ ├── mapper/DormStayMapper.java │ └── model/DormStay.java ├── src/main/resources/mapper/DormStayMapper.xml ├── src/main/resources/static/dorm_listAll.html ├── src/main/resources/static/dorm_add.html └── src/main/resources/static/dorm_edit.html四、后端代码实现1. 实体类 DormStaypublicclassDormStay{privateLongid;privateStringstudentName;privateStringstudentNo;privateIntegergender;privateStringbuildingNo;privateStringroomNo;privateStringbedNo;privateStringphone;privateStringcheckInDate;}2. Controller 层Controller 层负责接收前端请求并返回统一结果。PostMapping({/dorms,/api/dorms,/dormadd})publicBaseResultDormStaycreate(RequestBodyDormStaydormStay){returnBaseResult.ok(dormStayService.add(dormStay));}PutMapping({/dorms/{id},/api/dorms/{id}})publicBaseResultDormStayupdate(PathVariableLongid,RequestBodyDormStaydormStay){returndormStayService.update(id,dormStay).map(BaseResult::ok).orElseGet(()-BaseResult.fail(住宿信息不存在));}为了兼容课堂风格我还保留了/dormadd、/dormupdate、/deleteDormByID等接口。3. Service 层Service 层负责业务逻辑例如新增前设置默认值修改前判断数据是否存在。publicDormStayadd(DormStaydormStay){normalize(dormStay);dormStayMapper.insert(dormStay);returndormStay;}publicOptionalDormStayupdate(Longid,DormStayupdated){if(idnull||updatednull||dormStayMapper.selectById(id)null){returnOptional.empty();}updated.setId(id);normalize(updated);dormStayMapper.update(updated);returnOptional.ofNullable(dormStayMapper.selectById(id));}4. Mapper XML新增、修改、删除 SQLinsertidinsertparameterTypeDormStayuseGeneratedKeystruekeyPropertyidinsert into dorm_stay(student_name, student_no, gender, building_no, room_no, bed_no, phone, check_in_date) values (#{studentName}, #{studentNo}, #{gender}, #{buildingNo}, #{roomNo}, #{bedNo}, #{phone}, #{checkInDate})/insertupdateidupdateparameterTypeDormStayupdate dorm_stay set student_name #{studentName}, student_no #{studentNo}, gender #{gender}, building_no #{buildingNo}, room_no #{roomNo}, bed_no #{bedNo}, phone #{phone}, check_in_date #{checkInDate} where id #{id}/updatedeleteiddeleteByIddelete from dorm_stay where id #{id}/delete五、前端页面实现本次共完成 3 个页面dorm_listAll.html列表、查询、删除、跳转新增和修改页面。dorm_add.html新增住宿信息。dorm_edit.html根据 ID 查询详情并修改住宿信息。1. 新增页面新增页面使用v-model双向绑定表单数据点击新增后发送 POST 请求。addDorm(){axios.post(/dorms,this.dorm).then(response{varbaseResultresponse.data;if(baseResult.code1){location.hrefdorm_listAll.html;}else{alert(baseResult.msg||baseResult.message);}});}2. 编辑页面编辑页面通过 URL 参数获取 ID例如dorm_edit.html?id1页面加载时自动查询详情created(){varparamsnewURLSearchParams(location.search);this.idparams.get(id);this.selectById();}点击更新按钮后发送 PUT 请求updateDorm(){this.dorm.idNumber(this.id);axios.put(/dorms/this.id,this.dorm).then(response{varbaseResultresponse.data;if(baseResult.code1){location.hrefdorm_listAll.html;}});}六、接口测试我对 RESTful CRUD 接口进行了测试结果如下GET /dorms成功查询到示例住宿数据。POST /dorms成功新增一条住宿记录。PUT /dorms/{id}成功修改新增记录。DELETE /dorms/{id}成功删除测试记录。七、页面联调效果浏览器访问http://localhost:8080/dorm_listAll.html联调结果列表页面能显示数据库中的住宿数据。新增页面提交后能返回列表页并显示新数据。编辑页面能回显原数据修改后保存成功。删除按钮能删除数据库记录。八、总结本次作业在第八次查询和删除功能的基础上继续完成了新增、根据 ID 查询和修改功能并统一改为 RESTful 风格接口。通过这次练习我对 Spring Boot MyBatis 的分层开发流程更加熟悉也掌握了 Vue 页面通过 axios 调用后端接口完成 CRUD 的基本流程。这次作业中最重要的收获是前端页面、后端接口、数据库字段必须保持一致否则联调时很容易出现参数为空、字段对不上或 SQL 执行失败的问题。完成完整 CRUD 后学生宿舍住宿信息管理模块已经可以作为后续课程设计继续开发的基础。