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

2.2 控制器开发

用户登录验证

在 UserController 中实现简单的登录逻辑，通过 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;
    }
}

获取图书列表

BookController 负责返回数据。初期为了演示方便，我们采用 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);
            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 后，编写 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 i = 0; i < result.length; i++) {
                    var book = result[i];
                    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);
            }
        }
    });
}

3.3 接口联调与问题排查

当效果不理想时，不要盲目改代码，先检查两端日志。

1. 后端检查：使用 Postman 测试接口是否可达，确认参数接收是否正确，返回值是否符合预期。
2. 前端检查：查看浏览器控制台 Console 日志，确认 Ajax 请求是否发送成功，响应数据格式是否匹配。

4. GET 与 POST 的实际区别

在实际开发中，GET 和 POST 的区别主要体现在参数位置和数据格式约定上，这也是面试和实战中的高频考点。

4.1 参数位置

• GET：参数只能放在 URL 中（即 Postman 的 Params）。后端直接从 URL 解析，不存在格式歧义。
• POST：参数既可以放在 URL，也可以放在 Body 中。实际开发中最常用的是 Body。

4.2 数据格式一致性

这是最容易踩坑的地方。一旦使用 POST 的 Body 传参，前后端必须严格约定格式：

• 前端用 JSON，后端必须按 JSON 解析。
• 前端用 form-data，后端也要用对应方式接收。
• 前端用 x-www-form-urlencoded，后端也要对应。

否则会出现'前端传了，后端收不到'的经典问题。

4.3 语义与规范

• 幂等性：GET 是幂等的，适合获取资源；POST 通常用于提交资源，非幂等。
• 安全性：GET 参数暴露在 URL 中，不适合敏感信息；POST 参数在 Body 中，相对更安全（需配合 HTTPS）。
• 缓存：缓存服务器通常只根据 URL 缓存 GET 请求。带 Body 的 GET 请求会导致缓存失效或行为异常。

虽然理论上 GET 可以带 Body，但大多数 HTTP 客户端、服务器和中间件（如 Nginx、CDN）并不支持，甚至直接丢弃。Postman 默认隐藏 GET 的 Body 输入框，正是为了引导开发者遵循最佳实践。