AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

综合性练习（后端代码练习4）——图书管理系统

2024-06-04 29
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 综合性练习（后端代码练习4）——图书管理系统

需求：1、登录：用户输入完账号密码，完成登录功能；2、列表：展示图书

登录页面如下：

HTML代码如下：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/login.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
 
<body>
    <div class="container-login">
        <div class="container-pic">
            <img src="pic/computer.png" width="350px">
        </div>
        <div class="login-dialog">
            <h3>登陆</h3>
            <div class="row">
                <span>用户名</span>
                <input type="text" name="userName" id="userName" class="form-control">
            </div>
            <div class="row">
                <span>密码</span>
                <input type="password" name="password" id="password" class="form-control">
            </div>
            <div class="row">
                <button type="button" class="btn btn-info btn-lg" onclick="login()">登录</button>
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
        function login() {
            location.href = "book_list.html";
        }
    </script>
</body>
 
</html>

图书列表页面如下：

HTML代码如下：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书列表展示</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
 
    <link rel="stylesheet" href="css/list.css">
    <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>
 
</head>
 
<body>
    <div class="bookContainer">
        <h2>图书列表展示</h2>
        <div class="navbar-justify-between">
            <div>
                <button class="btn btn-outline-info" type="button" onclick="location.href='book_add.html'">添加图书</button>
                <button class="btn btn-outline-info" type="button" onclick="batchDelete()">批量删除</button>
            </div>
        </div>
 
        <table>
            <thead>
                <tr>
                    <td>选择</td>
                    <td class="width100">图书ID</td>
                    <td>书名</td>
                    <td>作者</td>
                    <td>数量</td>
                    <td>定价</td>
                    <td>出版社</td>
                    <td>状态</td>
                    <td class="width200">操作</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" name="selectBook" value="1" id="selectBook" class="book-select"></td>
                    <td>1</td>
                    <td>大秦帝国第一册</td>
                    <td>我是作者</td>
                    <td>23</td>
                    <td>33.00</td>
                    <td>北京出版社</td>
                    <td>可借阅</td>
                    <td>
                        <div class="op">
                            <a href="book_update.html?bookId=1">修改</a>
                            <a href="javascript:void(0)" onclick="deleteBook(1)">删除</a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="selectBook" value="1" id="selectBook" class="book-select"></td>
                    <td>2</td>
                    <td>大秦帝国第二册</td>
                    <td>我是作者</td>
                    <td>23</td>
                    <td>33.00</td>
                    <td>北京出版社</td>
                    <td>可借阅</td>
                    <td>
                        <div class="op">
                            <a href="book_update.html?bookId=2">修改</a>
                            <a href="javascript:void(0)" onclick="deleteBook(2)">删除</a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="selectBook" value="1" id="selectBook" class="book-select"></td>
                    <td>3</td>
                    <td>大秦帝国第三册</td>
                    <td>我是作者</td>
                    <td>23</td>
                    <td>33.00</td>
                    <td>北京出版社</td>
                    <td>可借阅</td>
                    <td>
                        <div class="op">
                            <a href="book_update.html?bookId=3">修改</a>
                            <a href="javascript:void(0)" onclick="deleteBook(3)">删除</a>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="selectBook" value="1" id="selectBook" class="book-select"></td>
                    <td>4</td>
                    <td>大秦帝国第四册</td>
                    <td>我是作者</td>
                    <td>23</td>
                    <td>33.00</td>
                    <td>北京出版社</td>
                    <td>可借阅</td>
                    <td>
                        <div class="op">
                            <a href="book_update.html?bookId=4">修改</a>
                            <a href="javascript:void(0)" onclick="deleteBook(4)">删除</a>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
 
        <div class="demo">
            <ul id="pageContainer" class="pagination justify-content-center"></ul>
        </div>
        <script>
 
            getBookList();
            function getBookList() {
                
            }
    
            //翻页信息
            $("#pageContainer").jqPaginator({
                totalCounts: 100, //总记录数
                pageSize: 10,    //每页的个数
                visiblePages: 5, //可视页数
                currentPage: 1,  //当前页码
                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);
                }
            });
            function deleteBook(id) {
                var isDelete = confirm("确认删除?");
                if (isDelete) {
                    //删除图书
                    alert("删除成功");
                }
            }
            function batchDelete() {
                var isDelete = confirm("确认批量删除?");
                if (isDelete) {
                    //获取复选框的id
                    var ids = [];
                    $("input:checkbox[name='selectBook']:checked").each(function () {
                        ids.push($(this).val());
                    });
                    console.log(ids);
                    alert("批量删除成功");
                }
            }
 
        </script>
    </div>
