图书管理系统（9）前端代码修改 & 系统完结
图书管理系统（9）前端代码修改 & 系统完结
文章目录
- 图书管理系统（9）前端代码修改 & 系统完结
- 1. login.html（登录页面）
- 2. book_update.html（图书更新）
- 3. book_list.html（图书列表）
- 4.add_book.html（添加图书）
- 5. 总结：
观前提醒：
这个图书管理系统，非常的简陋，仅作为练习使用。不建议大家使用我介绍的 图书管理系统 ，去作为 课程设计。
如果你是第一次点击这篇博客的，需要你将我 图书管理系统 的博客列表中，从这篇开始看：
图书管理系统（1）项目准备，用户登录接口，添加图书接口
直到看到这篇博客：
图书管理系统（8）统一管理返回结果
无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工具提升效率，才是事半功倍的效果。
由于是后端开发，后端开发，不关注前端是如何设计的，所以，前端代码，不进行讲解，需要掌握的是：学会如何使用 ajax发送请求。
1. login.html（登录页面）
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><linkrel="stylesheet"href="css/bootstrap.min.css"><linkrel="stylesheet"href="css/login.css"><scripttype="text/javascript"src="js/jquery.min.js"></script></head><body><divclass="container-login"><divclass="container-pic"><imgsrc="pic/computer.png"width="350px"></div><divclass="login-dialog"><h3>登陆</h3><divclass="row"><span>用户名</span><inputtype="text"name="userName"id="userName"class="form-control"></div><divclass="row"><span>密码</span><inputtype="password"name="password"id="password"class="form-control"></div><divclass="row"><buttontype="button"class="btn btn-info btn-lg"onclick="login()">登录</button></div></div></div><scriptsrc="js/jquery.min.js"></script><script>functionlogin(){ $.ajax({type:"post",url:"/user/login",data:{name:$("#userName").val(),password:$("#password").val()},success:function(result){// 后端定义的业务状态码： //-1 表示用户未登录//-2 表示出现异常，出现错误//200 表示请求成功if(result.code ==200&& result.data ==true){//用户名密码验证成功 location.href ="book_list.html";}else{alert("用户名或密码错误");}}});// location.href = "book_list.html";}</script></body></html>2. book_update.html（图书更新）
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>修改图书</title><linkrel="stylesheet"href="css/bootstrap.min.css"><linkrel="stylesheet"href="css/add.css"></head><body><divclass="container"><divclass="form-inline"><h2style="text-align: left;margin-left: 10px;"><svgxmlns="http://www.w3.org/2000/svg"width="40"fill="#17a2b8"class="bi bi-book-half"viewBox="0 0 16 16"><pathd="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/></svg><span>修改图书</span></h2></div><formid="updateBook"><inputtype="hidden"class="form-control"id="bookId"name="id"><divclass="form-group"><labelfor="bookName">图书名称:</label><inputtype="text"class="form-control"id="bookName"name="bookName"></div><divclass="form-group"><labelfor="bookAuthor">图书作者</label><inputtype="text"class="form-control"id="bookAuthor"name="author"/></div><divclass="form-group"><labelfor="bookStock">图书库存</label><inputtype="text"class="form-control"id="bookStock"name="count"/></div><divclass="form-group"><labelfor="bookPrice">图书定价：</label><inputtype="number"class="form-control"id="bookPrice"name="price"></div><divclass="form-group"><labelfor="bookPublisher">出版社</label><inputtype="text"id="bookPublisher"class="form-control"name="publish"/></div><divclass="form-group"><labelfor="bookStatus">图书状态</label><selectclass="custom-select"id="bookStatus"name="status"><optionvalue="1"selected>可借阅</option><optionvalue="2">不可借阅</option></select></div><divclass="form-group"style="text-align: right"><buttontype="button"class="btn btn-info btn-lg"onclick="update()">确定</button><buttontype="button"class="btn btn-secondary btn-lg"onclick="javascript:history.back()">返回</button></div></form></div><scripttype="text/javascript"src="js/jquery.min.js"></script><script>getBookInfo();functiongetBookInfo(){ $.ajax({type:"get",url:"/book/queryBookById"+ location.search,success:function(result){// 后端定义的业务状态码： //-1 表示用户未登录//-2 表示出现异常，出现错误//200 表示请求成功if(result.code ==200&& result.data !=null){var bookInfo = result.data;if(bookInfo !=null){$("#bookId").val(bookInfo.id);$("#bookName").val(bookInfo.bookName);$("#bookAuthor").val(bookInfo.author);$("#bookStock").val(bookInfo.count);$("#bookPrice").val(bookInfo.price);$("#bookPublisher").val(bookInfo.publish);$("#bookStatus").val(bookInfo.status);}}}});}functionupdate(){ $.ajax({type:"post",url:"/book/updateBook",data:$("#updateBook").serialize(),success:function(result){// 后端定义的业务状态码： //-1 表示用户未登录//-2 表示出现异常，出现错误//200 表示请求成功if(result.code ==200&& result.data ==""){alert('修改成功'); location.href ="book_list.html?currentPage=1";}else{alert(result.errMsg);}},error:function(error){ console.log(error);if(error.status ==401){// 用户未登录 location.href ="login.html";}}});// alert("更新成功");// location.href = "book_list.html"}</script></body></html>3. book_list.html（图书列表）
代码：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>图书列表展示</title><linkrel="stylesheet"href="css/bootstrap.min.css"><linkrel="stylesheet"href="css/list.css"><scripttype="text/javascript"src="js/jquery.min.js"></script><scripttype="text/javascript"src="js/bootstrap.min.js"></script><scriptsrc="js/jq-paginator.js"></script></head><body><divclass="bookContainer"><h2>图书列表展示</h2><divclass="navbar-justify-between"><div><buttonclass="btn btn-outline-info"type="button"onclick="location.href='book_add.html'">添加图书</button><buttonclass="btn btn-outline-info"type="button"onclick="batchDelete()">批量删除</button></div></div><table><thead><tr><td>选择</td><tdclass="width100">图书ID</td><td>书名</td><td>作者</td><td>数量</td><td>定价</td><td>出版社</td><td>状态</td><tdclass="width200">操作</td></tr></thead><tbody></tbody></table><divclass="demo"><ulid="pageContainer"class="pagination justify-content-center"></ul></div><script>getBookList();functiongetBookList(){ $.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 wholeHtml ="";for(var book of books){// 拼接列表 wholeHtml +='<tr>'; wholeHtml +='<td><input type="checkbox" name="selectBook"+ book.id +'"></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><div>'; wholeHtml +='<a href="book_update.html?bookId='+ book.id +'">修改</a>'; wholeHtml +='<a href="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:'<li><a>首页</a></li>',prev:'<li><a href="javascript:void(0);">上一页<\/a><\/li>',next:'<li><a href="javascript:void(0);">下一页<\/a><\/li>',last:'<li><a href="javascript:void(0);">最后一页<\/a><\/li>',page:'<li><a href="javascript:void(0);">{{page}}<\/a><\/li>',//页面初始化和页码点击时都会执行onPageChange:function(page, type){if(type =="change"){ location.href ="book_list.html?currentPage="+ page;}}});},// 用户未登录时，跳转到登陆页面error:function(error){if(error.status ==401){alert("用户未登录，请先登录"); location.href ="login.html";}}});}functiondeleteBook(id){var isDelete =confirm("确认删除?");if(isDelete){//删除图书 $.ajax({type:"post",url:"/book/deleteBook?bookId="+ id,success:function(result){// 后端定义的业务状态码： //-1 表示用户未登录//-2 表示出现异常，出现错误//200 表示请求成功if(result.code ==200&& result.data ==""){alert('删除成功'); location.href ="book_list.html?currentPage=1";}else{alert(result.errMsg);}}});}}functionbatchDelete(){var isDelete =confirm("确认批量删除?");if(isDelete){//获取复选框的idvar ids =[];$("input:checkbox[name='selectBook']:checked").each(function(){ ids.push($(this).val());}); console.log(ids); $.ajax({type:"post",url:"/book/batchDelete?ids="+ ids,success:function(result){// 后端定义的业务状态码： //-1 表示用户未登录//-2 表示出现异常，出现错误//200 表示请求成功if(result.code ==200&& result.data ==""){alert("批量删除成功"); location.href ="book_list.html?currentPage=1";}else{alert("批量删除失败");}}});}}</script></div></body></html>4.add_book.html（添加图书）
代码：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>添加图书</title><linkrel="stylesheet"href="css/bootstrap.min.css"><linkrel="stylesheet"href="css/add.css"></head><body><divclass="container"><divclass="form-inline"><h2style="text-align: left;margin-left: 10px;"><svgxmlns="http://www.w3.org/2000/svg"width="40"fill="#17a2b8"class="bi bi-book-half"viewBox="0 0 16 16"><pathd="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/></svg><span>添加图书</span></h2></div><formid="addBook"><divclass="form-group"><labelfor="bookName">图书名称:</label><inputtype="text"class="form-control"placeholder="请输入图书名称"id="bookName"name="bookName"></div><divclass="form-group"><labelfor="bookAuthor">图书作者</label><inputtype="text"class="form-control"placeholder="请输入图书作者"id="bookAuthor"name="author"/></div><divclass="form-group"><labelfor="bookStock">图书库存</label><inputtype="text"class="form-control"placeholder="请输入图书库存"id="bookStock"name="count"/></div><divclass="form-group"><labelfor="bookPrice">图书定价：</label><inputtype="number"class="form-control"placeholder="请输入价格"id="bookPrice"name="price"></div><divclass="form-group"><labelfor="bookPublisher">出版社</label><inputtype="text"id="bookPublisher"class="form-control"placeholder="请输入图书出版社"name="publish"/></div><divclass="form-group"><labelfor="bookStatus">图书状态</label><selectclass="custom-select"id="bookStatus"name="status"><optionvalue="1"selected>可借阅</option><optionvalue="2">不可借阅</option></select></div><divclass="form-group"style="text-align: right"><buttontype="button"class="btn btn-info btn-lg"onclick="add()">确定</button><buttontype="button"class="btn btn-secondary btn-lg"onclick="javascript:history.back()">返回</button></div></form></div><scripttype="text/javascript"src="js/jquery.min.js"></script><script>functionadd(){//前端应该进行参数校验，此处省略//提交请求到后端 $.ajax({type:"post",url:"/book/addBook",data:$("#addBook").serialize(),success:function(result){if(result.code ==200&& result.data ==""){//添加图书成功alert("添加图书成功"); location.href ="book_list.html?currentPage=1";}else{//失败alert(result.errMsg);}},// 用户未登录时，跳转到登陆页面error:function(error){if(error.status ==401){alert("用户未登录，请先登录"); location.href ="login.html";}}});// alert("添加成功");// location.href = "book_list.html";}</script></body></html>5. 总结：
这就是后端 使用统一管理功能 之后，前端 html页面 的完整代码。
当然，这里的前端代码，部分是有些冗余的，前端也有类似于后端的 统一管理功能，能够把多余重复的代码，封装成其他的代码。
但是，作为后端开发，这里点到即止。
而且，前端检验部分，也是有点粗糙的。
总的来说，这个图书管理系统，就是用来练手的，不算是一个课程设计，更不用说是一个项目了。
还是存在很多不足的。
最后，如果这篇博客能帮到你的，请你点点赞，有写错了，写的不好的，欢迎评论指出，谢谢！
下一篇博客，我会介绍关于 SpringAOP 相关的内容，如果你感兴趣的，可以点击进去看看，感谢你的支持。
博客链接：SpringAOP（1）认识 AOP
