导航：

pre：10.借还统计

next：

只挑重点的讲，具体的请看项目源码。

1.项目源码

需要源码的朋友，请捐赠任意金额后留下邮箱发送：）

2.页面设计

2.1 index.html

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>搜索图书</title>
  9.     <link rel="stylesheet" href="/static/layui/css/layui.css" th:href="@{/static/layui/css/layui.css}">
  11.     <style type="text/css">
  12.         .main {
  13.             width: 40%;
  14.             margin: 50px auto;
  15.             text-align: center;
  16.         }
  18.         .site-h1 {
  19.             margin-bottom: 20px;
  20.             line-height: 60px;
  21.             padding-bottom: 10px;
  22.             color: #393D49;
  23.             font-size: 28px;
  24.             font-weight: 300;
  25.         }
  27.         .site-h1 .layui-icon {
  28.             position: relative;
  29.             top: 5px;
  30.             font-size: 35px;
  31.             margin-right: 10px;
  32.         }
  34.         .input-opt {
  35.             float: left;
  36.             width: 15%;
  37.         }
  39.         .input-text {
  40.             float: right;
  41.             width: 84%;
  42.         }
  44.         .items {
  45.             margin: 50px 0;
  46.         }
  48.         .items .col1 {
  49.             width: 40px;
  50.             text-align: left;
  51.         }
  53.         .items .cover img {
  54.             padding: 10px;
  55.             height: 80px;
  56.             width: 75px;
  57.             text-align: center;
  58.             vertical-align: center;
  59.         }
  61.         .items .itemtitle {
  62.             margin-bottom: 30px;
  63.             vertical-align: left;
  64.             font-size: 16px;
  65.             font-weight: normal;
  66.         }
  68.         .items .content {
  69.             width: 270px;
  70.         }
  72.         .items .label1 {
  73.             width: 80px;
  74.             vertical-align: top;
  75.         }
  77.         .items .content {
  78.             width: 70px;
  79.         }
  81.         .item {
  82.             border-top: 1px solid #eee;
  83.         }
  84.     </style>
  85. </head>
  86. <body>
  87. <div class="main">
  88.     <h1 class="site-h1"><i class="layui-icon"></i>Bookman图书检索</h1>
  89.     <form class="layui-form">
  90.         <div class="layui-form-item">
  91.             <div class="input-opt">
  92.                 <select name="condition" lay-verify="required">
  93.                     <option value="isbn">ISBN号</option>
  94.                     <option value="author">作者</option>
  95.                     <option value="name">名称</option>
  96.                 </select>
  97.             </div>
  98.             <div class="input-text">
  99.                 <input type="text" name="keyword" required lay-verify="required" placeholder="请输入" autocomplete="off"
  100.                        class="layui-input">
  101.             </div>
  103.         </div>
  105.         <div class="layui-form-item">
  106.             <button class="layui-btn layui-btn-submit" lay-submit="" lay-filter="formDemo">搜索</button>
  107.         </div>
  108.     </form>
  110.     <!-- 列表 -->
  111.     <div class="booklist">
  112.         <table class="items">
  113.         </table>
  114.         <!--分页-->
  115.         <div id="pager"></div>
  116.     </div>
  117. </div>
  119. <script src="/static/js/jquery-1.11.3.min.js" th:src="@{/static/js/jquery-1.11.3.min.js}"></script>
  120. <script src="/static/layui/layui.js" th:src="@{/static/layui/layui.js}"></script>
  121. <script th:src="@{/static/js/util.js}"></script>
  123. <!--ctx-->
  124. <script th:replace="~{fragment::ctx}"/>
  126. <script>
  127.     var form, laypage;
  128.     // 请求参数
  129.     var param = {};
  131.     layui.use(['form','laypage','jquery'], function () {
  132.         form = layui.form;
  133.         laypage = layui.laypage, $ = layui.$;
  135.         //监听提交
  136.         form.on('submit(formDemo)', function (data) {
  137.             param.name = "";
  138.             param.isbn = "";
  139.             param.author = "";
  141.             if (data.field.condition == "isbn") {
  142.                 param.isbn = data.field.keyword;
  143.             }
  144.             if (data.field.condition == "name") {
  145.                 param.name = data.field.keyword;
  146.             }
  147.             if (data.field.condition == "author") {
  148.                 param.author = data.field.keyword;
  149.             }
  151.             showRecord(1,5,param);
  153.             return false;
  154.         });
  155.     });
  157.     function showRecord(pageNo, pageSize, param) {
  158.         $.get(ctx+"api/book/list",
  159.             {
  160.                 author: param.author,
  161.                 name: param.name,
  162.                 isbn: param.isbn,
  163.                 page: pageNo,
  164.                 limit: pageSize
  165.             },
  166.             function (result) {
  167.                 //console.log(JSON.stringify(result));
  168.                 // 展示数据
  169.                 fillPage(pageNo, pageSize, result.data);
  170.                 // 渲染分页
  171.                 laypage.render({
  172.                     elem: $('#pager')
  173.                     ,count: result.count            //数据总数，从服务端得到
  174.                     , limit: 5                      //每页显示条数
  175.                     , limits: [5, 10, 15]
  176.                     , curr: 1                        //起始页
  177.                     , groups: 5                      //连续页码个数
  178.                     , prev: '上一页'                 //上一页文本
  179.                     , netx: '下一页'                 //下一页文本
  180.                     , first: 1                      //首页文本
  181.                     , last: 100                     //尾页文本
  182.                     , layout: ['prev', 'page', 'next','limit','skip']
  183.                     //跳转页码时调用
  184.                     , jump: function (obj, first) { //obj为当前页的属性和方法，第一次加载first为true
  185.                         //非首次加载 do something
  186.                         if (!first) {
  187.                             //调用加载函数加载数据
  188.                             getPage(obj.curr,obj.limit,param);
  189.                         }
  190.                     }
  191.                 });
  192.             }
  193.         );
  194.     }
  196.     function getPage(pageNo, pageSize, param) {
  197.         var result1;
  198.         $.get(ctx+"api/book/list",
  199.             {
  200.                 author: param.author,
  201.                 name: param.name,
  202.                 isbn: param.isbn,
  203.                 page: pageNo,
  204.                 limit: pageSize
  205.             },
  206.             function (result) {
  207.                 fillPage(pageNo, pageSize, result.data);
  208.             }
  209.         );
  210.     }
  212.     function fillPage(pageNo, pageSize, data) {
  213.         var start=pageNo==1?1:(pageNo-1)*pageSize+1;
  214.         $('.items').empty();
  215.         //加载后台返回的List集合数据
  216.         var href="";
  217.         for (var i = 0; i < data.length; i++) {
  218.             href=ctx+"bookDetail/"+data[i].id;
  219.             var td = $("<td class='col1'></td>").text(start+i);
  220.             var td2;
  221.             if(isEmpty(data[i].imgPath)){
  222.                 td2 = $("<td class='cover'><a href='"+href+"' target='_blank'><img src='static/img/nopic.png'></a></td>");
  223.             }else{
  224.                 td2 = $("<td class='cover'><a href='"+href+"' target='_blank'><img src='"+data[i].imgPath+"'></a></td>");
  225.             }
  226.             var td3 = $("<td class='col2'></td>");
  227.             var div = $("<div class='itemtitle'><a href='"+href+"' target='_blank'>"+data[i].name+"</a></div>");
  228.             var tb = $("<table><tr><td class='label1'>作者：</td><td class='content'>"+data[i].author+"</td>" +
  229.                 "<td class='label1'>ISBN：</td><td class='content'>"+data[i].isbn+"</td></tr></table>")
  230.             td3.append(div,tb);
  231.             var tr = $("<tr class='item'></tr>").append(td, td2, td3);
  233.             $('.items').append(tr);
  234.         }
  235.     }
  237. </script>
  238. </body>
  239. </html>

