图书管理系统上篇、中篇如下:
【Spring+MyBatis】_图书管理系统(上篇)-CSDN博客
【Spring+MyBatis】_图书管理系统(中篇)-CSDN博客
目录
[6.1 约定前后端交互接口](#6.1 约定前后端交互接口)
[6.2 后端接口](#6.2 后端接口)
[6.3 前端页面](#6.3 前端页面)
[6.4 单元测试](#6.4 单元测试)
[7.1 约定前后端交互接口](#7.1 约定前后端交互接口)
[7.2 后端接口](#7.2 后端接口)
[7.3 前端页面](#7.3 前端页面)
[7.4 单元测试](#7.4 单元测试)
功能5:删除图书
6.1 约定前后端交互接口
接口定义:/Book/deleteBook;
参数:id;
返回内容:字符串。为空则表示删除成功,不为空则表示删除失败,并返回错误信息;
++采用逻辑删除方式,即通过update操作实现,具体做法是将status置为0,令前端页面无法获取++;
接口定义:/Book/updateBook;
参数:id,status;
返回内容:字符串。为空则表示删除成功,不为空则表示删除失败,并返回错误信息;
6.2 后端接口
BookController类和BookService类中均无需新增方法,通过updateBook实现;
BookInfoMapper接口也无需新增方法声明,
仅需在单元测试后端接口时根据updateBook方法的对应路由并传递id和status=0;
在编写前端页面时将ajax的url置为updateBook方法的对应路由即可;
6.3 前端页面
在book_list.html页面增加:
html
function deleteBook(bookId) {
var isDelete = confirm("确认删除?");
if (isDelete) {
//删除图书
$.ajax({
type:"post",
url: "/Book/updateBook",
data: {
id:bookId,
status:0
},
success: function(result){
if(result == ""){
// 删除成功
location.href="book_list.html";
}else{
// 删除失败
alert(result);
}
}
})
}
}
6.4 单元测试
1、通过Postman测试后端接口:

查看前端页面图书列表信息:

可见id=13的图书信息已经在前端页面不可见,
在服务器端查看日志:

查看数据库图书信息:

可见该图书信息并未真正删除,且status被置为0;
2、测试前端页面:
删除id=11的图书信息:

在数据库中查看图书信息:

可见数据库中该图书信息并未删除,且status被置为0;
功能6:批量删除图书
7.1 约定前后端交互接口
同功能5的删除单个图书即单个更新图书状态的思路,批量删除图书就是批量更新图书状态;
但当前实现的updateBook方法仅支持一个id作为参数,即接口不可复用,需单独编写接口;
接口定义:/Book/batchDelete;
参数:List<Integer> ids;
返回内容:字符串。为空则表示删除成功,不为空则表示删除失败,并返回错误信息;
7.2 后端接口
在BookController类中增加相关方法:
java
@RequestMapping("/batchDelete")
public String batchDelete(@RequestParam List<Integer> ids){
log.info("接收批量删除图书请求: 图书id:{}",ids);
Integer result=bookService.batchDelete(ids);
if(result <=0){
log.error("批量删除失败,图书id:{}",ids);
return "批量删除失败,请联系管理员";
}
return "";
}
在BookService类中增加相关方法:
java
public Integer batchDelete(List<Integer> ids){
Integer result=0;
try{
result=bookInfoMapper.batchDelete(ids);
}catch (Exception e){
log.error("批量删除图书失败:e{}",e);
}
return result;
}
在BookInfoMapper接口中增加相关方法声明:
java
Integer batchDelete(@Param("ids") List<Integer> ids);
为batchDelete方法配置对应xml文件的<update>标签:
java
<update id="batchDelete">
update book_info
set status=0
where id in
<foreach collection="ids" item="id" open="(" close=")" separator=",">
#{id}
</foreach>
</update>
注:使用集合作为参数时,若直接将元素用逗号连接作为参数传递会报错:

在Spring MVC传参部分曾有介绍,需使用@RequestParam注解:
7.3 前端页面
java
function batchDelete() {
var isDelete = confirm("确认批量删除?");
if (isDelete) {
//获取复选框的id
var ids = [];
$("input:checkbox[name='selectBook']:checked").each(function () {
ids.push($(this).val());
});
console.log(ids);
$.ajax({
type: "post",
url: "/Book/batchDelete?ids="+ids,
success: function (result) {
if(result == ""){
// 删除成功
location.href="book_list.html";
}else{
// 删除失败
alert(result);
}
}
});
}
}
7.4 单元测试
1、测试后端接口:

可在前端页面进行检查:

可见id为5和6的图书已经不可见;
查看服务器日志:

通过数据库查看图书信息:

可见id为5和6的图书的状态被置为0,且并未从数据库中删除;
2、测试前端页面:

查看服务器处日志:

通过数据库查看id为5和6的图书信息,可见其status被置为0但并未从数据库删除:
