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

devtools/2024/9/19 17:52:51/ 标签: spring boot, 后端, java

目录

一、准备工作

二、约定前后端交互接口        

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/devtools/34382.html

相关文章

Bookends for Mac:文献管理工具

Bookends for Mac&#xff0c;一款专为学术、研究和写作领域设计的文献管理工具&#xff0c;以其强大而高效的功能深受用户喜爱。这款软件支持多种文件格式&#xff0c;如PDF、DOC、RTF等&#xff0c;能够自动提取文献的关键信息&#xff0c;如作者、标题、出版社等&#xff0c…

ASP.NET网上书店

摘要 本设计尝试用ASP.NET在网络上架构一个电子书城&#xff0c;以使每一位顾客不用出门在家里就能够通过上网来轻松购书。本文从理论和实践两个角度出发&#xff0c;对一个具有数据挖掘功能电子书城进行设计与实现分析。论文首先较为详尽地介绍了面向对象分析与设计的有关概念…

全栈开发之路——前端篇(1)介绍、框架确定、ide设置与项目创建

文章目录 前言一、前端框架React和VueReactVue 二、编译器选择和配置1.传统的下载和使用2.你可能遇到的问题1.ERR&#xff01; syscall mkdir2.vue : File C:\nodejs\node_global\vue.ps1 cannot be loaded because running scripts is disabled on3.出现乱码问题 3.运行Vue 三…

MySQL-存储引擎

将 连接管理&#xff0c;查询缓存&#xff0c;查询优化 等不影响真实数据存储的功能划分为MySQL Server 功能将真实存取数据的功能划分为 存储引擎&#xff0c;存储引擎即表的类型。 1、查看存储引擎 mysql> show engines; ---------------------------------------------…

代码随想录算法训练营第四十三天

今日事争取今日毕&#xff01;还一天就上班啦&#xff0c;陪产假结束&#xff0c;坚持坚持&#xff01; 1049. 最后一块石头的重量 II 思路主要是分成两个差不多大的两堆&#xff0c;所以需要用尽可能一半去减另一半即可。思路很重要啊&#xff0c;第一次确实想不明白。 clas…

Windows平台通过MobaXterm远程登录安装在VMware上的Linux系统(CentOS)

MobaXterm是一个功能强大的远程计算工具&#xff0c;它提供了一个综合的远程终端和图形化的X11服务器。MobaXterm旨在简化远程计算任务&#xff0c;提供了许多有用的功能&#xff0c;使远程访问和管理远程服务器变得更加方便&#xff0c;它提供了一个强大的终端模拟器&#xff…

【Python项目】基于opencv的的【疲劳检测系统】

技术简介&#xff1a;使用Python技术、OpenCV图像处理库、MYSQL数据库等实现。 系统简介&#xff1a;用户可以通过登录系统平台实现实时的人脸照片的拍摄和上传&#xff0c;结合上传图像的内容进行后台的图像预处理和运算分析&#xff0c;用户可以通过照片分析界面查看到当前检…

蓝桥杯练习系统(算法训练)ALGO-946 Q神的足球赛

资源限制 内存限制&#xff1a;256.0MB C/C时间限制&#xff1a;1.0s Java时间限制&#xff1a;3.0s Python时间限制&#xff1a;5.0s 问题描述 足球赛上&#xff0c;只见Q神如闪电般的速度带球时而左&#xff0c;时而右&#xff0c;时而前&#xff0c;时而后&#xff…

数据库查询语言SQL介绍及基础命令[查看数据库/数据表,创建数据库/数据表,使用数据库/数据表,删除数据库/数据表,如何注释]

SQL介绍 SQL&#xff08;Structured Query Language&#xff09;是一种标准化的数据库查询语言&#xff0c;用于管理和操作关系数据库。SQL的主要作用包括数据查询、数据操作、数据定义和数据访问控制。它是与数据库交互的通用语言&#xff0c;被广泛应用于数据管理和分析。 …

Matlab|考虑极端天气线路脆弱性的配电网分布式电源和储能优化配置模型

1主要内容 程序主要参考《考虑极端天气线路脆弱性的配电网分布式电源配置优化模型-马宇帆》&#xff0c;针对极端天气严重威胁配电网安全稳定运行的问题。基于微气象、微地形对配电网的线路脆弱性进行分析&#xff0c;然后进行分布式电源接入位置与极端天气的关联性分析&#…

