Spring Boot：图书管理系统（一）

1.编写用户登录接口

代码：

package com.example.demo;

import jakarta.servlet.http.HttpSession;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/user")
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(!"lhy".equals(userName)||!"0407".equals(password)){
            return "密码错误";
        }
        session.setAttribute("userName", userName);
        return "ok";
    }
}

2.编写图书列表接口

先创建图书对象（用来接收前端的参数）

代码:

package com.example.demo;

import lombok.Data;

import java.math.BigDecimal;

@Data
public class BookInfo{

    // 图书的唯一标识符
    private Integer id;

    // 图书的名称
    private String bookName;

    // 图书的作者
    private String author;

    // 图书的某种编号或库存数量（这里假设为编号）
    private Integer num;

    // 图书的价格
    private BigDecimal price;

    // 出版图书的出版社名称
    private String publishName;

    // 图书的借阅状态。1表示图书可借阅，2表示图书不可借阅
    private Integer status;

    // 图书借阅状态的中文描述，用于更直观地展示图书的借阅情况
    private String statusCN;

}

3.编写图书列表接口

代码：

package com.example.demo;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.List;

// 使用@RestController注解将类标记为Spring MVC的控制器，并且该类中所有方法的返回值都会自动转换为JSON或XML格式
@RestController
// 使用@RequestMapping注解定义该控制器中所有请求的基础URL路径
@RequestMapping("book")
public class BookController {
    
    @RequestMapping("/getBookList")
    public List<BookInfo> getBookList(){
        List<BookInfo> bookInfos = new ArrayList<>(); // 创建一个空的图书信息列表
        // 使用for循环生成15条图书信息
        for (int i = 1; i <= 15 ; i++) {
            BookInfo bookInfo = new BookInfo(); // 创建一个新的图书信息对象
            bookInfo.setId(i); // 设置图书ID
            bookInfo.setBookName("图书"+i); // 设置图书名称
            bookInfo.setAuthor("作者"+i); // 设置图书作者
            bookInfo.setNum(i*2+1); // 假设这是图书的某个编号或者数量，这里简单设置为2*i+1
            bookInfo.setPrice(new BigDecimal(i*3)); // 设置图书价格，假设为3*i
            bookInfo.setPublishName("出版设"+i); // 设置出版社名称
            // 根据图书ID是否为5的倍数来设置图书的借阅状态
            if(i % 5 == 0){
                bookInfo.setStatus(2); // 设置不可借阅状态
                bookInfo.setStatusCN("不可借阅"); // 设置中文状态描述
            }else {
                bookInfo.setStatus(1); // 设置可借阅状态
                bookInfo.setStatusCN("可借阅"); // 设置中文状态描述
            }
            bookInfos.add(bookInfo); // 将图书信息添加到列表中
        }
        return bookInfos; // 返回包含所有图书信息的列表
    }

}

4.打开postman测试后端接口

用户验证成功

返回图书列表成功

5. 编写用户登录的前端代码（主要看AJAX）

代码：

<!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() {
            $.ajax({
                url: "/user/login",
                type: "post",
                data:{
                    userName: $("#userName").val(),
                    password: $("#password").val()
                },
                success:function(result){
                    if( result =="ok"){
                        //密码正确
                        location.href = "book_list.html";
                    }else{
                        alert(result);
                    }


                }
            });
        }
    </script>
</body>

</html>

6.前端测试

7.编写图书列表的前端代码

（有点错误，下面的那个多行换页没有显示出来）：

代码：

<!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: "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(' + book.id + ')">删除</a>';
                                finnalHtml += '</div></td></tr>';
                            }
                            $("tbody").html(finnalHtml);
                    }

                });
            }
             var data = book.data;
              //翻页信息
              $("#pageContainer").jqPaginator({
                                totalCounts: data.count, //总记录数
                                pageSize: 10,    //每页的个数
                                visiblePages: 5, //可视页数
                                currentPage: data.pageRequest.pageNum,  //当前页码
                                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?pageNum=" + page;
                                    }
                                }
                            });


            function deleteBook(id) {
                var isDelete = confirm("确认删除?");
                if (isDelete) {
                    //删除图书
                    $.ajax({
                        url: "/book/deleteBook",
                        type: "post",
                        data: {
                            bookId: id
                        },
                        success: function (result) {
                            console.log(result);
                            if (result.code == "SUCCESS" && result.data == true) {
                                // location.href = "book_list.html"+location.search;
                                location.href = "book_list.html";
                            } else {
                                alert("删除失败, 请联系管理员");
                            }
                        },
                        error: function (error) {
                            //用户未登录
                            if (error != null && error.status == 401) {
                                location.href = "login.html";
                            }
                        }
                    });
                    // 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);
                    $.ajax({
                        url: "/book/batchDeleteBook?ids=" + ids,
                        type: "post",
                        success: function (result) {
                            if (result.code == "SUCCESS" && result.data == "") {
                                //删除成功
                                location.href = "book_list.html";
                            } else {
                                alert(result.data);
                            }
                        },
                        error: function (error) {
                            //用户未登录
                            if (error != null && error.status == 401) {
                                location.href = "login.html";
                            }
                        }

                    });
                    // alert("批量删除成功");
                }
            }

        </script>
</div>
</body>

</html>