</body>
 
</html>

注意：这不是最终版本的，后续的学习会继续将这个项目完善，下面也不会用到数据库的操作，因为是初学，后面会继续更新博客，完善项目。


一、准备工作

       创建新的Spring Boot项目，把前端代码复制进项目中。如图：


二、约定前后端交互接口        

1、需求分析

       图书管理系统是一个相对较大的案例，我们先实现这两种功能：用户登录、图书列表展示，也就是上面需求那的两张图。

       根据需求得到，后端需要两个接口：

1、账号密码校验接口：根据输入用户名和密码校验登录是否通过。

2、图书列表：提供图书列表信息。

2、接口定义

（1）登录接口

URL：/user/login

请求参数：userName，password

返回结果（响应）：成功 / 失败 （String类型，成功返回：" " （空字符串）；失败返回失败原因）

（2）图书列表接口

URL：/book/getBookList

请求参数：无

返回结果（响应）：图书列表（ [{}, {}, {}, .....] ）

       图书列表的字段说明：

id 图书ID
bookName 图书名称
author 作者
num 数量
price 定价
publish 图书出版社
status 图书状态：1-可借阅   2-不可借阅
statusCN 图书状态中文含义


三、服务器代码

       创建一个图书类，代码如下：

@Data
public class BookInfo {
    private Integer id;
    private String bookName;
    private String author;
    private Integer num;
    private BigDecimal price;
    private String publishName;
    private Integer status;//1-可借阅   2-不可借阅
    private String statusCN;//状态的中文含义
}

（1）创建一个UserController类，实现登录验证接口

       代码如下：

@RestController
@RequestMapping("/user")
public class UserController {
    @RequestMapping("/login")
    public String login(String userName, String password, HttpSession session) {
        //1、校验参数
        //2、校验密码是否正确
        //3、返回响应结果
        if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)) {
            return "用户名或者密码为空";
        }
        if(!"admin".equals(userName) || !"admin".equals(password)) {
            return "账号或密码错误";
        }
        session.setAttribute("userName", userName);
        return "";
    }
}

（2）创建一个BookController类，实现获取图书列表接口

@RestController
@RequestMapping("/book")
public class BookController {
    List<BookInfo> bookInfos = new ArrayList<>();
    @RequestMapping("/getBookList")
    public List<BookInfo> getBookList() {
        for (int i = 1; i < 15; i++) {
            BookInfo bookInfo = new BookInfo();
            bookInfo.setId(i);
            bookInfo.setBookName("图书" + i);
            bookInfo.setAuthor("作者" + i);
            bookInfo.setNum(i * 2 + 1);
            bookInfo.setPrice(new BigDecimal(i * 3));
            bookInfo.setPublishName("出版社" + i);
            if(i % 5 == 0) {
                bookInfo.setStatus(2);
                bookInfo.setStatusCN("不可借阅");
            } else {
                bookInfo.setStatus(1);
                bookInfo.setStatusCN("可借阅");
            }
            bookInfos.add(bookInfo);
        }
        return bookInfos;
    }
}

注意：这里的数据采用mock的方式，实际数据应该从数据库中拿，但这里直接放在内存了，这里的数据也不是真实的数据。

mock：模拟的，假的

在开发和测试过程中，由于环境不稳定或者协同开发的同事未完成等情况下，有些数据不容易构造或者不容易获取，就会创建一个虚拟的对象或者数据样本，用来辅助开发或者测试工作。这些数据简单的来说也就是假数据。


四、调整前端页面代码

       主要逻辑都在JS里的ajax请求中。

（1）登录页面

       代码如下：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/login.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
 