2.2 bookDetail.html

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>图书详情</title>
  9.     <link rel="stylesheet" href="/static/layui/css/layui.css" th:href="@{/static/layui/css/layui.css}">
  11.     <script src="/static/js/jquery-1.11.3.min.js" th:src="@{/static/js/jquery-1.11.3.min.js}"></script>
  12.     <script src="/static/layui/layui.all.js" th:src="@{static/layui/layui.all.js}"></script>
  13. </head>
  14. <body>
  15. <div class="layui-fluid">
  16.     <div class="layui-row layui-col-space15">
  17.         <div class="layui-col-md6 layui-col-md-offset3">
  18.             <div class="layui-card">
  19.                 <div class="layui-card-body">
  20.                     <table class="layui-table">
  21.                         <thead>
  22.                             <tr class="layui-bg-green">
  23.                                 <td colspan="2" th:text="${book.name}">《安娜·卡列尼娜》</td>
  24.                             </tr>
  25.                         </thead>
  26.                         <tbody>
  27.                             <tr>
  28.                                 <td>ISBN</td>
  29.                                 <td th:text="${book.isbn}">1223</td>
  30.                             </tr>
  31.                             <tr>
  32.                                 <td>作者</td>
  33.                                 <td th:text="${book.author}">列夫·托尔斯泰</td>
  34.                             </tr>
  35.                             <tr>
  36.                                 <td>定价</td>
  37.                                 <td th:text="${book.price}">29.0</td>
  38.                             </tr>
  39.                             <tr>
  40.                                 <td>存放位置</td>
  41.                                 <td th:text="${book.locationName}">2</td>
  42.                             </tr>
  43.                             <tr>
  44.                                 <td>馆内剩余</td>
  45.                                 <td th:text="${book.leftNumber}">2</td>
  46.                             </tr>
  47.                         </tbody>
  48.                     </table>
  49.                 </div>
  50.             </div>
  51.         </div>
  52.     </div>
  53. </div>
  55. </body>
  56. </html>

