这里修改的还是比较简单,我们知道,五大注解通常情况下是可以混用的,而这里的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) {//获取复选框的idvar 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 ,如图:
登录界面可以正常访问,登录再看看能不能访问图书列表界面,如图:
点击登录,如图:
可以成功访问,说明代码修改的没问题。