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 的参数放在 URL 中；POST 的参数可以放在 URL，也可以放在 Body 中，后者更常见。
• 格式一致性：GET 因为参数在 URL，解析方式比较固定。POST 如果走 Body，就得和前端提交格式对上，比如 JSON 或 form-data，不然经常出现'前端传了，后端收不到'。
• 安全性与长度：GET 受 URL 长度限制，参数也会暴露在地址栏里，不适合放敏感信息；POST 没有明显的 URL 长度问题，放在 Body 里也更常用，当然配合 HTTPS 才有基本的传输安全。
• 语义：GET 用来获取资源，通常是幂等的；POST 更适合提交资源，通常不是幂等的。

理论上 GET 也能带 Body，但这不是常规用法。Postman 默认把 GET 的 Body 隐藏掉，算是比较实在的提醒：别把不该混用的东西硬塞到一起。真实项目里，GET 走 URL，POST 走 Body，少折腾，兼容性也稳一些。