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

BookController：获取图书列表。

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.List;

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

    /**
     * 模拟数据生成
     */
    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((int) (Math.random() * 100));
            book.setPrice(new BigDecimal(Math.random() * 100));
            book.setPublish("出版社" + i);
            book.setStatus(i % 5 == 0 ? 2 : 1);
            books.add(book);
        }
        return books;
    }
}

关于 Mock 数据

在开发和测试阶段，环境可能不稳定或协同同事未完成接口，此时构造真实数据成本较高。Mock（模拟）就是创建虚拟对象或样本数据来辅助开发。将 Mock 逻辑封装成独立方法，不仅代码整洁，后续接入真实数据库时也只需替换该方法内容，便于维护。

3. 前端交互

3.1 登录处理

引入 jQuery 并编写 AJAX 请求。

<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 协议详解

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

1. 检查后端日志：确认请求是否到达服务器，参数是否正确。
2. 使用 Postman 测试：直接调用接口，排除前端干扰。
3. 检查前端网络面板：查看请求头、响应体及状态码。

GET 与 POST 的核心区别

在实际开发中，GET 和 POST 的区别主要体现在参数位置和数据格式约定上。

• 参数位置：GET 的参数只能放在 URL 中；POST 的参数既可以放在 URL，也可以放在 Body 中（最常用）。
• 格式一致性：GET 因参数在 URL，后端解析方式固定，不存在格式问题。POST 若使用 Body 传参，必须保证前后端格式一致（如 JSON、form-data）。否则会出现'前端传了但后端收不到'的问题。
• 安全性与长度：GET 受 URL 长度限制，且参数暴露，不适合敏感信息；POST 无明确大小限制，Body 传输相对更安全（需配合 HTTPS）。
• 语义：GET 用于获取资源，幂等；POST 用于提交资源，非幂等。

虽然理论上 GET 可以带 Body，但这属于非常规操作。Postman 默认隐藏 GET 的 Body 输入框是为了引导开发者遵循最佳实践。强行给 GET 加 Body 会导致兼容性风险（如 Nginx、CDN 丢弃该部分数据）以及缓存失效问题。因此，实际开发中应严格遵守规范：GET 走 URL，POST 走 Body。