基于 Spring Boot 和 jQuery 的前后端分离图书管理系统的开发流程。内容涵盖登录接口设计、图书列表展示、后端 BookInfo 模型构建及 UserController 实现。通过 Mock 数据模拟数据库交互，解决了环境不稳定时的开发问题。详细讲解了前端 AJAX 请求处理及 GET 与 POST 方法的区别，包括参数位置、数据格式约定及安全性差异。最后提供了调试排查思路，帮助开发者解决前后端联调中的常见问题。
前端代码需自行准备，确保包含登录页面及图书列表展示页面。
图书管理系统是一个相对较大的案例，我们先实现其中的一部分功能，包括用户登录和图书列表展示。
| 字段 | 说明 |
|---|---|
| id | 图书 ID |
| bookName | 图书名称 |
| author | 作者 |
| count | 数量 |
| price | 定价 |
| publish | 图书出版社 |
| status | 图书状态 (1 - 可借阅，其他 - 不可借阅) |
| statusCN | 图书状态中文含义 |
import lombok.Data;
import java.math.BigDecimal;
import java.util.Date;
@Data
public class BookInfo {
// 图书 ID
private Integer id;
// 书名
private String bookName;
// 作者
private String author;
// 数量
private Integer count;
// 定价
private BigDecimal price;
// 出版社
private String publish;
// 状态 0-不允许借阅 1-允许借阅
private Integer status;
private String statusCN;
// 创建时间
private Date createTime;
// 更新时间
private Date updateTime;
}
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;
}
// 账号密码正确，账号 admin & 密码 admin
if ("admin".equals(name) && "admin".equals(password)) {
session.setAttribute("userName", name);
return true;
}
// 账号密码错误
return false;
}
}
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 获取图书信息
* @return
*/
public List<BookInfo> mockData() {
List<BookInfo> books = new ArrayList<>();
for (int i = 1; i < 5; i++) {
BookInfo book = new BookInfo();
book.setId(i);
book.setBookName("书籍" + i);
book.setAuthor("作者" + i);
book.setCount(i * 3);
book.setPrice( (( ()).nextInt()));
book.setPublish( + i);
book.setStatus();
books.add(book);
}
books;
}
}
数据采用 Mock 的方式，实际数据应该从数据库中获取。Mock 意为模拟、假的。在开发和测试过程中，由于环境不稳定或者协同开发的同事未完成等情况下，有些数据不容易构造或者不容易获取，就创建一个虚拟的对象或者数据样本，用来辅助开发或者测试工作。简单来说，就是假数据。
使用 Mock 方法可以让代码整齐规范，并且有真实数据后也更容易修改代码。我们将其封装成一个独立的方法进行管理。
public List<BookInfo> mockData() {
List<BookInfo> bookInfos = new ArrayList<>();
for (int i = 0; i < 15; i++) {
BookInfo bookInfo = new BookInfo();
bookInfo.setId(i);
bookInfo.setBookName("图书" + i);
bookInfo.setAuthor("作者" + i);
bookInfo.setCount(new Random().nextInt(100));
bookInfo.setPrice(new BigDecimal(new Random().nextInt(100)));
bookInfo.setPublish("出版社" + i);
bookInfo.setStatus(i % 5 == 0 ? 2 : 1);
bookInfos.add(bookInfo);
}
return bookInfos;
}
<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>
<body></body> 标签中的硬编码内容。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><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 += + book. + ;
finalHtml += ;
}
$().(finalHtml);
}
}
});
}
排除未达到理想效果的问题出现在哪？检查两端的代码（通常通过 debug 方式）。
在实际开发中，GET 和 POST 的区别主要体现在参数位置和数据格式约定上。
Postman 默认隐藏了 GET 请求的 Body 输入框，是为了引导开发者写出符合规范的代码。如果你强行要在 Postman 里给 GET 请求加 Body，也可以通过抓包工具修改请求包来实现，但这属于非常规操作，没有实际业务价值。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online