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

Ne0inhk

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

图书管理系统

1.1 准备前端代码

在本地想要的可以去我的gitee中下载 library 的相关前端代码

1.2 约定前后端交互接口

需求分析

图书管理系统是⼀个相对较大一点的案例,咱们先实现其中的⼀部分功能. 用户登录

1. 登录接口

2. 图书列表展示

字段说明:

字段说明
id图书 ID
bookName图书名称
author作者
count数量
price定价
publish图书出版社
status图书状态 1 - 可借阅 其他 - 不可借阅
statusCN图书状态中文含义

3.4.3 服务器代码

创建图书类 BookInfo

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

创建 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; } //账号密码正确，账号admin & 密码admin if("admin".equals(name) && "admin".equals(password)){ session.setAttribute("userName",name); return true; } //账号密码错误 return false; } }

创建 BookController, 获取图书列表

@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(new BigDecimal((new Random()).nextInt(100))); book.setPublish("出版社" + i); book.setStatus(1); books.add(book); } return books; } }
引入一个mock，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.setBookAuthor("作者"+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; }

注意：我们这样写会显得很乱，所以我们使用这个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.setBookAuthor("作者"+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; }

这样我们就好管理代码

修改得时候就只加一个方法，和删除MOCK得数据即可

3.4.4 调整前端页面代码

登录页面:添加登录处理逻辑

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

图书列表展示:删除前端伪造的代码，从后端获取数据并渲染到页面上.

  1. 删除 <body></body>标签中的内容
  2. 完善获取图书方法
