当前位置：首页 > news >正文

Spring Boot：图书管理系统（一）

news 来源：原创 2024/9/21 8:43:22

1.编写用户登录接口

代码：

package com.example.demo;import jakarta.servlet.http.HttpSession;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
@RequestMapping("/user")
public class UserController {@RequestMapping("/login")public String login(String userName, String password, HttpSession session){//1.校验参数if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)){return "用户名或密码为空";}//2.验证密码正确，理论是从数据库获取，但是未学习，先模拟校验if(!"lhy".equals(userName)||!"0407".equals(password)){return "密码错误";}session.setAttribute("userName", userName);return "ok";}
}

2.编写图书列表接口

先创建图书对象（用来接收前端的参数）

代码:

package com.example.demo;import lombok.Data;import java.math.BigDecimal;@Data
public class BookInfo{// 图书的唯一标识符private Integer id;// 图书的名称private String bookName;// 图书的作者private String author;// 图书的某种编号或库存数量（这里假设为编号）private Integer num;// 图书的价格private BigDecimal price;// 出版图书的出版社名称private String publishName;// 图书的借阅状态。1表示图书可借阅，2表示图书不可借阅private Integer status;// 图书借阅状态的中文描述，用于更直观地展示图书的借阅情况private String statusCN;}

3.编写图书列表接口

代码：

package com.example.demo;import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.List;// 使用@RestController注解将类标记为Spring MVC的控制器，并且该类中所有方法的返回值都会自动转换为JSON或XML格式
@RestController
// 使用@RequestMapping注解定义该控制器中所有请求的基础URL路径
@RequestMapping("book")
public class BookController {@RequestMapping("/getBookList")public List<BookInfo> getBookList(){List<BookInfo> bookInfos = new ArrayList<>(); // 创建一个空的图书信息列表// 使用for循环生成15条图书信息for (int i = 1; i <= 15 ; i++) {BookInfo bookInfo = new BookInfo(); // 创建一个新的图书信息对象bookInfo.setId(i); // 设置图书IDbookInfo.setBookName("图书"+i); // 设置图书名称bookInfo.setAuthor("作者"+i); // 设置图书作者bookInfo.setNum(i*2+1); // 假设这是图书的某个编号或者数量，这里简单设置为2*i+1bookInfo.setPrice(new BigDecimal(i*3)); // 设置图书价格，假设为3*ibookInfo.setPublishName("出版设"+i); // 设置出版社名称// 根据图书ID是否为5的倍数来设置图书的借阅状态if(i % 5 == 0){bookInfo.setStatus(2); // 设置不可借阅状态bookInfo.setStatusCN("不可借阅"); // 设置中文状态描述}else {bookInfo.setStatus(1); // 设置可借阅状态bookInfo.setStatusCN("可借阅"); // 设置中文状态描述}bookInfos.add(bookInfo); // 将图书信息添加到列表中}return bookInfos; // 返回包含所有图书信息的列表}}

4.打开postman测试后端接口

用户验证成功

返回图书列表成功

5. 编写用户登录的前端代码（主要看AJAX）

代码：

<!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 =="ok"){//密码正确location.href = "book_list.html";}else{alert(result);}}});}</script>
</body></html>

6.前端测试

7.编写图书列表的前端代码

（有点错误，下面的那个多行换页没有显示出来）：

代码：

<!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: "get",success: function (books) {var finnalHtml = "";for (var book of books) {finnalHtml += '<tr>';finnalHtml += '<td><input type="checkbox" name="selectBook" value="' + book.id + '" id="selectBook" class="book-select"></td>';finnalHtml += '<td>' + book.id + '</td>';finnalHtml += '<td>' + book.bookName + '</td>';finnalHtml += '<td>' + book.author + '</td>';finnalHtml += '<td>' + book.num + '</td>';finnalHtml += '<td>' + book.price + '</td>';finnalHtml += '<td>' + book.publishName + '</td>';finnalHtml += '<td>' + book.statusCN + '</td>';finnalHtml += '<td>';finnalHtml += '<div class="op">';finnalHtml += '<a href="book_update.html?bookId=' + book.id + '">修改</a>';finnalHtml += '<a href="javascript:void(0)" onclick="deleteBook(' + book.id + ')">删除</a>';finnalHtml += '</div></td></tr>';}$("tbody").html(finnalHtml);}});}var data = book.data;//翻页信息$("#pageContainer").jqPaginator({totalCounts: data.count, //总记录数pageSize: 10,    //每页的个数visiblePages: 5, //可视页数currentPage: data.pageRequest.pageNum,  //当前页码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);if (type == "change") {location.href = "book_list.html?pageNum=" + page;}}});function deleteBook(id) {var isDelete = confirm("确认删除?");if (isDelete) {//删除图书$.ajax({url: "/book/deleteBook",type: "post",data: {bookId: id},success: function (result) {console.log(result);if (result.code == "SUCCESS" && result.data == true) {// location.href = "book_list.html"+location.search;location.href = "book_list.html";} else {alert("删除失败, 请联系管理员");}},error: function (error) {//用户未登录if (error != null && error.status == 401) {location.href = "login.html";}}});// alert("删除成功");}}function batchDelete() {var isDelete = confirm("确认批量删除?");if (isDelete) {//获取复选框的idvar ids = [];//已经选中的元素$("input:checkbox[name='selectBook']:checked").each(function () {ids.push($(this).val());});console.log(ids);$.ajax({url: "/book/batchDeleteBook?ids=" + ids,type: "post",success: function (result) {if (result.code == "SUCCESS" && result.data == "") {//删除成功location.href = "book_list.html";} else {alert(result.data);}},error: function (error) {//用户未登录if (error != null && error.status == 401) {location.href = "login.html";}}});// alert("批量删除成功");}}</script>
</div>
</body></html>