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

Java大前端java

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

基于 Spring Boot 和 jQuery 构建前后端分离的图书管理系统，涵盖实体类设计、控制器接口编写及 Mock 数据模拟策略。重点解析登录验证流程与列表渲染逻辑，并通过调试手段排查前后端交互问题。深入探讨 GET 与 POST 请求在参数位置、数据格式及安全性的实际差异，强调 Body 传参时前后端协议一致性的重要性，为开发提供实用的接口设计与排查思路。

晚风叙旧发布于 2026/3/21更新于 2026/4/231 浏览

图书管理系统

1. 准备前端代码

前端资源可参考项目仓库获取，这里主要关注后端接口设计与前后端联调逻辑。

2. 约定前后端交互接口

这是一个相对完整的项目案例，我们先聚焦核心功能实现：用户登录与图书列表展示。

文章配图

2.1 登录接口

文章配图

2.2 图书列表展示

文章配图

字段说明：

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

3. 后端核心逻辑实现

3.1 实体类定义

创建 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;
}

更多推荐文章

查看全部

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;
    }
}

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;
import java.util.Random;

@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 = 1; 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 前后端分离图书管理系统实战

图书管理系统

1. 准备前端代码

2. 约定前后端交互接口

2.1 登录接口

2.2 图书列表展示

3. 后端核心逻辑实现

3.1 实体类定义

更多推荐文章

3.2 控制器开发

4. 前端交互与渲染

4.1 登录页面

4.2 图书列表展示

5. 问题排查与调试

6. GET 与 POST 的实战区别

6.1 参数位置差异

6.2 数据格式一致性

6.3 语义与安全性

6.4 Postman 的约束本质

更多推荐文章

相关免费在线工具

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

图书管理系统

1. 准备前端代码

2. 约定前后端交互接口

2.1 登录接口

2.2 图书列表展示

3. 后端核心逻辑实现

3.1 实体类定义

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

更多推荐文章

3.2 控制器开发

4. 前端交互与渲染

4.1 登录页面

4.2 图书列表展示

5. 问题排查与调试

6. GET 与 POST 的实战区别

6.1 参数位置差异

6.2 数据格式一致性

6.3 语义与安全性

6.4 Postman 的约束本质

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

更多推荐文章

相关免费在线工具