阅读量:0
准备好前端的代码
这里已经准备好了前端的代码，这里仅仅简单的介绍登入功能，和展示图书列表的功能。
如图：
如上图所示，这里的前端代码还是比较多的，在这里我介绍，login.html还有book_list.html这两个。
login.html
如代码：
<!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() { //前端参数校验省略 $.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); } } }); // location.href = "book_list.html"; } </script> </body> </html>上述代码的核心在这一块，如图：
这里的代码是和后端做交互的，后端的url为/user/login ，请求的类型为post请求，然后传递数据，后端再返回结果，如果登入成功就跳转到，“book_list.html”的界面，展示图书。
book_list.html
如代码：
<!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> <!-- <tr> <td><input type="checkbox" name="selectBook" value="1" id="selectBook" class="book-select"></td> <td>1</td> <td>大秦帝国第一册</td> <td>我是作者</td> <td>23</td> <td>33.00</td> <td>北京出版社</td> <td>可借阅</td> <td> <div class="op"> <a href="book_update.html?bookId=1">修改</a> <a href="javascript:void(0)" onclick="deleteBook(1)">删除</a> </div> </td> </tr> --> </tbody> </table> <div class="demo"> <ul id="pageContainer" class="pagination justify-content-center"></ul> </div> <script> getBookList(); function getBookList() { $.ajax({ type: "get", url: "/book/getList", success: function(books){ if(books==null){ return; } var finalHtml = ""; for(var book of books){ //拼接HTML finalHtml +='<tr>'; finalHtml +='<td><input type="checkbox" name="selectBook" value="'+book.bookId+'" id="selectBook" class="book-select"></td>'; finalHtml +='<td>'+book.bookId+'</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.stateCN+'</td>'; finalHtml +='<td>'; finalHtml +='<div class="op">'; finalHtml +='<a href="book_update.html?bookId='+book.bookId+'">修改</a>'; finalHtml +='<a href="javascript:void(0)" onclick="deleteBook('+book.bookId+')">删除</a>'; finalHtml +='</div>'; finalHtml +='</td></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>上述代码，不做介绍了，我是主要写后端的代码的，关于这篇文章，仅仅展示图书即可，没涉及到增删改查。
后端代码
第一步：我们就先准备好图书的实体类
如代码：
package com.bite.springbook.model; import lombok.Data; import java.math.BigDecimal; @Data public class BookInfo { private Integer bookId; private String bookName; private String author; private Integer num; private BigDecimal price; private String publishName; private Integer state; //1- 可借阅 2- 不可借阅 private String stateCN; } 这里我们需要学习，@Data这个注解的作用，这个注解是lombok这个工具里面的，这里他会自动封装好get和set方法，还会重写toStirng方法。
以上就是实体的属性。
第二步：这里我们先写登入功能
如代码：
package com.bite.springbook.controller; 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 String login(String userName , String password , HttpSession session){ if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)){ return "用户不能为空"; } if(!"zhangsan".equals(userName) || !"123456".equals(password)){ return "用户或密码错误"; } session.setAttribute("username" , userName); return ""; } } 如上述所述，这里我们用StringUntils的haslength方法，判断输入是否为空，这样可以节约代码量，然后判断用户是否输入错误，其次存储session信息，最后返回结果，和前端校验。
登入代码这些就结束了。
第三步：书写图书的展示功能
1）controller层
如代码：
package com.bite.springbook.controller; import com.bite.springbook.model.BookInfo; import com.bite.springbook.Service.BookService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.util.List; @RequestMapping("/book") @RestController public class BookController { @Autowired private BookService bookService; @RequestMapping("/getList") public List<BookInfo> getList(){ List<BookInfo> bookInfos = bookService.getList(); return bookInfos; } } 这里我们主要是和前端响应数据用的，controller层调用service层，service层是用于处理业务数据的，这里我们用到了，依赖注入的属性注入来获取service层的对象，如代码中的@Autowired注解。
2）service层
如代码：
package com.bite.springbook.Service; import com.bite.springbook.dao.BookDao; import com.bite.springbook.model.BookInfo; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.List; @Service public class BookService { @Autowired private BookDao bookDao; public List<BookInfo> getList(){ List<BookInfo> bookInfos = bookDao.mockData(); for(BookInfo bookInfo : bookInfos){ if (bookInfo.getState()==1){ bookInfo.setStateCN("可借阅"); }else { bookInfo.setStateCN("不可借阅"); } } return bookInfos; } } 如图这里通过调用dao层的数据，来进行处理，也用到了对属性注入依赖，在这里我们用到了@Service注解，为了把对象交给Spring管理，通过依赖注入就可以取到对象。
3）dao层
如代码：
package com.bite.springbook.dao; import com.bite.springbook.model.BookInfo; import org.springframework.stereotype.Repository; import java.math.BigDecimal; import java.util.ArrayList; import java.util.List; @Repository public class BookDao { public List<BookInfo> mockData() { List<BookInfo> bookInfos = new ArrayList<>(); for (int i = 0; i < 15; i++) { BookInfo bookInfo = new BookInfo(); bookInfo.setBookId(i); bookInfo.setBookName("图书"+i); bookInfo.setAuthor("作者"+i); bookInfo.setNum(15*i+1); bookInfo.setPrice(new BigDecimal(22*i+5-0.5*i)); bookInfo.setPublishName("出版社"+i); bookInfo.setState(i%5==0?2:1); bookInfos.add(bookInfo); } return bookInfos; } } 如图上述是自动生成的数据，到后面我会运用mybatis写一个完整的图书系统。这里的@Repository注解和service层的@Service作用一样。
如图运行结果：
等到后面，我会写一个完整的图书管理系统。
