综合性练习（后端代码练习4）——图书管理系统

server/2024/10/18 12:30:12/

目录

一、准备工作

二、约定前后端交互接口        

1、需求分析

2、接口定义

（1）登录接口

（2）图书列表接口

三、服务器代码

（1）创建一个UserController类，实现登录验证接口

（2）创建一个BookController类，实现获取图书列表接口

四、调整前端页面代码

（1）登录页面

（2）图书列表展示

五、运行测试

需求：1、登录：用户输入完账号密码，完成登录功能；2、列表：展示图书

登录页面如下：

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() {location.href = "book_list.html";}</script>
</body></html>

图书列表页面如下：

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><tr><td><input type="checkbox" name="selectBook" value="1" id="selectBook" class="book-select"></td><td>2</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=2">修改</a><a href="javascript:void(0)" onclick="deleteBook(2)">删除</a></div></td></tr><tr><td><input type="checkbox" name="selectBook" value="1" id="selectBook" class="book-select"></td><td>3</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=3">修改</a><a href="javascript:void(0)" onclick="deleteBook(3)">删除</a></div></td></tr><tr><td><input type="checkbox" name="selectBook" value="1" id="selectBook" class="book-select"></td><td>4</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=4">修改</a><a href="javascript:void(0)" onclick="deleteBook(4)">删除</a></div></td></tr></tbody></table><div class="demo"><ul id="pageContainer" class="pagination justify-content-center"></ul></div><script>getBookList();function getBookList() {}//翻页信息$("#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 Boot项目，把前端代码复制进项目中。如图：

        

二、约定前后端交互接口        

1、需求分析

        图书管理系统是一个相对较大的案例，我们先实现这两种功能：用户登录、图书列表展示，也就是上面需求那的两张图。

        根据需求得到，后端需要两个接口：

1、账号密码校验接口：根据输入用户名和密码校验登录是否通过。

2、图书列表：提供图书列表信息。

2、接口定义

（1）登录接口

URL：/user/login

请求参数：userName，password

返回结果（响应）：成功 / 失败 （String类型，成功返回：" " （空字符串）；失败返回失败原因）

（2）图书列表接口

URL：/book/getBookList

请求参数：无

返回结果（响应）：图书列表（ [{}, {}, {}, .....] ）

        图书列表的字段说明：

id图书ID
bookName图书名称
author作者
num数量
price定价
publish图书出版社
status图书状态：1-可借阅   2-不可借阅
statusCN图书状态中文含义

三、服务器代码

        创建一个图书类，代码如下：

java">@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;//状态的中文含义
}

（1）创建一个UserController类，实现登录验证接口

        代码如下：

java">@RestController
@RequestMapping("/user")
public class UserController {@RequestMapping("/login")public String login(String userName, String password, HttpSession session) {//1、校验参数//2、校验密码是否正确//3、返回响应结果if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)) {return "用户名或者密码为空";}if(!"admin".equals(userName) || !"admin".equals(password)) {return "账号或密码错误";}session.setAttribute("userName", userName);return "";}
}

（2）创建一个BookController类，实现获取图书列表接口

java">@RestController
@RequestMapping("/book")
public class BookController {List<BookInfo> bookInfos = new ArrayList<>();@RequestMapping("/getBookList")public List<BookInfo> getBookList() {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;}
}

注意：这里的数据采用mock的方式，实际数据应该从数据库中拿，但这里直接放在内存了，这里的数据也不是真实的数据。

mock：模拟的，假的

在开发和测试过程中，由于环境不稳定或者协同开发的同事未完成等情况下，有些数据不容易构造或者不容易获取，就会创建一个虚拟的对象或者数据样本，用来辅助开发或者测试工作。这些数据简单的来说也就是假数据。

四、调整前端页面代码

        主要逻辑都在JS里的ajax请求中。

（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>

五、运行测试

        浏览器访问：http://127.0.0.1:8080/login.html，页面如下：

        直接点击登录，页面如下：

        输入错误的用户名或者密码，页面如下：

        输入正确的用户名、密码，

