Spring Boot + jQuery 前后端分离图书管理系统：从接口设计到问题排查 | 极客日志

Java大前端java

Spring Boot + jQuery 前后端分离图书管理系统：从接口设计到问题排查

综述由AI生成基于 Spring Boot 和 jQuery 的前后端分离图书管理系统的开发流程。内容涵盖登录接口设计、图书列表展示、后端 BookInfo 模型构建及 UserController 实现。通过 Mock 数据模拟数据库交互，解决了环境不稳定时的开发问题。详细讲解了前端 AJAX 请求处理及 GET 与 POST 方法的区别，包括参数位置、数据格式约定及安全性差异。最后提供了调试排查思路，帮助开发者解决前后端联调中的常见问题。

菩提发布于 2026/3/30更新于 2026/5/2327 浏览

图书管理系统

1. 准备前端代码

前端代码需自行准备，确保包含登录页面及图书列表展示页面。

2. 约定前后端交互接口

需求分析

图书管理系统是一个相对较大的案例，我们先实现其中的一部分功能，包括用户登录和图书列表展示。

文章配图

1. 登录接口

文章配图

2. 图书列表展示

文章配图

字段说明

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

3. 后端实现

创建图书类 BookInfo

import lombok.Data;
import java.math.BigDecimal;
import java.util.Date;

@Data
public class BookInfo {
    // 图书 ID
    private Integer id;
    // 书名
    private String bookName;
    
     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;
    }
}

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 获取图书信息
     * @return
     */
    public List<BookInfo> mockData() {
        List<BookInfo> books = new ArrayList<>();
        for (int i = 1; i < 5; i++) {
            BookInfo book = new BookInfo();
            book.setId(i);
            book.setBookName("书籍" + i);
            book.setAuthor("作者" + i);
            book.setCount(i * 3);
            book.setPrice(new BigDecimal((new Random()).nextInt(100)));
            book.setPublish("出版社" + i);
            book.setStatus(1);
            books.add(book);
        }
        return books;
    }
}

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.setCount(new Random().nextInt(100));
        bookInfo.setPrice(new BigDecimal(new Random().nextInt(100)));
        bookInfo.setPublish("出版社" + i);
        bookInfo.setStatus(i % 5 == 0 ? 2 : 1);
        bookInfos.add(bookInfo);
    }
    return bookInfos;
}

<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. 约定前后端交互接口

需求分析

1. 登录接口

2. 图书列表展示

字段说明

3. 后端实现

创建图书类 BookInfo

更多推荐文章

相关免费在线工具

创建 UserController，实现登录验证接口

创建 BookController，获取图书列表

Mock 数据说明

4. 前端页面调整

登录页面：添加登录处理逻辑

图书列表展示：删除前端伪造的代码，从后端获取数据并渲染到页面上

5. 问题排查与 HTTP 规范

调试思路

GET 和 POST 的区别

Postman 的约束本质

GET 带 Body 为什么是坏实践

更多推荐文章

相关免费在线工具

Spring Boot + jQuery 前后端分离图书管理系统：从接口设计到问题排查

图书管理系统

1. 准备前端代码

2. 约定前后端交互接口

需求分析

1. 登录接口

2. 图书列表展示

字段说明

3. 后端实现

创建图书类 BookInfo

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

更多推荐文章

相关免费在线工具

创建 UserController，实现登录验证接口

创建 BookController，获取图书列表

Mock 数据说明

4. 前端页面调整

登录页面：添加登录处理逻辑

图书列表展示：删除前端伪造的代码，从后端获取数据并渲染到页面上

5. 问题排查与 HTTP 规范

调试思路

GET 和 POST 的区别

Postman 的约束本质

GET 带 Body 为什么是坏实践

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

更多推荐文章

相关免费在线工具