<body>
    <div class="container-login">
        <div class="container-pic">
            <img src="pic/computer.png" width="350px">
        </div>
        <div class="login-dialog">
            <h3>登陆</h3>
            <div class="row">
                <span>用户名</span>
                <input type="text" name="userName" id="userName" class="form-control">
            </div>
            <div class="row">
                <span>密码</span>
                <input type="password" name="password" id="password" class="form-control">
            </div>
            <div class="row">
                <button type="button" class="btn btn-info btn-lg" onclick="login()">登录</button>
            </div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
 
        function login() {
            var userName = $("#userName").val();
            var password = $("#password").val();
            $.ajax({
                url: "/user/login",
                type: "post",
                data: {
                    userName: $("#userName").val(),
                    password: $("#password").val()
                },
                success: function(result) {
                    if(result == "") {
                    location.href = "book_list.html";
                    } else{
                        alert(result);
                    }
                }
            });
        }
    </script>
</body>
 
</html>

（2）图书列表展示

       代码如下：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书列表展示</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
 
    <link rel="stylesheet" href="css/list.css">
    <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>
 
</head>
 
<body>
    <div class="bookContainer">
        <h2>图书列表展示</h2>
        <div class="navbar-justify-between">
            <div>
                <button class="btn btn-outline-info" type="button" onclick="location.href='book_add.html'">添加图书</button>
                <button class="btn btn-outline-info" type="button" onclick="batchDelete()">批量删除</button>
            </div>
        </div>
 
        <table>
            <thead>
                <tr>
                    <td>选择</td>
                    <td class="width100">图书ID</td>
                    <td>书名</td>
                    <td>作者</td>
                    <td>数量</td>
                    <td>定价</td>
                    <td>出版社</td>
                    <td>状态</td>
                    <td class="width200">操作</td>
                </tr>
            </thead>
            <tbody>
 
            </tbody>
        </table>
 
        <div class="demo">
            <ul id="pageContainer" class="pagination justify-content-center"></ul>
        </div>
        <script>
 
            getBookList();
            function getBookList() {
                $.ajax({
                    url: "/book/getBookList",
                    type: "post",
                    success: function(books) {
                        console.log("拿到参数")
                        var finalHtml = "";
                        for(book of books) {
                            finalHtml += '<tr>';
                            finalHtml += '<td><input type="checkbox" name="selectBook" value="1" id="'+ book.id +'" class="book-select"></td>'
                            finalHtml += '<td>'+ book.id +'</td>';
                            finalHtml += '<td>'+book.bookName+'</td>';
                            finalHtml += '<td>'+ book.author +'</td>';
                            finalHtml += '<td>'+ book.num +'</td>';
                            finalHtml += '<td>'+ book.price +'</td>';
                            finalHtml += '<td>'+ book.publishName +'</td>';
                            finalHtml += '<td>'+ book.statusCN +'</td>';
                            finalHtml += '<td>';
                            finalHtml += '<div class="op">';
                            finalHtml += '<a href="book_update.html?bookId='+ book.id +'">修改</a>';
                            finalHtml += '<a href="javascript:void(0)" onclick="deleteBook('+ book.id +')">删除</a>';
                            finalHtml += '</div>';
                            finalHtml += '</td>';
                            finalHtml += '</tr>';
                        }
                        $("tbody").html(finalHtml);
                    }
                });
            }
    
            //翻页信息
            $("#pageContainer").jqPaginator({
                totalCounts: 100, //总记录数
                pageSize: 10,    //每页的个数
                visiblePages: 5, //可视页数
                currentPage: 1,  //当前页码
                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);
                }
            });
            function deleteBook(id) {
                var isDelete = confirm("确认删除?");
                if (isDelete) {
                    //删除图书
                    alert("删除成功");
                }
            }
            function batchDelete() {
                var isDelete = confirm("确认批量删除?");
                if (isDelete) {
                    //获取复选框的id
                    var ids = [];
                    $("input:checkbox[name='selectBook']:checked").each(function () {
                        ids.push($(this).val());
                    });
                    console.log(ids);
                    alert("批量删除成功");
                }
            }
 
        </script>
    </div>
</body>
 
</html>


五、运行测试

       浏览器访问：http://127.0.0.1:8080/login.html，页面如下：

       直接点击登录，页面如下：

       输入错误的用户名或者密码，页面如下：

       输入正确的用户名、密码，

       页面会跳转到 http://127.0.0.1:8080/book_list.html ，页面如下：