        页面会跳转到 http://127.0.0.1:8080/book_list.html ，页面如下：

都看到这了，点个赞再走吧，谢谢谢谢谢


http://www.ppmy.cn/server/28063.html

相关文章

【Redis基础】Redis知识体系详解-Redis概念和基础

【Redis基础】Redis知识体系详解-Redis概念和基础

1. 什么是Redis Redis是一款用C语言编写的key-value存储系统&#xff08;键值存储系统&#xff09;&#xff0c;支持丰富的数据类型&#xff0c;如&#xff1a;String、list、set、zset、hash。 Redis是一种支持key-value等多种数据结构的存储系统。可用于缓存&#xff0c;事…
阅读更多...
Java项目：基于SSM框架实现的高校专业信息管理系统设计与实现（ssm+B/S架构+源码+数据库+毕业论文+PPT+开题报告）

Java项目：基于SSM框架实现的高校专业信息管理系统设计与实现（ssm+B/S架构+源码+数据库+毕业论文+PPT+开题报告）

一、项目简介 本项目是一套基于SSM框架实现的高校专业信息管理系统 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美观、操作简单、…
阅读更多...
使用消息中间件实现系统间的异步通信和解耦

使用消息中间件实现系统间的异步通信和解耦

✨✨谢谢大家捧场&#xff0c;祝屏幕前的小伙伴们每天都有好运相伴左右&#xff0c;一定要天天开心哦&#xff01;✨✨ &#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; ✨✨ 帅哥美女们&#xff0c;我们共同加油&#xff01;一起进步&am…
阅读更多...
图论之最短路算法模板总结

图论之最短路算法模板总结

来个大致的分类&#xff1a; 朴素的迪杰斯特拉&#xff1a; 实现&#xff1a; 我们让s表示当前已经确定的最短距离的点&#xff0c;我们找到一个不在s中的距离最近的点t&#xff0c;并用t来更新其他的点。 下面是AC代码&#xff1a; #include<bits/stdc.h> using nam…
阅读更多...
node.js的常用内置库(1)共128节

node.js的常用内置库(1)共128节

我说假如node.js 一路杀出&#xff0c;成为一种后端主要选型的时候&#xff0c;你再次去了解晚么&#xff0c;不晚&#xff0c;但给你的时间肯定不多&#xff5e;&#x1f604; 跟着我一起开始认识node吧&#xff0c;今日份不多3个API &#xff0c;加油 1.assert 在 Node.js 环…
阅读更多...
Oracle集群ORA-03113:end-of-file on communication channel

Oracle集群ORA-03113:end-of-file on communication channel

一、问题场景描述 今天Oracle集群要更新各数据库的数据&#xff0c;折腾的启动不了了&#xff1a; --》数据量比较大&#xff0c;数据泵方式导出的dmp文件 准备导入集群 --》由于之前的生产数据库数据比较少&#xff0c;需要增大表空间。 --》于是在sqlplus命令窗口&#xff0c…
阅读更多...
2024五一杯数学建模C题思路分享 - 煤矿深部开采冲击地压危险预测

2024五一杯数学建模C题思路分享 - 煤矿深部开采冲击地压危险预测

文章目录 1 赛题选题分析 2 解题思路2.1 问题重述2.2 第一问完整思路2.2 二、三问思路更新 3 最新思路更新 1 赛题 C题 煤矿深部开采冲击地压危险预测 煤炭是中国的主要能源和重要的工业原料。然而&#xff0c;随着开采深度的增加&#xff0c;地应力增大&#xff0c;井下煤岩动…
阅读更多...
k8s解析数据 -o=jsonpath=‘{}‘ 的使用

k8s解析数据 -o=jsonpath=‘{}‘ 的使用

kubectl -ojsonpath 是 Kubernetes 命令行工具 kubectl 中的一个输出选项&#xff0c;用于以 JSONPath 格式提取并展示 API 对象的部分内容。JSONPath 是一种查询语言&#xff0c;它允许用户在 JSON 结构中导航和提取数据。这对于自动化脚本和快速查询 Kubernetes 资源的特定部…
阅读更多...
最新文章

Copyright @ 2022~2023