《JavaEE进阶》----21.＜基于Spring图书管理系统②（图书列表+删除图书+更改图书）＞

PS：

开闭原则

定义和背景‌
‌开闭原则（Open-Closed Principle, OCP）‌，也称为开放封闭原则，是面向对象设计中的一个基本原则。该原则强调软件中的模块、类或函数应该对扩展开放，对修改封闭。这意味着一个软件实体应该在不修改现有代码的基础上，能够适应新的变化和需求。

核心思想
开闭原则的核心思想是：

‌对扩展开放‌：当新的需求或变化出现时，可以通过扩展现有代码来适应新的情况，而不是修改现有的代码。
‌对修改封闭‌：一旦类或模块设计完成，就应该能够独立完成其工作，不再对其进行任何修改。（能够兼容之前的版本）

针对先上线的程序而言

比如后端接口从A改成了B。（前端接口也要修改）

如果后端先上线：前端调用就会出错，找不到A接口

如果前端先上线，前端调用依然会报错，找不到B接口。因为此时后端还没上线。

正确的做法：后端对之前的接口进行兼容，如果兼容则同时存在A和B接口

实现方式
实现开闭原则的方式主要包括：

‌抽象编程‌：通过面向对象的继承和多态机制，实现对抽象体的继承和方法的覆写，从而实现新的扩展方法。
‌依赖抽象‌：类依赖于固定的抽象，而不是具体的实现，这样可以保证类的稳定性。

相关设计原则
开闭原则与其他设计原则密切相关，包括：

‌里氏替换原则‌：子类对象能够替代父类对象出现的地方，并且保证原有逻辑行为不变。
‌接口隔离原则‌：接口调用方和使用者只关心自己相关的接口，不依赖于不需要的接口。
‌依赖反转原则‌：高模块不直接依赖低模块，而是通过抽象来互相依赖。
‌单一职责原则‌：一个类或模块只负责完成一个职责或功能。

一、图书列表展示功能

1.1 实现分页功能

提到展示图书列表，就不得不提到分页了

分页时，数据是如何展示的呢

第1页：显示1-10 条的数据

第2页：显示11-20 条的数据

第3页：显示 21-30 条的数据

以此类推...

要想实现这个功能,从数据库中进行分页查询，我们要使用 LIMIT 关键字，格式为：limit 开始索引每页显示的条数(开始索引从0开始)。
select * from book_info where status <> 0 limit 0,10;
select * from book_info where status <> 0 limit 10,10;
select * from book_info where status <> 0 limit 20,10;
我们发现只有开始索引在改变。每页显示的条数是固定的。

开始索引的计算公式：开始索引 = (当前页码 - 1) * 每页显示条数。

因此：

1.前端发起查询请求时，需要向服务器端传递的参数。

currentPage 当前页码：默认值为1

pageSize 每页显示条数默认值为10

注：

为了项目更好的扩展性,通常不设置固定值，而是是以参数的形式来进行传递

扩展性: 软件系统具备面对未来需求变化而进行扩展的能力。比如当前需求一页显示10条,后期需求改为一页显示20条,

后端代码不需要任何修改。

2. 后端响应时,需要响应给前端的数据。

records ：所查询到的数据列表(存储到List集合中)

