图书管理系统（6）强制登陆（前端实现）
图书管理系统（6）强制登陆（前端实现）
文章目录
观前提醒：
这个图书管理系统，非常的简陋，仅作为练习使用。不建议大家使用我介绍的 图书管理系统 ，去作为 课程设计。
如果你是第一次点击这篇博客的，需要你将我 图书管理系统 的博客列表中，从这篇开始看：
图书管理系统（1）项目准备，用户登录接口，添加图书接口
无Mybatis版本获取：
这个 图书管理系统 的实现，需要你从我的 gitee上，将 无Mybatis版本 的图书管理系统源代码下载下来。
gitee链接：https://gitee.com/mrbgvhbhjv/java-ee-course/tree/master/%E5%90%8E%E7%AB%AF%E4%BB%A3%E7%A0%81/springboot_bookManage_System
基于 Mybatis版本 的获取：
如果你想直接获取 基于 Mybatis 完全实现了增删查改功能的图书管理系统，就从我的 gitee 上面获取，下载源代码。
gitee链接：https://gitee.com/mrbgvhbhjv/java-ee-course/tree/master/%E5%90%8E%E7%AB%AF%E4%BB%A3%E7%A0%81/Book_System_20251107
目录结构：
以防大家会乱，或者我博客写的不详细，各种类的存放位置，我放个目录结构在这里：
个人建议：
这篇博客的代码，建议自己敲一下。
跟着我的步骤，使用 无Mybatis版本 的图书管理系统源代码 ，一步一步的将代码实现出来。
这里使用的数据库是 MySQL。
图形化工具：Navicat
虽然，截止到 2026年，cursor，TRAE等 AI工具，能够一键编写代码，甚至一个系统。
但是，如果你不会基础知识，只会让 ai 生成代码，不会看代码，不会修改代码，代码运行报错，你不会解决问题等等。其实，你都不算是一个 Java开发者。
如果我们将 AI工具，对我们的工作效率提升，有巨大的帮助，它一定是一个乘法结算的结果。
你的基础开发能力 × AI工具效率 == 工作效率。
如果你的基础开发能力不行，约等于 0，那么，无论 AI工具效率多高，99倍也好，0 * 99 == 0
所以，只有将我们自己的基础开发能力提升了，使用 AI工具提升效率，才是事半功倍的效果。
1. 前端代码编写
由于加入 强制登录 功能之后，后端返回给前端的数据，也发生了响应的变化：
所以，前端代码，需要做出相应的调整。
后端开发，不关注前端是如何设计的，所以，前端代码，不进行讲解，需要掌握的是：学会如何使用 ajax发送请求。
1.1 后端 code 的值：
用户未登录，code = -1
用户登录，code = 200
1.2 book_list.html：
getBookList方法代码：
function getBookList () { $.ajax({ type: "get", url: "/book/getListByPage" + location.search, success: function (result) { if (result == null || result.code == -1) { alert("用户未登录，请先登录"); location.href = "login.html"; } // 其他情况判断，此处省略 if (result == null || result.data == null){ return; } var data = result.data; var books = data.records; var; for (var book of books) { // 拼接列表 wholeHtml += '<tr>'; wholeHtml += '<td><inputtype="checkbox"name="selectBook"value="' + book.id + '"id="selectBook"class="book-select"></td>'; wholeHtml += '<td>' + book.id + '</td>'; wholeHtml += '<td>' + book.bookName + '</td>'; wholeHtml += '<td>' + book.author + '</td>'; wholeHtml += '<td>' + book.count + '</td>'; wholeHtml += '<td>' + book.price + '</td>'; wholeHtml += '<td>' + book.publish + '</td>'; wholeHtml += '<td>' + book.statusCN + '</td>'; wholeHtml += '<td><divclass="op">'; wholeHtml += '<ahref="book_update.html?bookId=' + book.id + '">修改</a>'; wholeHtml += '<ahref="javascript:void(0)"onclick="deleteBook(' + book.id + ')">删除</a>'; wholeHtml += '</div></td></tr>'; } $("tbody").html(wholeHtml); //翻页信息 $("#pageContainer").jqPaginator({ totalCounts: data.total, //总记录数 pageSize: 10, //每页的个数 visiblePages: 5, //可视页数 currentPage: data.pageRequest.currentPage, //当前页码 first: '<liclass="page-item"><aclass="page-link">首页</a></li>', prev: '<liclass="page-item"><aclass="page-link"href="javascript:void(0);">上一页<\/a><\/li>', next: '<liclass="page-item"><aclass="page-link"href="javascript:void(0);">下一页<\/a><\/li>', last: '<liclass="page-item"><aclass="page-link"href="javascript:void(0);">最后一页<\/a><\/li>', page: '<liclass="page-item"><aclass="page-link"href="javascript:void(0);">{{page}}<\/a><\/li>', //页面初始化和页码点击时都会执行 onPageChange: function (page, type) { if (type == "change") { location.href = "book_list.html?currentPage=" + page; } } }); } }); } 1.3 测试：
未登录：
登录：
登陆后：
2. 总结：
目前，仅仅是 图书列表展示 页面，进行了强制登录功能的实现，后续，学完 统一功能 这个知识后，再对 图书管理系统，进一步进行完善。
所以，想要实现整个图书管理系统，我们就需要学习 统一功能处理 这个知识点。
最后，如果这篇博客能帮到你的，请你点点赞，有写错了，写的不好的，欢迎评论指出，谢谢！
下一篇博客：统一功能处理（1）拦截器
