企业官网建设流程全解析

Web应用技术第9次课后作业：基于 RESTful 风格的学生宿舍住宿信息 CRUD

一、作业要求

第九次课后作业要求采用 RESTful 风格，完成自己项目中某个功能模块的完整增删改查代码。我的项目模块是“学生宿舍住宿信息管理”，在第八次作业查询和删除的基础上，本次继续补充新增、根据 ID 查询、修改功能，最终完成完整 CRUD。

本项目技术栈：

• 后端：Spring Boot、MyBatis、MySQL
• 前端：Vue 2、axios、HTML/CSS
• 功能模块：学生宿舍住宿信息管理

二、RESTful 接口设计

RESTful 风格强调用请求方式表达操作含义，用统一资源路径表示资源。

通用返回格式：

{"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. 实体类 DormStay

publicclassDormStay{privateLongid;privateStringstudentName;privateStringstudentNo;privateIntegergender;privateStringbuildingNo;privateStringroomNo;privateStringbedNo;privateStringphone;privateStringcheckInDate;}

2. Controller 层

Controller 层负责接收前端请求，并返回统一结果。

@PostMapping({"/dorms","/api/dorms","/dormadd"})publicBaseResult<DormStay>create(@RequestBodyDormStaydormStay){returnBaseResult.ok(dormStayService.add(dormStay));}@PutMapping({"/dorms/{id}","/api/dorms/{id}"})publicBaseResult<DormStay>update(@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;}publicOptional<DormStay>update(Longid,DormStayupdated){if(id==null||updated==null||dormStayMapper.selectById(id)==null){returnOptional.empty();}updated.setId(id);normalize(updated);dormStayMapper.update(updated);returnOptional.ofNullable(dormStayMapper.selectById(id));}

4. Mapper XML

新增、修改、删除 SQL：

<insertid="insert"parameterType="DormStay"useGeneratedKeys="true"keyProperty="id">insert 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})</insert><updateid="update"parameterType="DormStay">update 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}</update><deleteid="deleteById">delete from dorm_stay where id = #{id}</delete>

五、前端页面实现

本次共完成 3 个页面：

1. dorm_listAll.html：列表、查询、删除、跳转新增和修改页面。
2. dorm_add.html：新增住宿信息。
3. dorm_edit.html：根据 ID 查询详情并修改住宿信息。

1. 新增页面

新增页面使用v-model双向绑定表单数据，点击新增后发送 POST 请求。

addDorm(){axios.post('/dorms',this.dorm).then(response=>{varbaseResult=response.data;if(baseResult.code==1){location.href='dorm_listAll.html';}else{alert(baseResult.msg||baseResult.message);}});}

2. 编辑页面

编辑页面通过 URL 参数获取 ID，例如：

dorm_edit.html?id=1

页面加载时自动查询详情：

created(){varparams=newURLSearchParams(location.search);this.id=params.get('id');this.selectById();}

点击更新按钮后发送 PUT 请求：

updateDorm(){this.dorm.id=Number(this.id);axios.put('/dorms/'+this.id,this.dorm).then(response=>{varbaseResult=response.data;if(baseResult.code==1){location.href='dorm_listAll.html';}});}

六、接口测试

我对 RESTful CRUD 接口进行了测试，结果如下：

1. GET /dorms：成功查询到示例住宿数据。
2. POST /dorms：成功新增一条住宿记录。
3. PUT /dorms/{id}：成功修改新增记录。
4. DELETE /dorms/{id}：成功删除测试记录。

七、页面联调效果

浏览器访问：

http://localhost:8080/dorm_listAll.html

联调结果：

• 列表页面能显示数据库中的住宿数据。
• 新增页面提交后能返回列表页，并显示新数据。
• 编辑页面能回显原数据，修改后保存成功。
• 删除按钮能删除数据库记录。

八、总结

本次作业在第八次查询和删除功能的基础上，继续完成了新增、根据 ID 查询和修改功能，并统一改为 RESTful 风格接口。通过这次练习，我对 Spring Boot + MyBatis 的分层开发流程更加熟悉，也掌握了 Vue 页面通过 axios 调用后端接口完成 CRUD 的基本流程。

这次作业中最重要的收获是：前端页面、后端接口、数据库字段必须保持一致，否则联调时很容易出现参数为空、字段对不上或 SQL 执行失败的问题。完成完整 CRUD 后，学生宿舍住宿信息管理模块已经可以作为后续课程设计继续开发的基础。