Spring Boot图书管理系统项目实战-11.检索图书的更多相关文章

  1. Spring Boot → 06：项目实战-账单管理系统

    Spring Boot → 06:项目实战-账单管理系统

  2. Java 架构师+高并发+性能优化+Spring boot大型分布式项目实战

    视频课程内容包含: 高级 Java 架构师包含:Spring boot.Spring cloud.Dubbo.Redis.ActiveMQ.Nginx.Mycat.Spring.MongoDB.Zer ...

  3. 新书上线：《Spring Boot+Spring Cloud+Vue+Element项目实战：手把手教你开发权限管理系统》，欢迎大家买回去垫椅子垫桌脚

    新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚 ...

  4. 图书-技术-SpringBoot：《Spring Boot 企业级应用开发实战》

    ylbtech-图书-技术-SpringBoot:<Spring Boot 企业级应用开发实战> Spring Boot 企业级应用开发实战,全书围绕如何整合以 Spring Boot 为 ...

  5. 从零一起学Spring Boot之LayIM项目长成记（五）websocket

    前言 距离上一篇已经比较久的时间了,项目也是开了个头.并且,由于网上的关于Spring Boot的websocket讲解也比较多.于是我采用了另外的一个通讯框架 t-io 来实现LayIM中的通讯功能 ...

  6. Spring Boot会员管理系统——处理文件上传

    温馨提示 Spring Boot会员管理系统的中,需要涉及到Spring框架,SpringMVC框架,Hibernate框架,thymeleaf模板引擎.所以,可以学习下这些知识.当然,直接入门的话使 ...

  7. 使用Spring Boot开发Web项目(二)之添加HTTPS支持

    上篇博客使用Spring Boot开发Web项目我们简单介绍了使用如何使用Spring Boot创建一个使用了Thymeleaf模板引擎的Web项目,当然这还远远不够.今天我们再来看看如何给我们的We ...

  8. Spring Boot 多模块项目创建与配置 (一) （转）

    Spring Boot 多模块项目创建与配置 (一) 最近在负责的是一个比较复杂项目,模块很多,代码中的二级模块就有9个,部分二级模块下面还分了多个模块.代码中的多模块是用maven管理的,每个模块都 ...

  9. Maven 搭建spring boot多模块项目（附源码）,亲测可以,感谢原创

    原创地址:https://segmentfault.com/a/1190000005020589 我的DEMO码云地址,持续添加新功能: https://gitee.com/itbase/Spring ...

  10. 从零一起学Spring Boot之LayIM项目长成记（二） LayIM初体验

    前言 接上篇,已经完成了一个SpringBoot项目的基本搭建.那么现在就要考虑要做什么,怎么做的问题.所以本篇内容不多,带大家一起来简单了解一下要做的东西,之前有很多人不知道从哪里下手,那么今天我带 ...

随机推荐

  1. [转帖]CertUtil: -hashfile 失败: 0xd00000bb (-805306181)

    https://www.cnblogs.com/heenhui2016/p/de.html 使用CertUtil验证Python安装文件的时候出现了这个错误. CertUtil: -hashfile ...

  2. [转帖]自动化回归测试工具 —— AREX 上手实践

    https://my.oschina.net/arextest/blog/8589156   AREX 是一款开源的自动化测试工具平台,基于 Java Agent 技术与比对技术,通过流量录制回放能力 ...

  3. [转帖]016 Linux 卧槽，看懂进程信息也不难嘛？top、ps

    016 Linux 卧槽,看懂进程信息也不难嘛?top.pshttps://my.oschina.net/u/3113381/blog/5455267 1 扒开看看 top 命令参数详情 Linux ...

  4. DashBoard in k8s 简单使用

    DashBoard in k8s 简单使用 第一部分 拉取分发镜像 没办法的事情,公司网络实在是太垃圾了, dockerhub 又不让多次docker pull 找一台网络表好的机器 执行如下命令: ...

  5. TienChin 活动管理-修改活动接口

    前端 activity.js 直接替换现有的,最求速度了,后面在详细一个个记录,不在过多解释了. import request from '@/utils/request' /** * 查询活动列表 ...

  6. TienChin 项目改造完善&项目结构分析

    项目改造完善 更改 Banner Banner 生成网站:https://bootschool.net/ascii 更改启动类中的 Banner !> 如果不生效,需要重新编译一下项目工程(出现 ...

  7. go中string是如何实现的呢

    go中string是如何实现的呢 前言 实现 go语言中的string是不可变的 []byte转string string转[]byte 字符串的拼接 +方式进行拼接 fmt 拼接 Join 拼接 b ...

  8. SqlSugar Code First

      注意点 1.SqlSugar Code First可以快速开发,使用起来也要分阶段使用,比如早期随便搞,中后期需要禁用一些功能保证数据安全(标题6和7 ) 2.数据库账号需要有比较高的权限, 3. ...

  9. AiTrust下预训练和小样本学习在中文医疗信息处理挑战榜CBLUE表现

    项目链接: https://aistudio.baidu.com/aistudio/projectdetail/4592515?contributionType=1 如果有图片缺失参考项目链接 0.项 ...

  10. 码云gitee创建仓库并用git上传文件

    相关文章链接: 码云(gitee)配置SSH密钥 码云gitee创建仓库并用git上传文件 git 上传错误This oplation equires one of the flowi vrsions ...