文章标签：
前端开发
数据安全/隐私保护
数据库
Java
JavaScript
关键词：
后端代码
后端练习
tao滔不绝
目录
相关文章
游客762btuqu5wybw666
|
2天前
|
数据库 开发者
后端开发的哲学：代码与人生的交织
在数字化的时代，后端开发不仅仅是技术的堆砌，它更像是一场深刻的人生修炼。本文将探讨后端开发中蕴含的哲理，以及这些哲理如何影响我们的职业生涯和人生观。我们将从代码的本质出发，逐步深入到人生的意义，最终理解为何“你必须成为你希望在世界上看到的改变。”
游客762btuqu5wybw666
13 4
土木林森
|
24天前
|
机器学习/深度学习 PyTorch 算法框架/工具
揭秘深度学习中的微调难题：如何运用弹性权重巩固（EWC）策略巧妙应对灾难性遗忘，附带实战代码详解助你轻松掌握技巧
【10月更文挑战第1天】深度学习中，模型微调虽能提升性能，但常导致“灾难性遗忘”，即模型在新任务上训练后遗忘旧知识。本文介绍弹性权重巩固（EWC）方法，通过在损失函数中加入正则项来惩罚对重要参数的更改，从而缓解此问题。提供了一个基于PyTorch的实现示例，展示如何在训练过程中引入EWC损失，适用于终身学习和在线学习等场景。
土木林森
41 4
揭秘深度学习中的微调难题：如何运用弹性权重巩固（EWC）策略巧妙应对灾难性遗忘，附带实战代码详解助你轻松掌握技巧
众所周知
|
17天前
|
jenkins Java 测试技术
如何使用 Jenkins 自动发布 Java 代码，通过一个电商公司后端服务的实际案例详细说明
【10月更文挑战第8天】本文介绍了如何使用 Jenkins 自动发布 Java 代码，通过一个电商公司后端服务的实际案例，详细说明了从 Jenkins 安装配置到自动构建、测试和部署的全流程。文中还提供了一个 Jenkinsfile 示例，并分享了实践经验，强调了版本控制、自动化测试等关键点的重要性。
众所周知
24 5
狗哥不是甜妹
|
5月前
|
存储 前端开发 小程序
表白墙完善（数据库，前端，后端Servlet），再谈Cookie和Session。以及一个关于Cookie的练习小程序
表白墙完善（数据库，前端，后端Servlet），再谈Cookie和Session。以及一个关于Cookie的练习小程序
狗哥不是甜妹
56 4
dream_ready
|
26天前
|
前端开发 Java
学习SpringMVC，建立连接，请求，响应 SpringBoot初学，如何前后端交互(后端版)？最简单的能通过网址访问的后端服务器代码举例
文章介绍了如何使用SpringBoot创建简单的后端服务器来处理HTTP请求，包括建立连接、编写Controller处理请求，并返回响应给前端或网址。
dream_ready
45 0
学习SpringMVC，建立连接，请求，响应 SpringBoot初学，如何前后端交互(后端版)？最简单的能通过网址访问的后端服务器代码举例
1554023534442740
|
10天前
|
存储 数据管理 API
零代码能力：轻松搞定表单和API接口，少写80%后端代码，内含资源
小白接口（果创云 YesApi.cn）是一个零代码和低代码开发平台，提供一站式后端云服务，帮助开发者、学生、业余爱好者、工作室、中小企业及无IT技术人员的传统企业快速搭建应用、接口、服务和网站。平台提供500+免费API接口，支持在线API开发、在线表单、数据库管理、图片文件存储、会员管理等功能，无需后端开发经验，轻松实现数据处理和应用开发。
1554023534442740
22 0
杀死一只知更鸟debug
|
2月前
|
SQL JSON Java
springboot 如何编写增删改查后端接口，小白极速入门，附完整代码
本文为Spring Boot增删改查接口的小白入门教程，介绍了项目的构建、配置YML文件、代码编写（包括实体类、Mapper接口、Mapper.xml、Service和Controller）以及使用Postman进行接口测试的方法。同时提供了SQL代码和完整代码的下载链接。
杀死一只知更鸟debug
144 0
springboot 如何编写增删改查后端接口，小白极速入门，附完整代码
aliyun8599273441-30642
|
3月前
|
JSON 安全 API
构建高效后端API：最佳实践与代码示例
【8月更文挑战第2天】 在数字化时代，后端API是连接数据与用户的桥梁。本文深入探讨了如何设计并实现高效的后端API，从理论到实践，提供了实用的技巧和代码示例。通过阅读本篇文章，你将学会如何避免常见的陷阱，优化你的API性能，从而提供更加流畅的用户体验。
aliyun8599273441-30642
170 57
丰宝宝
|
2月前
|
存储 关系型数据库 API
后端开发的艺术：从代码到云部署
在数字时代的浪潮中，后端开发如同一位默默无闻的艺术家，用代码绘制着互联网世界的底层画卷。本文将带你领略后端开发的奥秘，从基础的代码编写到复杂的云部署，每一步都是对技术深度与广度的挑战。我们将一起探索如何在变化莫测的技术海洋中找到自己的北极星，确保项目的成功和职业生涯的发展。无论你是初学者还是资深开发者，这篇文章都将为你提供新的视角和实用的技巧，让你的后端之旅更加精彩。
丰宝宝
33 2
土木林森
|
3月前
|
前端开发 IDE Java
"揭秘前端转Java的秘径：SpringBoot Web极速入门，掌握分层解耦艺术，让你的后端代码飞起来，你敢来挑战吗？"
【8月更文挑战第19天】面向前端开发者介绍Spring Boot后端开发，通过简化Spring应用搭建，快速实现Web应用。本文以创建“Hello World”应用为例，展示项目基本结构与运行方式。进而深入探讨三层架构（Controller、Service、DAO）下的分层解耦概念，通过员工信息管理示例，演示各层如何协作及依赖注入的使用，以此提升代码灵活性与可维护性。
土木林森
49 2