count ：总记录数(用于告诉前端显示多少页,

显示页数为:(count + pageSize -1)/pageSize

翻页请求和响应部分, 我们通常封装在两个对象中

1.1.1 翻页请求对象PageRequest

创建PageRequest

前端进行请求

1.会请求当前页和每页显示的个数。

2.由上面两个数据计算出offset，用作参数传递给SQL语句

package com.qiyangyang.springbook.demos.model;
import lombok.Data;
@Data
public class PageRequest {private Integer currentPage = 1;//当前页private Integer pageSize = 10;//每页显示个数private Integer offset;/*** 从多少条记录开始查询* @return*/public Integer getOffset() {return (currentPage-1) * pageSize;}
}

1.1.2 翻页响应对象

package com.qiyangyang.springbook.demos.model;import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;import java.util.List;/*** 定义一个泛型类，就是，这个地方不定义具体类型* 我们在进行对象的生成的时候，它才有具体的类型。* @param <T>*/
//上面两个注解用来创建构造方法
@AllArgsConstructor
@NoArgsConstructor
@Data
public class PageResult<T> {/*** 返回的结果也是一个泛型* 不定义具体类型，在对象的创建才会有具体类型*/private List<T> records; //当前页数据private Integer count; //所有记录数private PageRequest pageRequest; //小驼峰，用来返回给前端当前页数// 这里将整个对象告诉result。用来给前端获取多少页}

返回结果中, 使用泛型来定义记录的类型

后端定义参数。

offset（起始序号）和limit（显示多少条）

MySQL语句

前端根据总记录数，来显示分了多少页。

1.2使用枚举来处理status/stateCN字段。（可借阅/不可借阅）

1.创建enums文件夹

2.创建BookStatusEnums类

package com.qiyangyang.springbook.demos.enums;/*** 枚举类* 可以列举出来的，是一个有限的个数，我们将他们定义成枚举类* 方便定义类似* 根据状态设置描述*             if(bookInfo.getStatus() == 1){*                 bookInfo.setStateCN("可借阅");*             } else if (bookInfo.getStatus() == 2) {*                 bookInfo.setStateCN("不可借阅");*             }else {*                 bookInfo.setStateCN("无效");*             }*/
public enum BookStatusEnums {DELETE(0,"无效"), //删除NORMAL(1,"可借阅"), //有效的FORBIDDEN(2,"不可借阅"), //禁止;private int code;private String desc;BookStatusEnums(int code, String desc) {this.code = code;this.desc = desc;}/*** 我们将这个封装成一个方法* 根据code获取描述** @return*/public static  BookStatusEnums getDescByCode(int code){switch (code){case 0: return BookStatusEnums.DELETE;case 1: return BookStatusEnums.NORMAL;case 2: return BookStatusEnums.FORBIDDEN;}return BookStatusEnums.DELETE;}public int getCode() {return code;}public String getDesc() {return desc;}
}

稍后在业务层我们会对这个方法进行调用

1.3约定前后端交互接口

接口定义：

url：/book/getListByPage?currentPage=1

Content-Type: application/x-www-form-urlencoded; charset=UTF-8

参数：

当前页数

返回结果：

当前页的数据+总记录数（决定前端显示多少页数）

我们约定,浏览器给服务器发送一个

/book/getListByPage 这样的 HTTP 请求,

通过 currentPage 参数告诉服务器,当前请求为第几页的数据,

后端根据请求参数,返回对应页的数据

第一页可以不传参数, currentPage默认值为1。

1.4实现服务器代码

1.4.1控制层:

完善 BookController

    @RequestMapping("getListByPage")public PageResult<BookInfo> getListByPage(PageRequest pageRequest){log.info("查询列表信息，pageRequest:{}",pageRequest);if(pageRequest.getCurrentPage()< 1){return null;}//这里返回null。会导致前端不知道是没有数据为null。还是当前页错误返回null//先不管，后续改进/*** 通过Service来去调用数据库*/return bookService.getListByPage(pageRequest);}

1.4.2 业务层 :

完善 BookService

    public PageResult<BookInfo> getListByPage(PageRequest pageRequest) {/*** 1.查询记录的总数* 2.查询当前页的数据*/Integer count = bookInfoMapper.count();//bookInfos来接收查询到的数据List<BookInfo> bookInfos = bookInfoMapper.queryListByPage(pageRequest);for(BookInfo bookInfo : bookInfos){/*** 根据book状态设置描述（stateCN）*/                    bookInfo.setStateCN(BookStatusEnums.getDescByCode(bookInfo.getStatus()).getDesc());}return new PageResult<>(bookInfos,count);}

1.4.3 数据层 :

完善 BookInfoMapper

    /*** 查询总数* @return*///count(1)：返回满足条件的记录数（即行数）。count(1) 和 count(*) 基本等效，都是用于统计记录数。@Select(("select count(1) from book_info where status <> 0"))Integer count();//希望把新添加的图书放到下面，因此order by id desc降序。@Select("select * from book_info where status <> 0 order by id desc limit #{offset},#{pageSize}")List<BookInfo> queryListByPage(PageRequest pageRequest);

1.5校验后端

不用传参也行，因为我们默认currentPage 为1。且pageSize为5。

我们发现返回正确。

总记录数也返回正确。为46。

我们发现后端接口没有问题。

1.6实现前端代码

1.6.1显示图书数据的内容

将前端<tbody>标签中的内容，也就是

        <tbody>//这里的内容我们用findHtml变量拼接并传送到这个标签里了</tbody>

我们写在ajax中使用findHtml变量进行拼接。并用如下方法传送到这个标签中。
$("tbody").html(findHtml); //塞到tbody这个标签里面

            success: function (result) {var books = result.records;console.log(books); //如果前端没有报错，那么我们打印日志。观察后端返回结果对不对var findHtml = "";  //用这个变量来拼接HTMLfor (var book of books) {//拼接html。假如后端返回10个tr那么直接for循环拼接在这里面。findHtml//我们用单引号拼接，因为里面有双引号findHtml += '<tr>';findHtml += '<td><input type="checkbox" name="selectBook" value="' +book.id +'" id="selectBook" class="book-select"></td>';findHtml += "<td>" + book.id + "</td>";findHtml += "<td>" + book.bookName + "</td>";findHtml += "<td>" + book.author + "</td>";findHtml += "<td>" + book.count + "</td>";findHtml += "<td>" + book.price + "</td>";findHtml += "<td>" + book.publish + "</td>";findHtml += "<td>" + book.stateCN + "</td>";findHtml += "<td>";findHtml += '<div class="op">';findHtml +='<a href="book_update.html?bookId=' + book.id + '">修改</a>';findHtml +='<a href="javascript:void(0)" onclick="deleteBook('+book.id +')">删除</a>';findHtml += "</div>";findHtml += "</td>";findHtml += "</tr>";}$("tbody").html(findHtml); //塞到tbody这个标签里面

1.6.2处理翻页信息

我们需要在前端head标签中引入jquery 和 paginator

相当于引入插件

    <script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script><script src="js/jq-paginator.js"></script>

      <div class="demo"><ul id="pageContainer" class="pagination justify-content-center"></ul></div>

              //处理翻页信息console.log(result);console.log(result.pageRequest);//翻页信息$("#pageContainer").jqPaginator({totalCounts: result.count, //总记录数pageSize: 10, //每页的个数visiblePages: 5, //可视页数currentPage: result.pageRequest.currentPage, //当前页码first:'<li class="page-item"><a class="page-link">首页</a></li>',prev: '<li class="page-item"><a class="page-link" href="javascript:void(0);">上一页<\/a><\/li>',next: '<li class="page-item"><a class="page-link" href="javascript:void(0);">下一页<\/a><\/li>',last: '<li class="page-item"><a class="page-link" href="javascript:void(0);">最后一页<\/a><\/li>',page: '<li class="page-item"><a class="page-link" href="javascript:void(0);">{{page}}<\/a><\/li>',//页面初始化和页码点击时都会执行onPageChange: function (page, type) {console.log("第" + page + "页, 类型:" + type);if(type == "change"){location.href = "book_list.html?currentPage="+page;}},});

1.7校验前后端

成功实现图书列表显示以及翻页功能。

二、修改图书列表功能

2.1约定前后端交互接口

1.进入修改页面，需要显示当前 Id 图书的信息

[请求]

/book/queryBookById?bookId=25

[参数]

bookId

[响应]

{

"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，获取当前图书的信息

2.点击修改按钮，修改图书信息

[请求]

/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

[响应] true/false

我们约定,

浏览器给服务器发送一个 /book/updateBook 这样的HTTP请求,

form表单的形式来提交数据

服务器返回处理结果,

返回"修改成功"修改图书成功,否则,返回失败信息.

2.2实现服务器端代码

2.2.1控制层:

    @RequestMapping("/queryBookById")public BookInfo queryBookById(Integer bookId){log.info("查询图书信息，bookId:"+bookId);if(bookId == null || bookId<=0){return new BookInfo();}return bookService.queryBookById(bookId);}@RequestMapping("/updateBook")//先使用boolean类型返回。后续我们还会再进行完善。public boolean upDateBook(BookInfo bookInfo){log.info("修改图书信息, updateBook{}:",bookInfo);if(!StringUtils.hasLength(bookInfo.getBookName())|| !StringUtils.hasLength(bookInfo.getAuthor())|| !StringUtils.hasLength(bookInfo.getPublish())|| bookInfo.getCount() <=0|| bookInfo.getPrice()==null){return false;}try {Integer result = bookService.updateBook(bookInfo);if(result <= 0){return false;}}catch (Exception e){log.error("更新图书失败");return false;}return true;}

2.2.2 业务层 :

    public BookInfo queryBookById(Integer bookId) {return bookInfoMapper.queryBookById(bookId);}public Integer updateBook(BookInfo bookInfo) {return bookInfoMapper.updateBook(bookInfo);}

2.2.3 数据层 :

    /*** 根据Id查询图书信息* @param id* @return*/@Select("select * from book_info where status <> 0 and  id = #{id}")BookInfo queryBookById(Integer id);/*** 根据Id修改图书信息*/Integer updateBook(BookInfo bookInfo);

根据 Id 修改图书信息我们使用的是XML方式实现的SQL

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.qiyangyang.springbook.demos.mapper.BookInfoMapper"><update id="updateBook">update book_info<set><if test="bookName != null">book_name = #{bookName},</if><if test="author != null">author = #{author},</if><if test="count != null">count  = #{count},</if><if test="price != null">price = #{price},</if><if test="publish != null">publish = #{publish},</if><if test="status != null">status = #{status},</if></set>where id = #{id}</update>
</mapper>

2.3校验后端

我发现这个接口都校验成功。

2.3.1校验queryBookById接口

2.3.2校验updateBook接口

修改成功！

2.4实现前端代码

注意：前端传递数据的时候记得加上id。

    <script type="text/javascript" src="js/jquery.min.js"></script><script>//查询当前ID图书$.ajax({type: "get",url: "book/queryBookById"+location.search,success:function(book){if(book!=null){$("#bookId").val(book.id);$("#bookName").val(book.bookName);$("#bookAuthor").val(book.author);$("#bookStock").val(book.count);$("#bookPrice").val(book.price);$("#bookPublisher").val(book.publish);$("#bookStatus").val(book.status);}}});//更新当前Id图书function update() {$.ajax({type: "get",url: "/book/updateBook",data:$("#updateBook").serialize(),//提交整个表单success:function(result){if(result == true){alert("更新成功");location.href = "book_list.html"}else{alert("更新失败");}}});}</script>

2.5整体测试

比如我们要将图书ID为135的图书

作者修改为洋洋

数量修改为 888

价格修改为 666

出版社修改为人民出版社

可借阅修改为不可借阅

修改成功！！！！！

三、逻辑删除图书

删除图书分为

逻辑删除（update）：

从逻辑上进行删除，数据并没有真实删除

物理删除（delete语句）：

数据真实删除。

但数据并没有真实清空，只是数据库上看不到了。

硬件存储上还是存在的

删除并归档（操作交为复杂）：insert into... select....语句

1.删除（delete or update）

2.归档（把已经删除的数据存储下来）

3.1约定前后端交互接口

逻辑删除的话,

依然是更新逻辑,我们可以直接使用修改图书的接口

[请求]

/book/updateBook

Content-Type: application/x-www-form-urlencoded; charset=UTF-8

[参数]

id=1&status=0

[响应]

true / false

3.2实现服务器代码

3.2.1控制层:

由于我们在upadate接口中只需要传递 id 和 status 两个参数。

因此我们需要修改控制层中的校验参数的步骤

    @RequestMapping("/updateBook")//先使用boolean类型返回。后续我们还会再进行完善。public boolean upDateBook(BookInfo bookInfo){log.info("修改图书信息, updateBook{}:",bookInfo);if(!StringUtils.hasLength(bookInfo.getBookName())|| !StringUtils.hasLength(bookInfo.getAuthor())|| !StringUtils.hasLength(bookInfo.getPublish())|| bookInfo.getCount() <=0|| bookInfo.getPrice()==null){return false;}try {Integer result = bookService.updateBook(bookInfo);if(result <= 0){return false;}}catch (Exception e){log.error("更新图书失败");return false;}return true;}

修改为

    @RequestMapping("/updateBook")//先使用boolean类型返回。后续我们还会再进行完善。public boolean updateBook(BookInfo bookInfo){log.info("修改图书信息, updateBook{}:",bookInfo);if(bookInfo.getId()<0){return false;}try {Integer result = bookService.updateBook(bookInfo);if(result <= 0){return false;}}catch (Exception e){log.error("更新图书失败");return false;}return true;}

3.2.2 业务层 :

同之前的updateBook一样

    public Integer updateBook(BookInfo bookInfo) {return bookInfoMapper.updateBook(bookInfo);}

3.2.3 数据层 :

同之前的update一样

    /*** 根据Id修改图书信息*/Integer updateBook(BookInfo bookInfo);

    <update id="updateBook">update book_info<set><if test="bookName != null">book_name = #{bookName},</if><if test="author != null">author = #{author},</if><if test="count != null">count  = #{count},</if><if test="price != null">price = #{price},</if><if test="publish != null">publish = #{publish},</if><if test="status != null">status = #{status},</if></set>where id = #{id}</update>

校验后端接口

134号图书 status 成功修改为0

3.3实现前端代码

        function deleteBook(id) {//删除图书var isDelete = confirm("确认删除?");if (isDelete) {$.ajax({type: "post",url: "/book/updateBook",data:{id: id,status: 0},success:function(result){if(result == true){alert("删除成功");location.href = "book_list.html";}}});}}

3.4整体校验

删除132号图书三体

成功删除！！！！！！！！！！！

四、批量逻辑删除

4.1定义前后端交互接口

请求：

/book/batchDeleteBook

参数：

响应：

true/false

4.2实现服务器端代码

4.2.1控制层:

注意加上：注解@RequestParam

    @RequestMapping("/batchDelete")public boolean batchDelete(@RequestParam List<Integer> ids){log.info("批量删除数据，ids：{}",ids);try {Integer result = bookService.batchDelete(ids);if(result <= 0){return false;}}catch (Exception e){log.info("批量删除失败,id:{},e:{}", ids, e);return false;}return true;}

4.2.2 业务层 :

    public Integer batchDelete(List<Integer> ids) {return bookInfoMapper.batchDelete(ids);}

4.2.3 数据层 :

注意加上注解：

@Param("ids")

    Integer batchDelete(@Param("ids") List<Integer> ids);

    <update id="batchDelete">update book_infoset status = 0where id in<foreach collection="ids" open="(" close=")" item="id" separator=",">#{id}</foreach></update>

4.3后端校验

后端操作成功

4.4实现前端代码

        function batchDelete() {var isDelete = confirm("确认批量删除?");if (isDelete) {//获取复选框的idvar 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 == true){alert("批量删除成功");location.href = "book_list.html";}else{alert("删除失败，请联系管理员！");}}});}}