function getBookList() { $.ajax({ type: "get", url: "/book/getList", success: function (result) { console.log(result); if (result != null) { var; for (var book of result) { finalHtml += "<tr><input type='checkbox' name='selectBook' + book.id + "' + 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); } } }); }

排除未达到理想效果的问题出现在哪？

1.检查两端的代码(我们肉眼可以看到的哦都是有限的，一般都是通过debug的方式)根据日志

后端的代码，先看一下postman的结果

   看后端的话第一步先进行看请求是否已经进来了(测试最简单的方法就是在里面打印一下参数之类的可以确认的请求进来的变量)

   如果说接口已经进来了，检查参数和结果是否正确

    没有问题交给前端

前端的测试

get和post的实际区别？

在实际开发里，GET 和 POST 的区别并不是 “能不能传参数”，而是 “参数放在哪里”，以及 “放在 Body 时前后端必须一致”。

1. 当参数都放在 URL（Postman 的 Params）时
  • GET 和 POST 看起来 “几乎一样”。
  • 前端把参数拼到 URL 里。
  • 后端从 URL 里取参数。
  • 这种情况下，GET 和 POST 的使用方式对开发者来说区别不大。

你强调的点：只要参数都在 URL，那 GET 和 POST 的使用体验几乎没有区别。

2. 真正的区别出现在 POST 使用 Body 传参时
  • POST 可以把参数放在 Body 里（这是它的主要用途）。
  • GET 不能（规范不允许，即使工具能加也没有意义）。
  • 一旦参数放在 Body，就必须考虑 “格式”。

POST 使用 Body 传参时，前后端必须一致。

例如：

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

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

3. 总结
  • GET：参数只能在 URL，前后端不会有格式问题。
  • POST：参数可以在 URL 也可以在 Body，但真正常用的是 Body。
  • 一旦用 Body，前后端必须约定好格式，否则无法解析。
  • 所以实际开发中，POST 和 GET 的最大区别就是：POST 的 Body 传参需要前后端一致，而 GET 没有这个问题。

GET 和 POST 的区别（面试）

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

    • GET 的参数只能放在 URL 中，也就是 Postman 里的 Params。
    • POST 的参数既可以放在 URL，也可以放在 Body 中，而实际开发中最常用的是 Body。
    • GET 因为参数在 URL，后端只需从 URL 解析，不存在格式问题，前后端不会因为格式不一致而出错。
    • POST 如果使用 Body 传参，就必须保证前后端格式一致。例如前端用 JSON，后端必须按 JSON 解析；前端用 form-data，后端也要用对应的方式接收。否则会出现 “前端传了但后端收不到” 的问题。
    • GET 受 URL 长度限制，不适合传大量数据，且参数暴露在 URL 中，不适合敏感信息。
    • POST 无明确大小限制，且参数在 Body 中，相对更安全（需配合 HTTPS）。
    • GET 用于获取资源，是幂等的。
    • POST 用于提交资源，不是幂等的。
语义区别
数据大小与安全性
是否需要前后端格式一致
参数位置不同

这个其实get在理论上得话就是还是可以放到这个body里进行获取得，只是postman进行约束了

Postman 的 “约束” 本质

  • Postman 并非 “强制禁止”，而是遵循了行业最佳实践。它默认隐藏了 GET 请求的 Body 输入框，是为了引导你写出符合规范的代码，避免踩坑。
  • 如果你强行要在 Postman 里给 GET 请求加 Body，也可以通过抓包工具（如 Charles）修改请求包来实现，但这属于非常规操作，没有实际业务价值。

GET 带 Body 为什么是 “坏实践”

  1. 语义冲突：GET 的核心语义是 “获取资源”，幂等且可缓存。带 Body 会让它看起来像一个 “提交” 操作，与 POST 的语义混淆。
  2. 兼容性风险：很多 HTTP 客户端、服务器和中间件（如 Nginx、CDN）的实现都没有处理 GET Body 的逻辑，会直接丢弃这部分数据，导致请求失败。
  3. 缓存失效：缓存服务器通常只根据 URL 来缓存 GET 请求的响应。带 Body 后，相同 URL 但不同 Body 的请求会被错误地缓存为同一个响应。

Read more

[Java]RuoYi框架原理分析

[Java]RuoYi框架原理分析

代码生成器 源码分析 代码生成器是提高开发效率的重要工具，它主要分为两个部分： 第一部分涉及将业务表结构导入到系统中，在这里，开发者可以预览、编辑、删除和同步业务表结构，实现对业务表的全面管理。 第二部分是在选择了特定的表之后，点击生成按钮，系统将根据表结构生成相应的前后端代码，并提供下载。 表结构说明 若依提供了两张核心表来存储导入的业务表信息： gen_table：存储业务表的基本信息 ，它对应于配置代码基本信息和生成信息的页面 gen_table_column：存储业务表的字段信息 它对应于配置代码字段信息的页面。 这两张表是一对多的关系，一张业务表可以有多个字段的信息，所以在字段信息表中有个外键table_id指向 目录结构 1）后端代码 2）前端代码 查询数据库列表 当管理员在界面上点击导入按钮时，会弹出一个对话框，此时，前端需要向后端发送请求，查询数据库并返回到前端，展示当前项目库中所有待导入的业务表。 此功能涉及前端相关的代码位于views/tool/index.vue这个视图组件中，负责实现导入业务表的用

By Ne0inhk
C++手撕红黑树：从0到200行，拿下STL map底层核心

C++手撕红黑树：从0到200行，拿下STL map底层核心

文章目录 * C++手撕红黑树：从0到200行，拿下STL map底层核心 * 1. 红黑树的概念 * 1.1 红黑树的规则 * 1.2 红黑树如何确保最长路径不超过最短路径的2倍？ * 1.3 红黑树的效率 * 2. 红黑树的实现 * 2.1 红黑树的结构 * 2.2 红黑树的插入 * 2.2.1 插入的大概过程 * 2.2.2 情况1：变色 * 2.2.3 情况2：单旋 + 变色 * 2.2.4 情况3：双旋 + 变色 * 2.3 红黑树的插入代码实现 * 2.

By Ne0inhk
C++学习之旅【C++伸展树介绍以及红黑树的实现】

C++学习之旅【C++伸展树介绍以及红黑树的实现】

🔥承渊政道：个人主页 ❄️个人专栏: 《C语言基础语法知识》《数据结构与算法》 《C++知识内容》《Linux系统知识》 ✨逆境不吐心中苦,顺境不忘来时路!🎬 博主简介: 引言:前篇文章,小编已经介绍了关于C++AVL树的实现!相信大家应该有所收获!接下来我将带领大家继续深入学习C++的相关内容!本篇文章着重介绍关于C++伸展树介绍以及红黑树的实现!伸展树与红黑树是两类极具代表性的BBST,且在工程实践中各有不可替代的价值:伸展树摒弃了"严格平衡”的执念,通过“伸展”操作将最近访问的节点移至根节点,利用“局部性原理”优化频繁访问的场景,实现均摊O(logn)的时间复杂度,适合缓存、热点数据查询等场景;红黑树则通过给节点着色并遵守严格的颜色规则,确保树的最长路径不超过最短路径的两倍,以 “弱平衡” 换稳定的最坏O(logn)性能,是C++ STL 中 std::map、std:

By Ne0inhk
C++ 模板进阶：特化、萃取与可变参数模板

C++ 模板进阶：特化、萃取与可变参数模板

C++ 模板进阶：特化、萃取与可变参数模板 💡 学习目标：掌握模板进阶技术的核心用法，理解模板特化的深层应用、类型萃取的实现原理，以及可变参数模板的灵活使用，提升泛型编程的实战能力。 💡 学习重点：模板特化的进阶场景、类型萃取工具的设计与应用、可变参数模板的展开技巧、折叠表达式的使用方法。 一、模板特化进阶：处理复杂类型场景 💡 模板特化不只是针对单一类型的定制，还能处理指针、引用、数组等复杂类型，实现更精细的类型适配逻辑。 1.1 指针类型的模板特化 通用模板默认处理普通类型，我们可以为指针类型单独编写特化版本，实现指针专属的逻辑。 #include<iostream>#include<string>usingnamespace std;// 通用模板：处理普通类型template<typenameT>classTypeProcessor{public:staticvoidprocess(T data){ cout

By Ne0inhk