准备好前端的代码
这里已经准备好了前端的代码，这里仅仅简单的介绍登入功能，和展示图书列表的功能。
如图：
如上图所示，这里的前端代码还是比较多的，在这里我介绍，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作用一样。
如图运行结果：
等到后面，我会写一个完整的图书管理系统。
