简单使用SpringMVC写一个图书管理系统的登入功能和图书展示功能

准备好前端的代码

这里已经准备好了前端的代码，这里仅仅简单的介绍登入功能，和展示图书列表的功能。

如图：

如上图所示，这里的前端代码还是比较多的，在这里我介绍，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){//拼接HTMLfinalHtml +='<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) {//获取复选框的idvar 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 {@Autowiredprivate 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 {@Autowiredprivate 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作用一样。

如图运行结果：