Spring Boot图书管理系统项目实战-11.检索图书
导航：
pre：10.借还统计
next：
只挑重点的讲，具体的请看项目源码。
1.项目源码
需要源码的朋友，请捐赠任意金额后留下邮箱发送：）
2.页面设计
2.1 index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>搜索图书</title>
<link rel="stylesheet" href="/static/layui/css/layui.css" th:href="@{/static/layui/css/layui.css}">
<style type="text/css">
.main {
width: 40%;
margin: 50px auto;
text-align: center;
}
.site-h1 {
margin-bottom: 20px;
line-height: 60px;
padding-bottom: 10px;
color: #393D49;
font-size: 28px;
font-weight: 300;
}
.site-h1 .layui-icon {
position: relative;
top: 5px;
font-size: 35px;
margin-right: 10px;
}
.input-opt {
float: left;
width: 15%;
}
.input-text {
float: right;
width: 84%;
}
.items {
margin: 50px 0;
}
.items .col1 {
width: 40px;
text-align: left;
}
.items .cover img {
padding: 10px;
height: 80px;
width: 75px;
text-align: center;
vertical-align: center;
}
.items .itemtitle {
margin-bottom: 30px;
vertical-align: left;
font-size: 16px;
font-weight: normal;
}
.items .content {
width: 270px;
}
.items .label1 {
width: 80px;
vertical-align: top;
}
.items .content {
width: 70px;
}
.item {
border-top: 1px solid #eee;
}
</style>
</head>
<body>
<div class="main">
<h1 class="site-h1"><i class="layui-icon"></i>Bookman图书检索</h1>
<form class="layui-form">
<div class="layui-form-item">
<div class="input-opt">
<select name="condition" lay-verify="required">
<option value="isbn">ISBN号</option>
<option value="author">作者</option>
<option value="name">名称</option>
</select>
</div>
<div class="input-text">
<input type="text" name="keyword" required lay-verify="required" placeholder="请输入" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-submit" lay-submit="" lay-filter="formDemo">搜索</button>
</div>
</form>
<!-- 列表 -->
<div class="booklist">
<table class="items">
</table>
<!--分页-->
<div id="pager"></div>
</div>
</div>
<script src="/static/js/jquery-1.11.3.min.js" th:src="@{/static/js/jquery-1.11.3.min.js}"></script>
<script src="/static/layui/layui.js" th:src="@{/static/layui/layui.js}"></script>
<script th:src="@{/static/js/util.js}"></script>
<!--ctx-->
<script th:replace="~{fragment::ctx}"/>
<script>
var form, laypage;
// 请求参数
var param = {};
layui.use(['form','laypage','jquery'], function () {
form = layui.form;
laypage = layui.laypage, $ = layui.$;
//监听提交
form.on('submit(formDemo)', function (data) {
param.name = "";
param.isbn = "";
param.author = "";
if (data.field.condition == "isbn") {
param.isbn = data.field.keyword;
}
if (data.field.condition == "name") {
param.name = data.field.keyword;
}
if (data.field.condition == "author") {
param.author = data.field.keyword;
}
showRecord(1,5,param);
return false;
});
});
function showRecord(pageNo, pageSize, param) {
$.get(ctx+"api/book/list",
{
author: param.author,
name: param.name,
isbn: param.isbn,
page: pageNo,
limit: pageSize
},
function (result) {
//console.log(JSON.stringify(result));
// 展示数据
fillPage(pageNo, pageSize, result.data);
// 渲染分页
laypage.render({
elem: $('#pager')
,count: result.count //数据总数，从服务端得到
, limit: 5 //每页显示条数
, limits: [5, 10, 15]
, curr: 1 //起始页
, groups: 5 //连续页码个数
, prev: '上一页' //上一页文本
, netx: '下一页' //下一页文本
, first: 1 //首页文本
, last: 100 //尾页文本
, layout: ['prev', 'page', 'next','limit','skip']
//跳转页码时调用
, jump: function (obj, first) { //obj为当前页的属性和方法，第一次加载first为true
//非首次加载 do something
if (!first) {
//调用加载函数加载数据
getPage(obj.curr,obj.limit,param);
}
}
});
}
);
}
function getPage(pageNo, pageSize, param) {
var result1;
$.get(ctx+"api/book/list",
{
author: param.author,
name: param.name,
isbn: param.isbn,
page: pageNo,
limit: pageSize
},
function (result) {
fillPage(pageNo, pageSize, result.data);
}
);
}
function fillPage(pageNo, pageSize, data) {
var start=pageNo==1?1:(pageNo-1)*pageSize+1;
$('.items').empty();
//加载后台返回的List集合数据
var href="";
for (var i = 0; i < data.length; i++) {
href=ctx+"bookDetail/"+data[i].id;
var td = $("<td class='col1'></td>").text(start+i);
var td2;
if(isEmpty(data[i].imgPath)){
td2 = $("<td class='cover'><a href='"+href+"' target='_blank'><img src='static/img/nopic.png'></a></td>");
}else{
td2 = $("<td class='cover'><a href='"+href+"' target='_blank'><img src='"+data[i].imgPath+"'></a></td>");
}
var td3 = $("<td class='col2'></td>");
var div = $("<div class='itemtitle'><a href='"+href+"' target='_blank'>"+data[i].name+"</a></div>");
var tb = $("<table><tr><td class='label1'>作者：</td><td class='content'>"+data[i].author+"</td>" +
"<td class='label1'>ISBN：</td><td class='content'>"+data[i].isbn+"</td></tr></table>")
td3.append(div,tb);
var tr = $("<tr class='item'></tr>").append(td, td2, td3);
$('.items').append(tr);
}
}
</script>
</body>
</html>2.2 bookDetail.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图书详情</title>
<link rel="stylesheet" href="/static/layui/css/layui.css" th:href="@{/static/layui/css/layui.css}">
<script src="/static/js/jquery-1.11.3.min.js" th:src="@{/static/js/jquery-1.11.3.min.js}"></script>
<script src="/static/layui/layui.all.js" th:src="@{static/layui/layui.all.js}"></script>
</head>
<body>
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md6 layui-col-md-offset3">
<div class="layui-card">
<div class="layui-card-body">
<table class="layui-table">
<thead>
<tr class="layui-bg-green">
<td colspan="2" th:text="${book.name}">《安娜·卡列尼娜》</td>
</tr>
</thead>
<tbody>
<tr>
<td>ISBN</td>
<td th:text="${book.isbn}">1223</td>
</tr>
<tr>
<td>作者</td>
<td th:text="${book.author}">列夫·托尔斯泰</td>
</tr>
<tr>
<td>定价</td>
<td th:text="${book.price}">29.0</td>
</tr>
<tr>
<td>存放位置</td>
<td th:text="${book.locationName}">2</td>
</tr>
<tr>
<td>馆内剩余</td>
<td th:text="${book.leftNumber}">2</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Spring Boot图书管理系统项目实战-11.检索图书的更多相关文章
- Spring Boot → 06：项目实战-账单管理系统
Spring Boot → 06:项目实战-账单管理系统
- Java 架构师+高并发+性能优化+Spring boot大型分布式项目实战
视频课程内容包含: 高级 Java 架构师包含:Spring boot.Spring cloud.Dubbo.Redis.ActiveMQ.Nginx.Mycat.Spring.MongoDB.Zer ...
- 新书上线：《Spring Boot+Spring Cloud+Vue+Element项目实战：手把手教你开发权限管理系统》，欢迎大家买回去垫椅子垫桌脚
新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚 ...
- 图书-技术-SpringBoot：《Spring Boot 企业级应用开发实战》
ylbtech-图书-技术-SpringBoot:<Spring Boot 企业级应用开发实战> Spring Boot 企业级应用开发实战,全书围绕如何整合以 Spring Boot 为 ...
- 从零一起学Spring Boot之LayIM项目长成记（五）websocket
前言 距离上一篇已经比较久的时间了,项目也是开了个头.并且,由于网上的关于Spring Boot的websocket讲解也比较多.于是我采用了另外的一个通讯框架 t-io 来实现LayIM中的通讯功能 ...
- Spring Boot会员管理系统——处理文件上传
温馨提示 Spring Boot会员管理系统的中,需要涉及到Spring框架,SpringMVC框架,Hibernate框架,thymeleaf模板引擎.所以,可以学习下这些知识.当然,直接入门的话使 ...
- 使用Spring Boot开发Web项目(二)之添加HTTPS支持
上篇博客使用Spring Boot开发Web项目我们简单介绍了使用如何使用Spring Boot创建一个使用了Thymeleaf模板引擎的Web项目,当然这还远远不够.今天我们再来看看如何给我们的We ...
- Spring Boot 多模块项目创建与配置 (一) （转）
Spring Boot 多模块项目创建与配置 (一) 最近在负责的是一个比较复杂项目,模块很多,代码中的二级模块就有9个,部分二级模块下面还分了多个模块.代码中的多模块是用maven管理的,每个模块都 ...
- Maven 搭建spring boot多模块项目（附源码）,亲测可以,感谢原创
原创地址:https://segmentfault.com/a/1190000005020589 我的DEMO码云地址,持续添加新功能: https://gitee.com/itbase/Spring ...
- 从零一起学Spring Boot之LayIM项目长成记（二） LayIM初体验
前言 接上篇,已经完成了一个SpringBoot项目的基本搭建.那么现在就要考虑要做什么,怎么做的问题.所以本篇内容不多,带大家一起来简单了解一下要做的东西,之前有很多人不知道从哪里下手,那么今天我带 ...
随机推荐
- [转帖]Oracle中为什么需要NCHAR
https://zhuanlan.zhihu.com/p/668402759 Oracle中已经有了char.varchar2等字符类型,为什么又弄出一个nchar.nvarchar2? Oracle ...
- [转帖]NET Framework 版本和依赖关系
https://learn.microsoft.com/zh-cn/dotnet/framework/migration-guide/versions-and-dependencies 每个版本的 . ...
- [转帖]Nginx 保留 Client 真实 IP
https://lqingcloud.cn/post/nginx-01/#:~:text=%E5%9C%A8%20Nginx%20%E4%B8%AD%E5%8F%AF%E4%BB%A5%E9%80%9 ...
- [转帖]pod容器开启pid限制
https://zhdya.gitee.io/zhdya/archives/ cgroup中对pid进行了隔离,通过更改docker/kubelet配置,可以限制pid总数,从而达到限制线程总数的 ...
- [转帖]Kubernetes-18：Dashboard安装及使用
https://www.cnblogs.com/v-fan/p/13950268.html Helm安装Dashboard 简介 Dashboard 是 kubernetes 的图形化管理工具,可直观 ...
- [转帖]读懂什么是RDMA
https://blog.csdn.net/tony_vip?type=blog 一.什么是RDMA1.RDMA主要体现 2.如何理解RDMA和TCP技术的区别?3.使用RDMA的好处包括: ...
- [官方]Beyond Compare里面 二进制比较的含义.
Content Comparisons Actions > Compare Contents In the Actions menu, the Compare Contents command ...
- 源码学习之Spring容器创建原理
1 前言 众所周知,Spring可以帮我们管理我们需要的bean.在我们需要用到这些bean的时候,可以很方便的获取到它,然后进行一系列的操作.比如,我们定义一个bean MyTestBean pub ...
- csv用Excel打开出现乱码
CSV用Excel打开出现乱码 今天出现一个问题 使用wps打开不会出现乱码.但使用 excel 打开的时候会出现乱码. 其实在我们把文件流转成文件的时候需要在bolb 对象前加上unicode标识, ...
- justify-content: space-between能够对齐的解决办法
解决办法一 .main{ display: flex; justify-content: space-around; flex-wrap: wrap; } .son{ width:100px } // ...