Spring Boot + jQuery 前后端分离图书管理系统：接口设计与调试

2.2 用户控制层

实现登录验证接口，使用 Session 存储用户信息。

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;
        }
        // 简单模拟验证，实际项目请对接数据库
        if ("admin".equals(name) && "admin".equals(password)) {
            session.setAttribute("userName", name);
            return true;
        }
        return false;
    }
}

2.3 图书控制层

获取图书列表，初期使用 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 生成
     */
    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); // 统一字段名为 author
            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 数据的思考

在开发和测试阶段，环境不稳定或协同开发未完成时，构造真实数据成本较高。此时引入 Mock 数据可以辅助开发流程。将 Mock 逻辑封装成独立方法，不仅让代码更整洁，后续接入真实数据库时也只需替换该方法内容，无需改动业务逻辑。

3. 前端页面对接

3.1 登录逻辑

使用 jQuery 发送 POST 请求处理登录。

<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 列表渲染

删除前端硬编码数据，改为从后端动态获取并渲染。

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><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 协议细节

当效果未达预期时，不要盲目猜测，建议通过 Debug 和日志定位问题。

排查思路：

1. 后端检查：先确认请求是否到达服务器。可以在 Controller 入口打印参数，确认变量接收是否正确。
2. 前端检查：查看浏览器控制台 Network 面板，确认请求 URL、参数格式及响应状态码。

GET 与 POST 的核心区别

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

1. 参数位置

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

2. 格式一致性

   • GET：由于参数在 URL，后端直接解析 Query String，不存在复杂的格式兼容问题。
   • POST：一旦参数放在 Body，必须保证前后端对格式的理解一致。例如前端发 JSON，后端必须配置 Jackson 解析器；前端发 form-data，后端需按表单解析。否则会出现'前端传了，后端收不到'的经典问题。

3. 安全性与语义

   • GET：受 URL 长度限制，不适合传输大量数据，且参数暴露在地址栏，不适合敏感信息。语义上是幂等的，用于获取资源。
   • POST：无明确大小限制，参数在 Body 中相对更安全（配合 HTTPS），语义上用于提交资源，非幂等。

关于 GET 带 Body 的误区

虽然理论上 HTTP 规范允许 GET 请求携带 Body，但 Postman 默认隐藏该输入框是为了遵循行业最佳实践。强行给 GET 加 Body 会导致以下风险：

• 兼容性差：许多中间件（如 Nginx、CDN）会丢弃 GET 请求的 Body 部分。
• 缓存失效：缓存服务器通常仅依据 URL 缓存 GET 响应，Body 变化可能导致缓存错误。
• 语义混淆：GET 本意是获取，带 Body 易被误认为提交操作。

因此，实际开发中应严格遵守规范：GET 走 URL 参数，POST 走 Body 参数，并确保前后端约定一致。