热门文章

最新文章

  • 1
    我的架构经验系列文章 - 后端架构 - 设计层面
  • 2
    使用(Python)FastAPI快速构建你的后端接口服务
  • 3
    Sentry(v20.12.1) K8S云原生架构探索,玩转前/后端监控与事件日志大数据分析,高性能高可用+可扩展可伸缩集群部署
  • 4
    nginx反代varnish缓存服务器实现后端amp动静分离架构
  • 5
    JAVA后端向前端传递Long类型数据，导致数据不一致
  • 6
    购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端，以及前后端Session
  • 7
    【nodejs】让nodejs像后端mvc框架（asp.net mvc ）一样处理请求--路由限制及选择篇（2/8）【route】
  • 8
    前端，测试如何修改后端接口返回的响应数据
  • 9
    前端校验和后端校验的区别和优缺点
  • 10
    后端码农谈前端（CSS篇）第七课：定位与浮动
  • 1
    构建高效可扩展的后端服务架构
    67
  • 2
    Java后端进阶之路： JavaWeb（四）
    55
  • 3
    Java后端进阶之路： JavaWeb（三）
    82
  • 4
    高效后端开发实践：构建可扩展的微服务架构
    209
  • 5
    未来人工智能在后端开发中的应用前景
    128
  • 6
    构建高效可靠的后端服务架构
    148
  • 7
    利用Django框架构建高效后端API服务
    184
  • 8
    slb后端服务器组（Backend Server Group）关联
    82
  • 9
    nacos常见问题之升级到2.1.0重启后端服务如何解决
    218
  • 10
    构建高效微服务架构：后端开发的新范式
    63

    • 相关课程

    更多
  • 软件供应商进阶管理实操
  • Java面试疑难点解析 - 系统架构及项目设计
  • 阿里云RPA（机器人流程自动化）- 初级入门（可视化）
  • 网站性能前端监控课程
  • 软件用户使用服务及供应商进阶管理
  • 零基础学前端HTML+CSS

    • 相关电子书

    更多
  • 十分钟上线-使用函数计算构建支付宝小程序服务
  • 机器学习在互联网后端技术中的应用
  • 2021前端热门技术解读

    • 相关实验场景

    更多
  • MySQL基础-学生管理系统数据库设计
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 语言入门-1：环境构建
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
  • 这样做，项目管理简单高效
    • 下一篇
    在 BatchCompute 上玩转 Blender 渲染