21.＜基于Spring图书管理系统②（图书列表+删除图书+更改图书）（非强制登录版本完结）＞

用户11288958

发布于 2024-11-21 15:10:39

4370

文章被收录于专栏：学习学习

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 = "";  //用这个变量来拼接HTML
              for (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_info
        set status = 0
        where id in
        <foreach collection="ids" open="(" close=")" item="id" separator=",">
            #{id}
        </foreach>
    </update>

4.3后端校验

后端操作成功

4.4实现前端代码

        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 == true){
                  alert("批量删除成功");
                  location.href = "book_list.html";
                }else{
                  alert("删除失败，请联系管理员！");
                }
              }
            });
          }
        }

4.5整体测试

测试成功！！！！

五、强制登录

这个功能的实现我们下一篇文章再讲哦！！！！到这里其实这个图书管理系统的功能就基本实现完成了。不过对于这个图书管理系统。我们没有进行登录也可以进行操作。因此我们下一篇文章会详细讲解强制登录功能。并且后续会讲到统一功能！！！！！！！！！！！！！！！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-11-15，如有侵权请联系 cloudcommunity@tencent.com 删除

后端

前端

数据

spring

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度