【Spring项目】图书管理系统

阿华的代码王国2024-12-08 21:24

阿华代码，不是逆风，就是我疯

你们的点赞收藏是我前进最大的动力！！

希望本文内容能够帮助到你！！

目录

一：项目实现准备

1：需求

（1）登录

2：准备工作

二：约定前后端交互接口

1：需求分析

[（1） 账号密码校验接⼝](#（1） 账号密码校验接⼝)

（2）图书列表

2：接口定义

（1）登录接⼝

（2）图书列表

3：字段说明

三：服务器代码实现

1：创建图书类BookInfo

2：创建UserController

[3： 创建模拟（dao）包](#3： 创建模拟（dao）包)

四：完善前端代码

1：添加登录处理逻辑

2：删除代码

3：完善获取图书方法

​五：测试

一：项目实现准备

1：需求

（1）登录

⽤⼾输⼊账号,密码完成登录功能（2） 列表展⽰

展⽰图书

2：准备工作

放入前端代码，注：代码顺序如下，js，css，picture自行准备

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/add.css">

</head>

<body>

    <div class="container">

        <div class="form-inline">
            <h2 style="text-align: left; margin-left: 10px;"><svg xmlns="http://www.w3.org/2000/svg" width="40"
                    fill="#17a2b8" class="bi bi-book-half" viewBox="0 0 16 16">
                    <path
                        d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z" />
                </svg>
                <span>添加图书</span>
            </h2>
        </div>

        <form id="addBook">
            <div class="form-group">
                <label for="bookName">图书名称:</label>
                <input type="text" class="form-control" placeholder="请输入图书名称" id="bookName" name="bookName">
            </div>
            <div class="form-group">
                <label for="bookAuthor">图书作者</label>
                <input type="text" class="form-control" placeholder="请输入图书作者" id="bookAuthor" name="author" />
            </div>
            <div class="form-group">
                <label for="bookStock">图书库存</label>
                <input type="text" class="form-control" placeholder="请输入图书库存" id="bookStock" name="count"/>
            </div>

            <div class="form-group">
                <label for="bookPrice">图书定价：</label>
                <input type="number" class="form-control" placeholder="请输入价格" id="bookPrice" name="price">
            </div>

            <div class="form-group">
                <label for="bookPublisher">出版社</label>
                <input type="text" id="bookPublisher" class="form-control" placeholder="请输入图书出版社" name="publish" />
            </div>
            <div class="form-group">
                <label for="bookStatus">图书状态</label>
                <select class="custom-select" id="bookStatus" name="status">
                    <option value="1" selected>可借阅</option>
                    <option value="2">不可借阅</option>
                </select>
            </div>

            <div class="form-group" style="text-align: right">
                <button type="button" class="btn btn-info btn-lg" onclick="add()">确定</button>
                <button type="button" class="btn btn-secondary btn-lg" onclick="javascript:history.back()">返回</button>
            </div>
        </form>
    </div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script>
        function add() {
            alert("添加成功");
            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>
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/add.css">
</head>

<body>

    <div class="container">
        <div class="form-inline">
            <h2 style="text-align: left; margin-left: 10px;"><svg xmlns="http://www.w3.org/2000/svg" width="40"
                    fill="#17a2b8" class="bi bi-book-half" viewBox="0 0 16 16">
                    <path
                        d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z" />
                </svg>
                <span>修改图书</span>
            </h2>
        </div>

        <form id="updateBook">
            <input type="hidden" class="form-control" id="bookId" name="id">
            <div class="form-group">
                <label for="bookName">图书名称:</label>
                <input type="text" class="form-control" id="bookName" name="bookName">
            </div>
            <div class="form-group">
                <label for="bookAuthor">图书作者</label>
                <input type="text" class="form-control" id="bookAuthor" name="author"/>
            </div>
            <div class="form-group">
                <label for="bookStock">图书库存</label>
                <input type="text" class="form-control" id="bookStock" name="count"/>
            </div>
            <div class="form-group">
                <label for="bookPrice">图书定价：</label>
                <input type="number" class="form-control" id="bookPrice" name="price">
            </div>
            <div class="form-group">
                <label for="bookPublisher">出版社</label>
                <input type="text" id="bookPublisher" class="form-control" name="publish"/>
            </div>
            <div class="form-group">
                <label for="bookStatus">图书状态</label>
                <select class="custom-select" id="bookStatus" name="status">
                    <option value="1" selected>可借阅</option>
                    <option value="2">不可借阅</option>
                </select>
            </div>
            <div class="form-group" style="text-align: right">
                <button type="button" class="btn btn-info btn-lg" onclick="update()">确定</button>
                <button type="button" class="btn btn-secondary btn-lg" onclick="javascript:history.back()">返回</button>
            </div>
        </form>
    </div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script>
        
        function update() {
            alert("更新成功");
            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>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>

二：约定前后端交互接口

1：需求分析

后端需要提供两个接⼝

（1） 账号密码校验接⼝

根据输⼊⽤⼾名和密码校验登录是否通过

（2）图书列表

提供图书列表信息

2：接口定义

（1）登录接⼝

[URL]

POST /user/login

[请求参数]

name=admin&password=admin

[响应]

true //账号密码验证成功

false//账号密码验证失败

（2）图书列表

[URL]

POST /book/getList

[请求参数]

⽆

[响应]------JSON的形式返回

返回图书列表

[

{

"id": 1,

"bookName": "活着",

"author": "余华",

"count": 270,

"price": 20,

"publish": "北京⽂艺出版社",

"status": 1,

"statusCN": "可借阅"

},

...

]

3：字段说明

三：服务器代码实现

1：创建图书类BookInfo

java 复制代码 
@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;
    private String statusCN;
}

2：创建UserController

实现登录验证接⼝

java 复制代码 
@RequestMapping("/user")
@RestController
public class UserController {
    @RequestMapping("/login")
    public String login(String userName , String password , HttpSession session){
        //1:校验参数
        if(!StringUtils.hasLength(userName)
                || !StringUtils.hasLength(password)){
            return "用户名或者密码为空";
        }
        //2：验证账户和密码
        if(!"admin".equals(userName) || !"admin".equals(password)){
            return "账户名错误或密码错误";
        }
        //3：返回响应结果
        return "登录成功";
    }

创建BookController,获取图书列表

java 复制代码 
@RequestMapping("/book")
@RestController
public class BookController {
    @Autowired
    private BookService bookService;//注入依赖
    @RequestMapping("/getBookList")
    //mock数据模拟造假数据
    public List<BookInfo> getBookList(){
        //BookService bookService = new BookService();
        List<BookInfo> bookInfos =bookService.getBookList();
        return bookInfos;
    }
}

3： 创建模拟（dao）包

注：数据采⽤mock的⽅式,实际数据应该从数据库中获取

此处创建⼀个虚拟的对象或者数据样本，⽤来辅助开发或者测试⼯作

在dao包下创建BookDao类

java 复制代码 
@Configuration
public class BookDao {
    //数据层，理论上应该从数据库中获取，当前采用mock的方式进行获取
    public List<BookInfo> mockData(){
        List<BookInfo> bookInfos = new ArrayList<>();
        for(int i = 0; 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("不可借阅");状态信息是业务逻辑放到service中进行处理
            }else{
                bookInfo.setStatus(1);
                //bookInfo.setStatusCN("可借阅");
            }
            bookInfos.add(bookInfo);
        }
        return bookInfos;
    }
}

四：完善前端代码

1：添加登录处理逻辑

html 复制代码 
<script>
        function login() {
            //发起ajax请求
            $.ajax({
                url: "user/login",
                type: "post",
                data: {
                    userName: $("#userName").val(),
                    password: $("#password").val(),
                },
                success: function(result){
                    //三种返回的http响应都是成功的
                    if(result === "登录成功"){
                        location.href = "book_list.html";
                    }else{
                        alert(result);
                    }
                }
            });
        }
    </script>

2：删除代码

删除前端伪造的代码，从后端获取数据并渲染到⻚⾯上

html 复制代码 
<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>

3：完善获取图书方法

html 复制代码 
function getBookList() {
                $.ajax({
                    url:"/book/getBookList",
                    type: "get",
                    success:function(books){
                        var finnalHtml = "";
                        for(var book of books){
                            //用单引号拼接避免转义
                            finnalHtml += '<tr>';
                            finnalHtml += '<td><input type="checkbox" name="selectBook" value="'+book.id+'" id=" selectBook" class="book-select"></td>';
                            finnalHtml += '<td>'+book.id+'</td>';
                            finnalHtml += '<td>'+book.bookName+'</td>';
                            finnalHtml += '<td>'+book.author+'</td>';
                            finnalHtml += '<td>'+book.num+'</td>';
                            finnalHtml += '<td>'+book.price+'</td>';
                            finnalHtml += '<td>'+book.publishName+'</td>';
                            finnalHtml += '<td>'+book.statusCN+'</td>';
                            finnalHtml += '<td>';
                            finnalHtml += '<div class="op">';
                            finnalHtml += '<a href="book_update.html?bookId='+book.id+'">修改</a>';
                            finnalHtml += '<a href="javascript:void(0)" onclick="deleteBook(4)">删除</a>';
                            finnalHtml += '</div>';
                            finnalHtml += '</td>';
                            finnalHtml += '</tr>';
                        }
                        $("tbody").html(finnalHtml);
                    }
                   
                });
            }

五：测试

访问:http://127.0.0.1:8080/login.html,输⼊账号密码:admin，admin,登录成功,跳转到图书列表⻚

界⾯展⽰

相关推荐
靠谱杨3 分钟前
Java 反射实战：动态属性处理的艺术 - 图表参数解析器揭秘
java
EdwardYange8 分钟前
springboot 面试集锦题目
spring boot·后端·面试
KEEPMA11 分钟前
SpringBoot左脚进门之常用注解
java·spring boot·后端
胡八一17 分钟前
Maven插件打包发布远程Docker镜像
java·docker·maven
Abelard_27 分钟前
JVM--内存结构
java·开发语言·jvm
JWASX30 分钟前
定时/延时任务-Netty时间轮源码分析
java·netty·定时任务·时间轮
oioihoii39 分钟前
深入解析C++中的函数指针与`typedef`的妙用
java·开发语言·c++
程序猿进阶1 小时前
Dead Code Clean
java·spring boot·后端·kafka·代码规范·质量管理·代码清理
枫叶落雨2221 小时前
jdk1.8安装及环境配置（最新最详细教学！！！）
java·jdk1.8
热门推荐
01Windows11 Copilot助手开启教程(免费GPT-4)0204 - matlab m_map地学绘图工具基础函数 - 设置网格03玄机平台应急响应—webshell查杀04『手写ahooks系列-useClickAway』一个hook解决监听点击元素外部05【halcon】halcon字符识别——OCR06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07量化方法怎么选？如何评估量化后的大模型LLM？08支付宝短视频平台创作分成激励项目09Docker 夺命连环 15 问10MacBook外接键盘修改键位