这里修改的还是比较简单，我们知道，五大注解通常情况下是可以混用的，而这里的BookController和UserController的注解不变 ，也不能改变，因为@Controller除了交给Spring管理外，还具备一定的路由功能，如果修改了，就可能导致URL没办法访问到了。
修改的BookService类和BookDao类，因为BookService类是处理业务逻辑的，所以加@Service注解好一点，这个也表示是业务逻辑层的代码，程序员可以直接看出来；而BookDao类是数据层，也叫持久化层，因为还没学MyBatis，所以使用的是mock的方式创建数据，因为是和数据相关的，所以加上@Repository注解好一点，这个注解也代表是数据相关的代码。
一、改变的
1、BookService类
加上注解@Service
@Service public class BookService { public List<BookInfo> getBookList() { BookDao bookDao = new BookDao(); List<BookInfo> bookInfos = bookDao.mockData(); for(BookInfo bookInfo : bookInfos) { if(bookInfo.getStatus() == 2) { bookInfo.setStatusCN("不可借阅"); } else { bookInfo.setStatusCN("可借阅"); } } return bookInfos; } }
2、BookDao类
加上注解@Repository
@Repository public class BookDao { public List<BookInfo> mockData() { //理论上应该从数据库中获取数据，当前采用mock方式 List<BookInfo> bookInfos = new ArrayList<>(); for (int i = 1; i <= 15; i++) { BookInfo bookInfo = new BookInfo(); bookInfo.setId(i); bookInfo.setBookName("图书" + i); bookInfo.setAuthor("作者" + i); bookInfo.setNum(i * 2 + 1); bookInfo.setPrice(new BigDecimal(i * 3)); bookInfo.setPublishName("出版社" + i); if(i % 5 == 0) { bookInfo.setStatus(2); // bookInfo.setStatusCN("不可借阅"); } else { bookInfo.setStatus(1); // bookInfo.setStatusCN("可借阅"); } bookInfos.add(bookInfo); } return bookInfos; } }
二、不改变的
1、UserController类
@RestController @RequestMapping("/user") public class UserController { @RequestMapping("/login") public String login(String userName, String password, HttpSession session) { //1、校验参数 //2、校验密码是否正确 //3、返回响应结果 System.out.println(userName + " " + password); if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)) { return "用户名或者密码为空"; } if(!"admin".equals(userName) || !"admin".equals(password)) { return "账号或密码错误"; } session.setAttribute("userName", userName); return ""; } }
2、BookController类
@RestController @RequestMapping("/book") public class BookController { @RequestMapping("/getBookList") public List<BookInfo> getBookList() { BookService bookService = new BookService(); return bookService.getBookList(); } }
3、BookInfo类
@Data public class BookInfo { private Integer id; private String bookName; private String author; private Integer num; private BigDecimal price; private String publishName; private Integer status;//1-可借阅 2-不可借阅 private String statusCN;//状态的中文含义 }
4、前端代码
（1）登录页面：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/login.css"> <script type="text/javascript" src="js/jquery.min.js"></script> </head> <body> <div class="container-login"> <div class="container-pic"> <img src="pic/computer.png" width="350px"> </div> <div class="login-dialog"> <h3>登陆</h3> <div class="row"> <span>用户名</span> <input type="text" name="userName" id="userName" class="form-control"> </div> <div class="row"> <span>密码</span> <input type="password" name="password" id="password" class="form-control"> </div> <div class="row"> <button type="button" class="btn btn-info btn-lg" onclick="login()">登录</button> </div> </div> </div> <script src="js/jquery.min.js"></script> <script> function login() { var userName = $("#userName").val(); var password = $("#password").val(); $.ajax({ url: "/user/login", type: "post", data: { userName: $("#userName").val(), password: $("#password").val() }, success: function(result) { if(result == "") { location.href = "book_list.html"; } else{ alert(result); } } }); } </script> </body> </html>
（2）图书列表：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图书列表展示</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/list.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script src="js/jq-paginator.js"></script> </head> <body> <div class="bookContainer"> <h2>图书列表展示</h2> <div class="navbar-justify-between"> <div> <button class="btn btn-outline-info" type="button" onclick="location.href='book_add.html'">添加图书</button> <button class="btn btn-outline-info" type="button" onclick="batchDelete()">批量删除</button> </div> </div> <table> <thead> <tr> <td>选择</td> <td class="width100">图书ID</td> <td>书名</td> <td>作者</td> <td>数量</td> <td>定价</td> <td>出版社</td> <td>状态</td> <td class="width200">操作</td> </tr> </thead> <tbody> </tbody> </table> <div class="demo"> <ul id="pageContainer" class="pagination justify-content-center"></ul> </div> <script> getBookList(); function getBookList() { $.ajax({ url: "/book/getBookList", type: "post", success: function(books) { console.log("拿到参数") var finalHtml = ""; for(book of books) { finalHtml += '<tr>'; finalHtml += '<td><input type="checkbox" name="selectBook" value="1" id="'+ book.id +'" class="book-select"></td>' finalHtml += '<td>'+ book.id +'</td>'; finalHtml += '<td>'+book.bookName+'</td>'; finalHtml += '<td>'+ book.author +'</td>'; finalHtml += '<td>'+ book.num +'</td>'; finalHtml += '<td>'+ book.price +'</td>'; finalHtml += '<td>'+ book.publishName +'</td>'; finalHtml += '<td>'+ book.statusCN +'</td>'; finalHtml += '<td>'; finalHtml += '<div class="op">'; finalHtml += '<a href="book_update.html?bookId='+ book.id +'">修改</a>'; finalHtml += '<a href="javascript:void(0)" onclick="deleteBook('+ book.id +')">删除</a>'; finalHtml += '</div>'; finalHtml += '</td>'; finalHtml += '</tr>'; } $("tbody").html(finalHtml); } }); } //翻页信息 $("#pageContainer").jqPaginator({ totalCounts: 100, //总记录数 pageSize: 10, //每页的个数 visiblePages: 5, //可视页数 currentPage: 1, //当前页码 first: '<li class="page-item"><a class="page-link">首页</a></li>', prev: '<li class="page-item"><a class="page-link" href="javascript:void(0);">上一页<\/a><\/li>', next: '<li class="page-item"><a class="page-link" href="javascript:void(0);">下一页<\/a><\/li>', last: '<li class="page-item"><a class="page-link" href="javascript:void(0);">最后一页<\/a><\/li>', page: '<li class="page-item"><a class="page-link" href="javascript:void(0);">{{page}}<\/a><\/li>', //页面初始化和页码点击时都会执行 onPageChange: function (page, type) { console.log("第"+page+"页, 类型:"+type); } }); function deleteBook(id) { var isDelete = confirm("确认删除?"); if (isDelete) { //删除图书 alert("删除成功"); } } function batchDelete() { var isDelete = confirm("确认批量删除?"); if (isDelete) { //获取复选框的id var ids = []; $("input:checkbox[name='selectBook']:checked").each(function () { ids.push($(this).val()); }); console.log(ids); alert("批量删除成功"); } } </script> </div> </body> </html>
三、测试
在Spring学习阶段，不管代码修改程度有多小，都要进行测试，看是否能运行成功，在企业上也一样，同样要改一点，测一点。
启动项目，访问 http://127.0.0.1:8080/login.html ，如图：
登录界面可以正常访问，登录再看看能不能访问图书列表界面，如图：
点击登录，如图：
可以成功访问，说明代码修改的没问题。
