跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客GitHub 精选镜像AI 生图工具UI配色美学隐私政策关于联系
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
Java大前端java

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

Spring Boot 结合 jQuery 实现前后端分离的图书管理系统。内容包含后端 BookInfo 实体与 Controller 接口编写、Mock 数据生成策略、前端 AJAX 登录与列表渲染逻辑。深入探讨 GET 与 POST 请求在参数位置、数据格式约定上的区别,提供前后端联调时的排查思路与最佳实践。

remedios发布于 2026/3/28更新于 2026/7/2337 浏览
Spring Boot + jQuery 前后端分离图书管理系统实战

图书管理系统开发实战

1. 需求分析与接口设计

这是一个相对完整的前后端分离案例,我们先聚焦于核心功能的实现,主要包括用户登录验证和图书列表展示。

字段定义

首先明确数据模型,图书信息包含以下关键字段:

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

2. 后端实现

实体类定义

创建 BookInfo 类来映射数据库结构,使用 Lombok 简化 Getter/Setter。

@Data
public class BookInfo {
    private Integer id;
    private String bookName;
    private String author;
    private Integer count;
    private BigDecimal price;
    private String publish;
    private Integer status;
    private String statusCN;
    private Date createTime;
    private Date updateTime;
}
控制器与 Mock 数据

为了便于开发和测试,在没有真实数据库连接时,我们可以使用 Mock 数据。这不仅是临时方案,也是协同开发时的常用手段。

UserController:处理登录逻辑。

@RequestMapping("/user")
@RestController
public class UserController {
    @RequestMapping("login")
    public boolean login {
         (!StringUtils.hasLength(name) || !StringUtils.hasLength(password)) {
             ;
        }
        
         (.equals(name) && .equals(password)) {
            session.setAttribute(, name);
             ;
        }
         ;
    }
}
(String name, String password, HttpSession session)
if
return
false
// 演示环境硬编码,生产环境请替换为数据库校验
if
"admin"
"admin"
"userName"
return
true
return
false

BookController:获取图书列表。

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

提示:将 Mock 逻辑封装成独立方法,不仅让代码更整洁,后续接入真实数据库时也只需替换该方法内部实现,无需改动上层调用逻辑。

3. 前端交互

前端使用 jQuery 发起 Ajax 请求,实现无刷新交互。

登录逻辑
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("账号或密码不正确!");
            }
        }
    });
}
列表渲染

移除页面硬编码,改为动态获取后端数据。

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>";
                    finalHtml += "<td><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);
            }
        }
    });
}

4. 常见问题排查与协议解析

前后端联调时,最容易出问题的地方往往在于 HTTP 协议的细节理解上。

GET 与 POST 的实际区别

很多初学者认为 GET 和 POST 只是传参方式不同,其实核心在于参数位置和数据格式约定。

  1. 参数位置

    • GET: 参数必须放在 URL 查询字符串中(Params)。
    • POST: 参数可以放在 URL,也可以放在 Body 中。实际开发中,涉及敏感信息或复杂数据时,通常放在 Body。
  2. 格式一致性

    • GET: 由于参数在 URL,后端直接解析 QueryString,不存在格式歧义。
    • POST: 如果参数在 Body,前后端必须约定好格式。例如前端发 JSON,后端必须用 @RequestBody 接收;前端发 Form Data,后端需对应解析。否则会出现'前端传了,后端收不到'的经典问题。
  3. 语义与限制

    • GET: 幂等操作,适合获取资源。受 URL 长度限制,不适合传输大量数据或敏感信息。
    • POST: 非幂等,适合提交资源。无明确大小限制,相对更安全(建议配合 HTTPS)。

注意:虽然理论上 GET 请求可以带 Body,但 Postman 等工具默认隐藏该选项是为了遵循行业规范。强行给 GET 加 Body 会导致中间件(如 Nginx、CDN)丢弃数据或缓存失效,属于不良实践。

调试技巧

当接口不通时,不要盲目改代码,按以下步骤排查:

  1. 检查后端入口:使用 Postman 直接调用接口,确认请求是否到达服务器,打印日志查看参数是否正确。
  2. 检查返回值:确认后端返回的数据结构是否符合前端预期。
  3. 检查前端请求:打开浏览器控制台(F12),查看 Network 面板,对比请求头、URL 和响应体。

通过这种分层排查,能快速定位是网络层、协议层还是业务逻辑层的问题。

目录

  1. 图书管理系统开发实战
  2. 1. 需求分析与接口设计
  3. 字段定义
  4. 2. 后端实现
  5. 实体类定义
  6. 控制器与 Mock 数据
  7. 3. 前端交互
  8. 登录逻辑
  9. 列表渲染
  10. 4. 常见问题排查与协议解析
  11. GET 与 POST 的实际区别
  12. 调试技巧
  • 免费图片AI生成工具免费生成了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 免费图片视频在线生成30秒,将你的创意变成现实开始设计
  • X/Twitter免费视频下载器免登陆无限额度免费视频解析下载了解详情
  • 100+免费在线小游戏爽一把
极客日志微信公众号二维码

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

微信公众号「极客日志V2」,在微信中扫描左侧二维码关注。展示文案:极客日志V2 zeeklog

更多推荐文章

查看全部
  • Ubuntu 22.04 搭建 PX4 无人机 ROS2 仿真环境 (Micro XRCE-DDS Agent)
  • Linux 字体管理与安装详细教程
  • Windows 上安装 vLLM 的两种方法
  • OpenClaw 本地部署指南:隧道配置与百炼模型接入
  • AnythingLLM 集成 Whisper 实现高效语音转文本处理
  • QClaw 接入微信背后的 AI 进化:从对话到任务执行
  • AI 绘画精讲与 AIGC 时代游戏美术设计:从入门到精通
  • Linux System V 共享内存:原理、实操与避坑指南
  • Spring Cloud + AI:微服务架构下的智能路由、故障自愈与日志分析
  • 基于 SpringBoot 的农产品销存一体化系统设计与实现
  • 深入解析 Go 设计模式:组合模式实战
  • 计算机网络基础定义与资源交换机制
  • HarmonyOS Location Kit 地理围栏双方案实战:端侧与云侧落地指南
  • Python 实战:2025 中秋月相计算与月球数据可视化
  • 荣耀发布 Robot Phone 与人形机器人 ROBOT,探索 AI 硬件生态
  • 算法:双指针法求解有效三角形个数
  • Apache IoTDB 跨「端 - 边 - 云」全场景部署与 DB+AI 实践
  • 从零搭建哪吒服务器探针 - 查看多端服务器状态
  • ionet 框架:Java 方法即 Action 的零学习成本之道
  • 网络安全热门证书解析:CISSP、CISP 与 CISA

相关免费在线工具

  • 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