Spring Boot 结合 jQuery 实现前后端分离图书管理系统

2.2 用户控制层

UserController 负责处理登录请求。为了演示方便，这里使用硬编码的账号密码进行验证，实际项目中应对接数据库或加密服务。

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

2.3 图书控制层与 Mock 数据

BookController 提供获取图书列表的接口。在开发初期或测试阶段，直接连接数据库可能效率较低或环境不稳定，此时可以使用 Mock 数据模拟真实场景。

为什么使用 Mock？ Mock 即模拟数据。当协同开发的同事未完成接口，或者测试环境数据难以构造时，创建一个虚拟对象或数据样本能辅助开发和测试工作。简单来说，就是用假数据跑通流程。

为了保持代码整洁，我们将 Mock 逻辑封装成一个独立方法，这样后续接入真实数据时只需替换该方法内容即可。

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 生成
     */
    private 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;
    }
}

3. 前端页面联调

前端使用 jQuery 发起 Ajax 请求与后端交互。

3.1 登录逻辑

在登录页面添加处理函数，将表单数据发送至后端。

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

3.2 列表渲染

删除前端硬编码的 HTML，改为从后端动态获取数据并渲染到表格中。

function getBookList() {
    $.ajax({
        type: "get",
        url: "/book/getList",
        success: function (result) {
            console.log(result);
            if (result != null) {
                var finalHtml = "";
                for (var i = 0; i < result.length; i++) {
                    var book = result[i];
                    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. 调试思路与常见问题

当页面效果不符合预期时，不要盲目修改代码，建议按以下顺序排查：

1. 检查后端日志：确认请求是否到达服务器。可以在 Controller 入口打印参数，确认接收到的值是否正确。
2. 使用 Postman 测试：绕过前端直接调用接口，验证后端返回的数据格式和内容是否符合预期。
3. 检查前端网络请求：查看浏览器开发者工具（Network 面板），确认请求 URL、参数及响应状态码。

5. GET 与 POST 的实际区别

在实际开发中，GET 和 POST 的区别主要体现在参数位置和数据格式约定上，而非简单的'能不能传参'。

5.1 参数位置

• GET：参数只能放在 URL 中（Query String）。Postman 中对应 Params 标签页。
• POST：参数既可以放在 URL，也可以放在 Body 中。实际开发中最常用的是 Body。

5.2 数据格式一致性

• GET：因为参数在 URL，后端只需解析 URL 参数，不存在格式问题，前后端不会因为格式不一致而出错。
• POST：如果使用 Body 传参，就必须保证前后端格式一致。例如前端发送 JSON，后端必须配置为解析 JSON；前端发送 form-data，后端也要对应接收。否则会出现'前端传了但后端收不到'的经典问题。

5.3 最佳实践总结

• 语义区别：GET 用于获取资源，幂等且可缓存；POST 用于提交资源，非幂等。
• 安全性与大小：GET 受 URL 长度限制，不适合传大量数据，且参数暴露在 URL 中，不适合敏感信息。POST 无明确大小限制，且参数在 Body 中，相对更安全（需配合 HTTPS）。
• 工具约束：Postman 默认隐藏 GET 请求的 Body 输入框，是为了引导开发者遵循行业最佳实践。虽然理论上某些客户端支持 GET Body，但这属于非常规操作，兼容性差且易导致缓存失效，不建议在生产环境中使用。

通过理解这些差异，我们可以更准确地设计接口，减少前后端对接时的摩擦成本。