【图书管理系统】深入解析基于 MyBatis 数据持久化操作:全栈开发图书管理系统:查询图书属性接口(注解实现)、修改图书属性接口(XML 实现)
查询图书属性接口
约定前后端交互接口
约定前后端交互接口,进入修改页面,需要显示当前图书的信息;
请求
/book/queryBookById?bookId=25
参数
无
响应
{
"id": 25,
"bookName": "图书21",
"author": "作者2",
"count": 999,
"price": 222.00,
"publish": "出版社1",
"status": 2,
"statusCN": null,
"createTime": "2023-09-04T04:01:27.000+00:00",
"updateTime": "2023-09-05T03:37:03.000+00:00"
}
根据图书ID,获取当前图书的信息。
实现服务器代码
控制层 BookController
业务层 BookService
数据层 BookInfoMapper
根据图书ID,查询图书信息。
@Select("select id, book_name, author, count, price, publish, `status`,
create_time, update_time " +
"from book_info where id=#{bookId} and status<>0")
BookInfo queryBookById(Integer bookId);
接口测试
重新运行程序,打开页面127.0.0.1:9090/book/queryBookById?bookId=5
修改图书属性接口
约定前后端交互接口
点击修改按钮,修改图书信息。
请求
/book/updateBook
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
参数
id=1&bookName=图书1&author=作者1&count=23&price=36&publish=出版社1&status=1
响应
"" // 失败信息, 成功时返回空字符串
我们约定,浏览器给服务器发送一个 /book/updateBook 这样的 HTTP 请求,form表单的形式来提交数据;
服务器返回处理结果,返回""表示添加图书成功,否则,返回失败信息。
实现服务器代码
控制层 BookController
业务层 BookService
数据层 BookInfoMapper
更新逻辑相对较为复杂,因为一本书不是每个属性都需要进行修改的;
所以 bookInfo 对象的哪些属性传递了值,我们就更新哪些值,需要使用动态SQL
。
对于初学者而言,注解的方式拼接动态SQL不太友好,煮啵采用xml
的方式来实现。
因为注解和 XML 可以同时在一个 interface 中共存,所以煮啵就不创建新接口了;
添加依赖和配置 XML 路径
配置 xml 路径:
mybatis:
mapper-locations: classpath:mapper/**Mapper.xml
最终整体的 yml 配置文件为:
xml 实现:
创建BookInfoMapper.xml文件,并初始化
接口测试
重新运行程序:
结果层层筛查和尝试,煮啵才锁定问题:
查看以前的博客,煮啵发现:spring 和 mybatis 是同级别的层次,煮啵把 mybatis 设置成了 spring 的小弟
;
修改好代码之后,重新提供 Postman 构造请求,终于成功返回响应:
提前开香槟,我们这一路走来不容易,多少次流着泪说不分离~~~(bushi)
验证数据库表信息是否被修改:
实现客户端代码
我们希望点击修改按钮时:
跳转的输入框中有原来的值:
修改好数据后,点击确认按钮,会调用后端:
接下来,我们来写前端代码:
我们观察,在列表页时,我们已经补充了[修改]的链接:
http://127.0.0.1:8080/book_update.html?bookId=25(25为对应的图书ID)
点击[修改]链接时,就会自动跳转到 http://127.0.0.1:8080/book_update.html?bookId=25(25为对应的图书ID)。
进入[修改图书]页面时,需要先从后端拿到当前图书的信息,显示在页面上。
补全修改图书的方法:
我们修改图书信息,是根据图书ID来修改的,所以需要前端传递的参数中,包含图书ID。
有两种方式:
- 获取url中参数的值(比较复杂,需要拆分url)
- 在form表单中,再增加一个隐藏输入框,存储图书ID,随 $(“#updateBook”).serialize() 一起提交到后端。
我们采用第二种方式:
在form表单中,添加隐藏输入框。
hidden
类型的<input>
元素。- 隐藏表单,用户不可见、不可改的数据,在用户提交表单时,这些数据会一并发送出。
- 使用场景:正被请求或编辑的内容的ID。这些隐藏的input元素在渲染完成的页面中完全不可见,且没有方法可以使它重新变为可见。
页面加载时,给该hidden
框赋值。
此时前端 js 完整代码:
程序运行,测试:
点击[修改]链接,跳转到图书修改页面,页面加载出该图书的信息。
随机修改数据,点击确定按钮,观察数据是否被修改。