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

Controller 层开发

登录验证

使用 HttpSession 存储登录态，简单校验账号密码。

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

获取图书列表

这里先采用 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 数据的建议： 在开发初期，数据库可能尚未就绪，或者环境不稳定。此时直接写死一个 mockData 方法比到处复制粘贴代码要规范得多。后续接入真实数据库时，只需替换该方法内部逻辑即可，保持接口结构不变。

前端交互与调试

登录逻辑

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

列表渲染

移除硬编码的 HTML，改为动态请求后端数据并拼接表格行。

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

GET 与 POST 的核心差异

在实际开发中，很多新手容易混淆 GET 和 POST。其实区别主要体现在参数位置、数据格式约定以及语义上。

1. 参数传递位置

• GET: 参数只能放在 URL 中（Query String）。例如 ?id=1&name=test。
• POST: 参数可以放在 URL，也可以放在 Request Body 中。实际开发中最常用的是 Body。

2. 数据格式约定

这是最容易踩坑的地方。

• GET: 因为参数都在 URL 里，后端解析方式固定，通常不会出现格式不一致的问题。
• POST: 如果参数放在 Body 中，前后端必须严格约定格式。比如前端传 JSON，后端就得用 @RequestBody 接收；前端传表单数据，后端就得用 @RequestParam 或 @ModelAttribute。一旦格式对不上，就会出现'前端传了，后端收不到'的经典问题。

3. 安全性与长度限制

• GET: 受 URL 长度限制，不适合传输大量数据。且参数暴露在地址栏，不适合敏感信息。
• POST: 理论上无大小限制，参数在 Body 中，相对更安全（当然仍需配合 HTTPS）。

4. 语义与幂等性

• GET: 语义是'获取资源'，应该是幂等的（多次请求结果一致），适合缓存。
• POST: 语义是'提交资源'，通常不是幂等的（如创建订单），不建议缓存。

注意：虽然 HTTP 协议标准允许 GET 带 Body，但大多数浏览器、服务器中间件（如 Nginx）并不支持或会忽略它。Postman 等工具默认隐藏 GET 的 Body 输入框，正是为了引导开发者遵循最佳实践，避免兼容性问题。

排查思路总结

遇到前后端对接问题时，不要盲目改代码，按以下步骤检查：

1. 抓包确认：使用 Postman 或浏览器 Network 面板，看请求是否真的发出去了，参数是否正确。
2. 后端日志：在 Controller 入口打印参数，确认后端是否接收到数据。如果没收到，检查 Content-Type 或参数名拼写。
3. 返回值检查：如果参数对了但结果不对，检查业务逻辑或数据库状态。
4. 前端渲染：确认 Ajax 回调函数中的数据结构是否与预期一致，特别是数组遍历时的变量作用域问题。