编辑

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

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

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

一：项目实现准备

1：需求

（1）登录

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

展⽰图书

编辑

2：准备工作

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

编辑

<!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>

<!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>

<!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>

<!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

@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

实现登录验证接⼝

@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,获取图书列表

@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类

@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：添加登录处理逻辑

<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：删除代码

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

<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：完善获取图书方法

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,登录成功,跳转到图书列表⻚

界⾯展⽰

编辑

【Spring项目】图书管理系统

一：项目实现准备

1：需求

（1）登录

2：准备工作

二：约定前后端交互接口

1：需求分析

（1）账号密码校验接⼝

（2）图书列表

2：接口定义

（1）登录接⼝

（2）图书列表

3：字段说明

三：服务器代码实现

1：创建图书类BookInfo

2：创建UserController

3：创建模拟（dao）包

四：完善前端代码

1：添加登录处理逻辑

2：删除代码

3：完善获取图书方法

编辑五：测试

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

【Spring项目】图书管理系统

一：项目实现准备

1：需求

（1）登录

2：准备工作

二：约定前后端交互接口

1：需求分析

（1） 账号密码校验接⼝

（2）图书列表

2：接口定义

（1）登录接⼝

（2）图书列表

3：字段说明

三：服务器代码实现

1：创建图书类BookInfo

2：创建UserController

3： 创建模拟（dao）包

四：完善前端代码

1：添加登录处理逻辑

2：删除代码

3：完善获取图书方法

编辑五：测试

热门文章

最新文章

相关课程

相关电子书

相关实验场景

（1）账号密码校验接⼝

3：创建模拟（dao）包