Spring Boot 与 jQuery 前后端分离图书管理系统实战 | 极客日志

Java大前端java

Spring Boot 与 jQuery 前后端分离图书管理系统实战

综述由AI生成基于 Spring Boot 和 jQuery 构建前后端分离的图书管理系统，涵盖后端实体定义、Mock 数据策略、登录及列表接口实现，以及前端 Ajax 交互逻辑。重点讲解了接口调试方法，对比了 GET 与 POST 在实际开发中的参数位置、格式约定及安全性差异，帮助开发者理解 HTTP 协议规范，避免常见的前后端对接问题。

w795471发布于 2026/3/23更新于 2026/5/74 浏览

Spring Boot + jQuery 前后端分离图书管理系统

准备工作

准备好前端项目代码并引入到本地环境，后续我们将基于此进行前后端对接。

接口设计与后端实现

需求分析

图书管理系统是一个相对复杂的案例，我们先聚焦核心流程：用户登录和图书列表展示。

文章配图

1. 登录接口

文章配图

2. 图书列表展示

文章配图

字段说明

字段	说明
id	图书 ID
bookName	图书名称
author	作者
count	数量
price	定价
publish	图书出版社
status	图书状态 (1 - 可借阅，其他 - 不可借阅)
statusCN	图书状态中文含义

服务器代码实现

创建图书实体类 BookInfo

@Data
public class BookInfo {
    // 图书 ID
    private Integer id;
    // 书名
    private String bookName;
    // 作者
    private String author;
    // 数量
     Integer count;
    
     BigDecimal price;
    
     String publish;
    
     Integer status;
     String statusCN;
    
     Date createTime;
    
     Date updateTime;
}

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

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

@RequestMapping("/user")
@RestController
public class UserController {
    @RequestMapping("login")
    public boolean login(String name, String password, HttpSession session) {
        // 账号密码验证
        if (!StringUtils.hasLength(name) || !StringUtils.hasLength(password)) {
            return false;
        }
        // 账号密码正确，账号 admin & 密码 admin
        if ("admin".equals(name) && "admin".equals(password)) {
            session.setAttribute("userName", name);
            return true;
        }
        // 账号密码错误
        return false;
    }
}

@RequestMapping("/book")
@RestController
public class BookController {
    @RequestMapping("/getList")
    public List<BookInfo> getList() {
        // 模拟数据
        List<BookInfo> books = mockData();
        // 处理页面展示逻辑
        for (BookInfo book : books) {
            if (book.getStatus() == 1) {
                book.setStatusCN("可借阅");
            } else {
                book.setStatusCN("不可借阅");
            }
        }
        return books;
    }

    /**
     * 数据 Mock 获取图书信息
     */
    public List<BookInfo> mockData() {
        List<BookInfo> books = new ArrayList<>();
        for (int i = 0; i < 15; i++) {
            BookInfo book = new BookInfo();
            book.setId(i);
            book.setBookName("图书" + i);
            book.setAuthor("作者" + i); // 修正为与实体类一致的字段名
            book.setCount(new Random().nextInt(100));
            book.setPrice(new BigDecimal(new Random().nextInt(100)));
            book.setPublish("出版社" + i);
            book.setStatus(i % 5 == 0 ? 2 : 1);
            books.add(book);
        }
        return books;
    }
}

<script src="js/jquery.min.js"></script>
<script>
function login() {
    $.ajax({
        type: "post",
        url: "/user/login",
        data: {
            name: $("#userName").val(),
            password: $("#password").val()
        },
        success: function (result) {
            if (result) {
                location.href = "book_list.html";
            } else {
                alert("账号或密码不正确!");
            }
        }
    });
}
</script>

function getBookList() {
    var finalHtml = "";
    $.ajax({
        type: "get",
        url: "/book/getList",
        success: function (result) {
            console.log(result);
            if (result != null) {
                for (var book of result) {
                    finalHtml += "<tr><input type='checkbox' name='selectBook' value='" + book.id + "'></td>";
                    finalHtml += "<td>" + book.id + "</td>";
                    finalHtml += "<td>" + book.bookName + "</td>";
                    finalHtml += "<td>" + book.author + "</td>";
                    finalHtml += "<td>" + book.count + "</td>";
                    finalHtml += "<td>" + book.price + "</td>";
                    finalHtml += "<td>" + book.publish + "</td>";
                    finalHtml += "<td><div>" + book.statusCN + "</div></td>";
                    finalHtml += "<td><a href='book_update.html?bookId=" + book.id + "'>修改</a>";
                    finalHtml += "<a href='javascript:void(0)' onclick='deleteBook(" + book.id + ")'> 删除</a></td>";
                    finalHtml += "</tr>";
                }
                $("tbody").html(finalHtml);
            }
        }
    });
}

Spring Boot 与 jQuery 前后端分离图书管理系统实战

Spring Boot + jQuery 前后端分离图书管理系统

准备工作

接口设计与后端实现

需求分析

1. 登录接口

2. 图书列表展示

字段说明

服务器代码实现

创建图书实体类 BookInfo

更多推荐文章

相关免费在线工具

实现登录验证接口 UserController

获取图书列表 BookController

关于 Mock 数据的说明

前端交互实现

登录页面处理

图书列表渲染

调试与排查思路

GET 与 POST 深度解析

1. 参数位置差异

2. 数据格式约定

3. 语义与安全性

4. 为什么 GET 带 Body 是坏实践

更多推荐文章

相关免费在线工具

Spring Boot 与 jQuery 前后端分离图书管理系统实战

Spring Boot + jQuery 前后端分离图书管理系统

准备工作

接口设计与后端实现

需求分析

1. 登录接口

2. 图书列表展示

字段说明

服务器代码实现

创建图书实体类 BookInfo

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

实现登录验证接口 UserController

获取图书列表 BookController

关于 Mock 数据的说明

前端交互实现

登录页面处理

图书列表渲染

调试与排查思路

GET 与 POST 深度解析

1. 参数位置差异

2. 数据格式约定

3. 语义与安全性

4. 为什么 GET 带 Body 是坏实践

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具