代码随想录算法训练营第四十五天| 卡码网57.爬楼梯、LeetCode322.零钱兑换、LeetCode279.完全平方数

卡码网 57 爬楼梯 题目链接&#xff1a;57. 爬楼梯&#xff08;第八期模拟笔试&#xff09; (kamacoder.com) 【解题思路】 1.确定dp数组下标及其含义&#xff1a; dp[j]表示爬到有j个台阶的楼顶&#xff0c;有dp[j]种方法 2.确定递推公式 dp[j]dp[j-i] i代表一步走i个台阶 …

macOS DOSBox 汇编环境搭建

正文 一、安装DOSBox 首先前往DOSBox的官网下载并安装最新版本的DOSBox。 二、下载必备的工具包 在用户目录下新建一个文件夹&#xff0c;比如 dosbox: mkdir dosbox然后下载一些常用的工具。下载好了后&#xff0c;将这些工具解压&#xff0c;重新放在 dosbox 这个文件夹…

【Python函数和类6/6】类与对象

目录 目标 类与对象 类的定义 栗子 实例化对象 属性和方法的调用 特殊的self参数 类方法的其它参数 函数与方法的区别 总结 目标 在前面的博客当中&#xff0c;我们已经接触了一部分封装。比如&#xff1a;将数据扔进列表中&#xff0c;这就是一个简单…

[论文阅读]Adversarial Autoencoders(aae)和代码

In this paper, we propose the “adversarial autoencoder” (AAE), which is a probabilistic autoencoder that uses the recently proposed generative adversarial networks (GAN) to perform variational inference by matching the aggregated posterior of the hidden …

React + 项目(从基础到实战) -- 第十期

目标 学会react 状态管理工具 使用redux管理用户状态 Context 跨层级传递,不像props层层传递类似于Vue的provide/inject用于:切换主题颜色,切换语言 useReducer useState 的替代方案 简化版的redux MobX 1. MobX 介绍 MobX 中文文档 声明式的修改数据 , 像vue state ac…

原创新作vue3+uni-app+pinia跨三端(H5+小程序+App端)聊天模板

uni-vue3-wchat&#xff1a;基于uni-appvue3piniauv-ui等技术搭建跨多终端(h5小程序APP)仿制微信app界面聊天模板。实现编辑框自适应高度消息/emoj混合、按住说话语音、图片/视频预览、红包/朋友圈等功能。 【APP版】uniappvue3跨端(h5小程序App端)聊天实例 flutter3-macos基于…

探索CSS3文本效果:打造魅力无限的网页排版

CSS3为网页设计带来了革命性的变化&#xff0c;特别是在文本效果方面&#xff0c;它赋予了开发者前所未有的创意空间。本文将带你深入了解CSS3中一些令人兴奋的文本效果&#xff0c;从基本的阴影处理到复杂的动画效果&#xff0c;每个技巧都将通过实际代码示例展现其魅力所在。…

Redis实际应用中的解决方案

Redis缓存使用问题 1数据一致性 分析一下几种方案&#xff1a; 1&#xff1a;先更新缓存&#xff0c;再更新数据库 2&#xff1a;先更新数据库&#xff0c;在更新缓存 3&#xff1a;先删除缓存&#xff0c;后更新数据库 4&#xff1a;想更新数据库&#xff0c;后删除缓存 …

【iOS】KVO

文章目录 前言一、KVO使用1.基本使用2.context使用3.移除KVO通知的必要性4.KVO观察可变数组 二、代码调试探索1.KVO对属性观察2.中间类3.中间类的方法3.dealloc中移除观察者后&#xff0c;isa指向是谁&#xff0c;以及中间类是否会销毁&#xff1f;总结 三、KVO本质GNUStep窥探…

修改JupyterNotebook文件存储位置

Jupyter Notebook 1、通过AnaConda安装Jupyter Notebok 2、在开始菜单里找到并打开Anaconda Prompt&#xff0c;输入如下命令&#xff0c;然后执行。 jupyter notebook --generate-config4、打开以下文件 找到 C:/Userzh/.../.jupyter 打开 jupyter_notebook_config.py 取消…