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">&#xe656;</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.檢索圖書

導航：

pre：10.借還統計

next：

1.項目源碼

2.頁面設計

2.1 index.html

2.2 bookDetail.html

需要源碼的朋友留下郵箱：）

EXCEL中下拉菜單中添加新選項或者刪除選項

京東科技數字化營銷能力的演進與最佳實踐| 京東雲技術團隊

Python 爬蟲：Spring Boot 反爬蟲的成功案例

Java中止線程的方式

[轉帖]Oracle Exadata 學習筆記之核心特性Part1

《最新出爐》系列入門篇-Python+Playwright自動化測試-43-分頁測試

HTTP協議相關文檔

Java實現文件下載斷點續傳（一）

shell腳本實現進度條程序

Fiddler捕獲Java發送的HttpURLConnection請求

nodejs+express4實現文件上傳下載刪除和列表展示功能

Spring Boot圖書管理系統項目實戰-3.用戶登錄

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結