基于Bootstrap和本地存储实现简易的图书管理系统

Bootstrap3 简介

Bootstrap3 是 CSS 的一个库，能够为我们提供多种 CSS 样式模版。

本地存储简介

将数据存储在本地，只要不主动删除，数据就会一直存在。本地存储中的数据是以键值对的形式存在的。

如何实现本地存储？

localStorage.setItem("data", JSON.stringify(localArr)) // data 作为键名
var dataList = localStorage.getItem("data");  //获取本地数据键名为 data 的值

实现过程

如何将本地数据渲染到网页？

将数据按照格式渲染——模版引擎

模版：

  <script type="text/html" id="bookList">
        <!-- 遍历数组中每一个对象的每一个值 -->
         {{each list value}}
    <tr class="success">
        <th>{{value.BookId}}</th>
        <th>{{value.BookName}}</th>
        <th>{{value.Author}}</th>
        <th>{{value.Publisher}}</th>
        <th>{{value.PublicTime}}</th>
        <th>{{value.BookNumber}}</th>
        <th>{{value.BookPrice}}</th>
        <th>{{value.BookType}}</th>
        <th>{{value.INSS}}</th>
    </tr>
    {{/each}}
    </script>

调用形式:

//数据存入本地
        localStorage.setItem("tempData", JSON.stringify(tempArr))
        var tempDataList = localStorage.getItem("tempData")
        tempDataList = JSON.parse(tempDataList)
//此处主要为模版引擎的调用
        var htmlBookList = template('bookList', { list: tempDataList })
        // 渲染html结构
        document.getElementById('searchBookList').innerHTML = htmlBookList// 初始渲染加上新渲染
    } else {

图书添加功能

var navClickItems = document.querySelectorAll(".navClick");
var panelShow = document.querySelectorAll(".panelShow");
var inputItems = document.querySelectorAll("#inputInfo input");
var confirmAdd = document.querySelector("#confirmAdd");
var flag //用于判断数据是否出现空或者重复
var flagData = true
var localArr = []
var idList
var dataList = localStorage.getItem("data");  //获取本地数据的列表
var resultShow = document.querySelector("#resultShow")
dataList = JSON.parse(dataList);  //将本地数据转换为对象
if (dataList !== null) {
    for (const obj of dataList)
        localArr.push(obj) //将本地数据压入本地数组中存储
}

// console.log(dataList[0].BookId); // 打印第一个对象的BookId
// console.log(dataList[1].BookId); // 打印第二个对象的BookId
var data = {
    BookId: '',
    BookName: '',
    Author: '',
    Publisher: '',
    PublicTime: '',
    BookNumber: '',
    BookPrice: '',
    BookType: '',
    INSS: ''
}
// arr.push(data)
// localStorage.setItem('data',JSON.stringify(arr))
//--------------------初始化本地数据---------------------------------------------------------//
// 调用模版引擎
var htmlBookList = template('bookList', { list: dataList })
// 渲染html结构
document.getElementById('bookListBox').innerHTML = htmlBookList
//获取所有的id

// var data=localStorage.getItem('data')
// console.log(data);

// console.log(data);

//------------------实现切换功能-----------------//
function realizeToggle(i) {
    for (var j = 0; j < panelShow.length; j++) {
        panelShow[j].classList.remove("toggle")
    }
    panelShow[i].classList.add("toggle")

}

//--------------获取值并更新到data中-----------//
function changeValue(i, value) {
    switch (i) {
        case 0:
            data.BookId = value;
            break;
        case 1:
            data.BookName = value;
            break;
        case 2:
            data.Author = value;
            break;
        case 3:
            data.Publisher = value;
            break;
        case 4:
            data.PublicTime = value;
            break;
        case 5:
            data.BookNumber = value;
            break;
        case 6:
            data.BookPrice = value;
            break;
        case 7:
            data.BookType = value;
            break;
        case 8:
            data.INSS = value;
            break;
        default:
            break;
    }
}
//------------------空数据检查--------------------//
function emptyCheck() {
    for (let i = 0; i < inputItems.length; i++) {
        changeValue(i, inputItems[i].value)
        if (inputItems[i].value === '') {
            resultShow.classList.remove("changeColor")
            resultShow.innerHTML="请输入完整的数据！"
            flag = false
            break;
        }
    }
}
//----------------重复数据检查-------------------//
function duplicateCheck(BookId) {
    //获取 arr 数组中所有对象的 BookId 属性
    idList = localArr.map(function (obj) {
        return obj.BookId;
    });
    for (let i = 0; i < idList.length; i++) {
        if (idList[i] === BookId) {
            flag = false
            resultShow.classList.remove("changeColor")
            resultShow.innerHTML="数据重复！"
            inputItems[0].value = ""
            break
        }
    }
}

//---------------------实现导航栏切换效果---------------------//
for (let i = 0; i < navClickItems.length; i++) {
    navClickItems[i].addEventListener('click', function () {
        realizeToggle(i);
    })
}

//--------------实现文本输入框中的数据读取------------------//
for (let i = 0; i < inputItems.length; i++) {
    //监听事件实时变化
    inputItems[i].addEventListener("input", function () {
        var value = inputItems[i].value;
        changeValue(i, value);
        // console.log(value);
    })
}

for (let i = 0; i < inputItems.length; i++) {
    if (inputItems[i].value === '') {
        flagData = false
        break
    }
}

if (flagData) {
    document.querySelector("fieldset").disabled = false;
}
//-------------------监听提交按钮--------------------//
confirmAdd.addEventListener('click', function () {
    // console.log(arr);
    flag = true
    //重复数据检查
    emptyCheck()
    //判断重复数据
    duplicateCheck(Object.assign({}, data).BookId)
    if (flag) {
        //更改模态框样式
        resultShow.classList.add("changeColor")
        resultShow.innerHTML="添加成功！"
        var arr = []// 用于将新数据添加到列表中
        // 使用 Object.assign()复制对象,保证是值传递
        arr.push(Object.assign({}, data)); // 将新数据压入数组
        localStorage.setItem("dataAdd", JSON.stringify(arr))// 将新压入的数据添加到本地
        localArr.push(Object.assign({}, data))//数据压入本地数组
        //获取数组中的对象
        localStorage.setItem("data", JSON.stringify(localArr))// 将新压入的数据添加到本地
        // console.log(Object.assign({}, data));
        //将符合要求的数据存入本地
        // duplicateCheck(inputItems[0].value)
        // console.log(inputItems[0].value);
        dataList = localStorage.getItem("dataAdd");// 获取待渲染数据
        dataList = JSON.parse(dataList)  //转换为对象
        // 调用模版引擎
        htmlBookList = template('bookList', { list: dataList })
        // 渲染html结构
        document.getElementById('bookListBox').innerHTML += htmlBookList// 初始渲染加上新渲染
        localStorage.setItem("data", JSON.stringify(localArr))//将数据总和压入本地
        // 将所有的输入框清空
        for(var i=0;i<inputItems.length;i++){
            inputItems[i].value = ""
        }
    }
})

图书修改功能

// 获取所有的下拉元素
var selectList = document.querySelectorAll("option")
// 获取修改元素列表
var modifyList = document.querySelectorAll(".modify")
// 获取选择框元素  
var selectElement = document.getElementById("input");
// 获取修改按钮对象  
var confirmModify = document.getElementById("confirmModify");
// 定义变量监测下拉序列的变化
var selectIndex
var resultShow = document.querySelector("#resultShow")
//--------------监听选择框的change事件----------------//  
selectElement.addEventListener("change", function () {
    // 获取当前对象的序列号
    var index = this.selectedIndex;
    selectIndex = this.selectedIndex;
    // console.log(selectIndex);
    for (let i = 0; i < selectElement.length; i++) {
        // 移除所有的输入框
        modifyList[i].classList.remove("modifyToggle")
    }
    // 显示当前的所选择的输入框
    modifyList[index].classList.add("modifyToggle")
    // // 获取当前所选择的对象  
    // var selectedOption = this.options[index];
});
//--------------监听修改按钮的提交事件---------------//
// console.log(confirmModify);
confirmModify.addEventListener("click", function () {
    //获取最新的本地数据的列表
    var LocalArr = JSON.parse(localStorage.getItem("data"));
    //获取最新 LocalArr 数组中所有对象的 BookId 属性
    idList = localArr.map(function (obj) {
        return obj.BookId;
    });
    // 修改内容文本框的对象
    var inputItems = document.querySelectorAll(".modList");
    // 图书编号文本框的对象
    var inputId = document.getElementById("modBookId");
    // 判断当前图书编号是否为空
    if (inputId.value === ""){
        resultShow.classList.remove("changeColor")
         resultShow.innerHTML="图书编号不能为空！"
    }
       
    // 判断当前图书编号是否存在于本地存储数据中
    if (!idList.includes(inputId.value)) {
        resultShow.classList.remove("changeColor")
        // alert("当前图书不存在，请重新输入！")
        resultShow.innerHTML="当前图书不存在，请重新输入！"
        inputId.value = ""
    }
    // 判断修改内容文本框是否为空
    if (selectIndex === undefined && inputItems[0].value === "") {
        resultShow.classList.remove("changeColor")
        // console.log(inputItems[0].value);
        // alert("数据不能为空")
        resultShow.innerHTML="数据不能为空！"
    }
    else if (selectIndex !== undefined && inputItems[selectIndex].value === "") {
        resultShow.classList.remove("changeColor")
        // console.log(selectIndex);
        // console.log(inputItems[selectIndex].value);
        // alert("数据不能为空")
        resultShow.innerHTML="数据不能为空！"
    } else {
        // 根据输入的id值修改目标值
        // 获取要查找的id
        var BookId = inputId.value;
        // 获取要查找的对象
        var obj = LocalArr.filter(function (obj) {
            return obj.BookId === BookId
        })
        // console.log(obj);
        var keys = Object.keys(obj[0]);// 获取所有的键
        // console.log(keys);
        // console.log(keys[0]);
        // console.log("序列号为:"+selectIndex);
        // console.log(obj[0][keys[selectIndex]]);
        //修改目标值
        // console.log(obj[0][keys[0]]);
        // console.log(selectIndex);
        if (selectIndex === undefined && inputItems[0].value !== "") {
            obj[0][keys[1]] = inputItems[0].value;
            resultShow.classList.add("changeColor")
            resultShow.innerHTML="修改成功！"
            // console.log("修改成功");
            // console.log(LocalArr);
        } else {
            obj[0][keys[selectIndex + 1]] = inputItems[selectIndex].value;
            resultShow.classList.add("changeColor")
            resultShow.innerHTML="修改成功！"
            // console.log("修改成功");
            // console.log(LocalArr);
        }
    }
    //修改成功后,重新进行渲染
    // console.log(LocalArr);
    localStorage.setItem("data", JSON.stringify(LocalArr))
    dataList = localStorage.getItem("data");// 获取待渲染数据
    dataList = JSON.parse(dataList)  //转换为对象
    // 调用模版引擎
    htmlBookList = template('bookList', { list: dataList })
    // 渲染html结构
    document.getElementById('bookListBox').innerHTML = htmlBookList// 初始渲染加上新渲染
})

图书删除功能

//------------------删除------------------//
var confirmDelBookName = document.getElementById("confirmDelBookName")
var confirmDelAuthor = document.getElementById("confirmDelAuthor")
var resultShow = document.querySelector("#resultShow")
// console.log(authorList);
//--------------监听删除按钮------------------//
confirmDelBookName.addEventListener("click", function () {
    //获取最新的本地数据的列表
    var LocalArr = JSON.parse(localStorage.getItem("data"));
    // console.log("按书名删除时的本地数据:" + LocalArr);
    // 获取最新的本地数据中所有的 BookName 属性
    bookNameList = localArr.map(function (obj) {
        return obj.BookName;
    });
    var inputText = document.querySelector("#delBookName").value;
    if (inputText === "") {
        resultShow.classList.remove("changeColor")
        resultShow.innerHTML = "书籍名称不能为空！"
    }
    // console.log(inputText.value);  
    // console.log(bookNameList);  
    var obj = LocalArr.filter(function (obj) {
        return obj.BookName === inputText
    });
    if (obj.length > 0) {
        LocalArr = LocalArr.filter(function (obj) {
            return obj.BookName !== inputText
        });
        resultShow.classList.add("changeColor")
        resultShow.innerHTML = "删除成功！"
        // 删除成功后重新渲染页面
        localStorage.setItem("data", JSON.stringify(LocalArr))
        dataList = localStorage.getItem("data");// 获取待渲染数据
        dataList = JSON.parse(dataList)  //转换为对象
        // 调用模版引擎
        htmlBookList = template('bookList', { list: dataList })
        // 渲染html结构
        document.getElementById('bookListBox').innerHTML = htmlBookList// 初始渲染加上新渲染

    } else if (inputText !== "") {
        resultShow.classList.remove("changeColor")
        resultShow.innerHTML = '目标书籍不存在！'
    }
    // console.log(LocalArr);
})
confirmDelAuthor.addEventListener("click", function () {
    //获取最新的本地数据的列表
    var LocalArr = JSON.parse(localStorage.getItem("data"));
    // console.log("按作者名删除时的本地数据:" + LocalArr);
    // 获取最新的本地数据中所有的 Author 属性
    authorList = localArr.map(function (obj) {
        return obj.Author;
    });
    var inputText = document.querySelector("#delAuthor").value;
    var obj = LocalArr.filter(function (obj) {
        return obj.Author === inputText
    });
    if (inputText === ""){
        resultShow.classList.remove("changeColor")
         resultShow.innerHTML = "作者名字不能为空！"
    }
       
    if (obj.length > 0) {
        LocalArr = LocalArr.filter(function (obj) {
            return obj.Author !== inputText
        });
        resultShow.classList.add("changeColor")
        resultShow.innerHTML = "删除成功！"
        // 删除成功后重新渲染页面
        localStorage.setItem("data", JSON.stringify(LocalArr))
        dataList = localStorage.getItem("data");// 获取待渲染数据
        dataList = JSON.parse(dataList)  //转换为对象
        // 调用模版引擎
        htmlBookList = template('bookList', { list: dataList })
        // 渲染html结构
        document.getElementById('bookListBox').innerHTML = htmlBookList// 初始渲染加上新渲染

    } else if (inputText !== "") {
        resultShow.classList.remove("changeColor")
        resultShow.innerHTML = "目标书籍不存在！"
    }
    // console.log(LocalArr);
})

图书查找功能

//----------------查找功能----------------------//
var confirmSearchBookName = document.querySelector("#confirmSearchBookName")
var confirmSearchAuthor = document.querySelector("#confirmSearchAuthor")
var searchResult = document.querySelector("#showSearchInf")
var resultShow = document.querySelector("#resultShow")
confirmSearchBookName.addEventListener("click", function () {
    //获取最新的本地数据的列表
    var LocalArr = JSON.parse(localStorage.getItem("data"));
    // console.log("按书名查找时的本地数据:" + localArr);
    // 获取最新的本地数据中所有的 BookName 属性
    bookNameList = localArr.map(function (obj) {
        return obj.BookName;
    });
    // console.log(bookNameList);
    // 获取当前需要查询的书名
    var searchBookName = document.querySelector("#secBookName").value;
    // 将书名与本地数据进行对比
    if (bookNameList.includes(searchBookName)) {

        // console.log("存在这本书");
        // 获取所查询书名的对象
        var obj = LocalArr.filter(function (obj) {
            return obj.BookName === searchBookName
        });
        // console.log(obj);
        // console.log(obj.length);
        searchResult.classList.remove("showSearchInf")
        //将查询数据渲染到指定区域
        var tempArr = [];
        for (var i = 0; i < obj.length; i++) {
            tempArr.push(obj[i])
        }
        // console.log(tempArr);
        //数据存入本地
        localStorage.setItem("tempData", JSON.stringify(tempArr))
        var tempDataList = localStorage.getItem("tempData")
        tempDataList = JSON.parse(tempDataList)
        var htmlBookList = template('bookList', { list: tempDataList })
        // 渲染html结构
        document.getElementById('searchBookList').innerHTML = htmlBookList// 初始渲染加上新渲染
        // console.log(obj);
        // console.log(obj.length);
        // 遍历输出对象的信息
        // for (var i = 0; i < obj.length; i++) {
        //     for (let key in obj[i]) {
        //         console.log(key + ":" + obj[i][key]);
        //     }
        // }
        resultShow.classList.add("changeColor")
        resultShow.innerHTML = "查询成功！"
    } else {
        resultShow.classList.remove("changeColor")
        resultShow.innerHTML = "不存在这本书！"
        searchResult.classList.add("showSearchInf")
    }
})
confirmSearchAuthor.addEventListener("click", function () {
    //获取最新的本地数据的列表
    var LocalArr = JSON.parse(localStorage.getItem("data"));
    // console.log("按作者名查找时的本地数据:" + localArr);
    // 获取最新的本地数据中所有的 Author 属性
    authorList = localArr.map(function (obj) {
        return obj.Author;
    });
    // console.log("authorList" + authorList);
    // 获取当前需要查询的作者名
    var searchAuthor = document.querySelector("#secAuthor").value;
    // 将作者名与本地数据进行对比
    if (authorList.includes(searchAuthor)) {
        resultShow.classList.add("changeColor")
        resultShow.innerHTML = "查询成功！"
        // console.log("存在这本书");
        // 获取所查询作者名的对象
        var obj = LocalArr.filter(function (obj) {
            return obj.Author === searchAuthor
        });
        searchResult.classList.remove("showSearchInf")
        //将查询数据渲染到指定区域
        var tempArr = [];
        for (var i = 0; i < obj.length; i++) {
            tempArr.push(obj[i])
        }
        // console.log(tempArr);
        //数据存入本地
        localStorage.setItem("tempData", JSON.stringify(tempArr))
        var tempDataList = localStorage.getItem("tempData")
        tempDataList = JSON.parse(tempDataList)
        var htmlBookList = template('bookList', { list: tempDataList })
        // 渲染html结构
        document.getElementById('searchBookList').innerHTML = htmlBookList// 初始渲染加上新渲染
    } else {
        resultShow.classList.remove("changeColor")
        resultShow.innerHTML = "不存在这本书！"
        searchResult.classList.add("showSearchInf")
    }
})

图书页面结构

<!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="lib/CSS/bootstrap.css">
    <link rel="stylesheet" href="lib/CSS/css.css">
    <script src="lib/JS/jquery.js"></script>
    <script src="lib/JS/bootstrap.js"></script>
    <script src="lib/JS/template-web.js"></script>
</head>

<body style="padding: 20px;letter-spacing: 1px;">

    <!-- 导航栏设置 -->
    <nav class="navbar navbar-default navbar-static-top" role="navigation">
        <a class="navbar-brand" href="#" style="color: #337ab7;font-weight: 600;letter-spacing: 2px;">图书管理系统</a>
        <ul class="nav nav-pills">
            <!-- 添加操作 -->
            <li role="presentation"><a href="#" class="navbar-brand navClick" id="navBtnAdd">添加</a></li>
            <!-- 修改操作 -->
            <li role="presentation"><a href="#" class="navbar-brand navClick" id="navBtnMod">修改</a></li>
            <!-- 删除操作 -->
            <li role="presentation" class="dropdown">
                <a class="dropdown-toggle navbar-brand" data-toggle="dropdown" href="#" role="button"
                    aria-haspopup="true" aria-expanded="false">
                    删除<span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#" id="navBtnDelBook" class="navClick">按书籍名称</a></li>
                    <li><a href="#" id="navBtnDelAuthor" class="navClick">按作者名字</a></li>
                </ul>
            </li>
            <!-- 查询操作 -->
            <li role="presentation" class="dropdown">
                <a class="dropdown-toggle navbar-brand" data-toggle="dropdown" href="#" role="button"
                    aria-haspopup="true" aria-expanded="false">
                    查询<span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#" id="navBtnSearchBook" class="navClick">按书籍名称</a></li>
                    <li><a href="#" id="navBtnSearchAuthor" class="navClick">按作者名字</a></li>
                </ul>
            </li>

        </ul>
    </nav>
    <!-- 面板设置 -->
    <div style="display: flex;">
        <!-- 左侧操作面板 -->
        <div>
            <!-- 添加面板 -->
            <div class="panel panel-primary panelShow toggle">
                <div class="panel-heading">
                    <h3 class="panel-title">添加操作</h3>
                </div>
                <div class="panel-body" id="inputInfo">
                    <div class="input-group">
                        <div class="input-group-addon addStyle"><span>*</span>图书编号</div>
                        <input type="text" autocomplete="off" class="form-control" id="bscBookId" placeholder="请输入图书编号">
                    </div>
                    <div class="input-group">
                        <div class="input-group-addon addStyle"><span>*</span>书籍名称</div>
                        <input type="text" autocomplete="off" class="form-control" id="bscBookName"
                            placeholder="请输入书籍名称">
                    </div>
                    <div class="input-group">
                        <div class="input-group-addon addStyle"><span>*</span>作者名字</div>
                        <input type="text" autocomplete="off" class="form-control" id="bscAuthor" placeholder="请输入作者名字">
                    </div>
                    <div class="input-group">
                        <div class="input-group-addon addStyle"><span>*</span>出版单位</div>
                        <input type="text" autocomplete="off" class="form-control" id="bscPublisher"
                            placeholder="请输入出版单位">
                    </div>
                    <div class="input-group">
                        <div class="input-group-addon addStyle"><span>*</span>出版时间</div>
                        <input type="text" autocomplete="off" class="form-control" id="bscPublicTime"
                            placeholder="请输入出版时间">
                    </div>
                    <div class="input-group">
                        <div class="input-group-addon addStyle"><span>*</span>书本数量</div>
                        <input type="text" autocomplete="off" class="form-control" id="bscBookNumber"
                            placeholder="请输入书本数量">
                    </div>
                    <div class="input-group">
                        <div class="input-group-addon addStyle"><span>*</span>书本价格</div>
                        <input type="text" autocomplete="off" class="form-control" id="bscBookPrice"
                            placeholder="请输入书本价格">
                    </div>
                    <div class="input-group">
                        <div class="input-group-addon addStyle"><span>*</span>书籍类型</div>
                        <input type="text" autocomplete="off" class="form-control" id="bscBookType"
                            placeholder="请输入书籍类型">
                    </div>
                    <div class="input-group">
                        <div class="input-group-addon addStyle"><span>*</span>书籍刊号</div>
                        <input type="text" autocomplete="off" class="form-control" id="bscINSS" placeholder="请输入书籍刊号">
                    </div>
                    <fieldset>
                        <button id="confirmAdd" class="btn btn-primary" data-toggle="modal"
                            data-target="#myModal">确认添加</button>
                    </fieldset>
                </div>
            </div>
            <!-- 修改面板 -->
            <div class="panel panel-primary panelShow">
                <div class="panel-heading">
                    <h3 class="panel-title">修改操作</h3>
                </div>
                <div class="panel-body">
                    <div class="input-group">
                        <div class="input-group-addon addStyle"><span>*</span>图书编号</div>
                        <input type="text" autocomplete="off" class="form-control" id="modBookId"
                            placeholder="请输入修改书籍的编号">
                    </div>
                    <div class="input-group">
                        <div class="input-group-addon addStyle"><span>*</span>修改选项</div>
                        <select name="" id="input" class="form-control" required="required">
                            <option value="">书籍名称</option>
                            <option value="">作者名字</option>
                            <option value="">出版单位</option>
                            <option value="">出版时间</option>
                            <option value="">书本数量</option>
                            <option value="">书本价格</option>
                            <option value="">书籍类型</option>
                            <option value="">书籍刊号</option>
                        </select>
                    </div>
                    <div class="input-group modify modifyToggle">
                        <div class="input-group-addon addStyle"><span>*</span>书籍名称</div>
                        <input type="text" autocomplete="off" class="form-control modList" id="modBookName"
                            placeholder="请输入书籍名称">
                    </div>
                    <div class="input-group modify">
                        <div class="input-group-addon addStyle"><span>*</span>作者名字</div>
                        <input type="text" autocomplete="off" class="form-control modList" id="modAuthor"
                            placeholder="请输入作者名字">
                    </div>
                    <div class="input-group modify">
                        <div class="input-group-addon addStyle"><span>*</span>出版单位</div>
                        <input type="text" autocomplete="off" class="form-control modList" id="modPublisher"
                            placeholder="请输入出版单位">
                    </div>
                    <div class="input-group modify">
                        <div class="input-group-addon addStyle"><span>*</span>出版时间</div>
                        <input type="text" autocomplete="off" class="form-control modList" id="modPublicTime"
                            placeholder="请输入出版时间">
                    </div>
                    <div class="input-group modify">
                        <div class="input-group-addon addStyle"><span>*</span>书本数量</div>
                        <input type="text" autocomplete="off" class="form-control modList" id="modBookNumber"
                            placeholder="请输入书本数量">
                    </div>
                    <div class="input-group modify">
                        <div class="input-group-addon addStyle"><span>*</span>书籍类型</div>
                        <input type="text" autocomplete="off" class="form-control modList" id="modBookType"
                            placeholder="请输入书籍类型">
                    </div>
                    <div class="input-group modify">
                        <div class="input-group-addon addStyle"><span>*</span>书本价格</div>
                        <input type="text" autocomplete="off" class="form-control modList" id="modBookPrice"
                            placeholder="请输入书本价格">
                    </div>
                    <div class="input-group modify">
                        <div class="input-group-addon addStyle"><span>*</span>书籍刊号</div>
                        <input type="text" autocomplete="off" class="form-control modList" id="modINSS"
                            placeholder="请输入书籍刊号">
                    </div>

                    <button id="confirmModify" class="btn btn-primary" data-toggle="modal"
                        data-target="#myModal">确认修改</button>
                </div>
            </div>
            <!-- 删除面板 -->
            <!-- 按书籍名称 -->
            <div class="panel panel-primary panelShow">
                <div class="panel-heading">
                    <h3 class="panel-title">删除操作/按书籍名称</h3>
                </div>
                <div class="panel-body">
                    <div class="input-group">
                        <div class="input-group-addon addStyle"><span>*</span>书籍名称</div>
                        <input type="text" autocomplete="off" class="form-control" id="delBookName"
                            placeholder="请输入书籍名称">
                    </div>
                    <button id="confirmDelBookName" class="btn btn-primary" data-toggle="modal"
                        data-target="#myModal">确认删除</button>
                </div>
            </div>
            <!-- 按作者名字 -->
            <div class="panel panel-primary panelShow">
                <div class="panel-heading">
                    <h3 class="panel-title">删除操作/按作者名称</h3>
                </div>
                <div class="panel-body">
                    <div class="input-group">
                        <div class="input-group-addon addStyle"><span>*</span>作者名字</div>
                        <input type="text" autocomplete="off" class="form-control" id="delAuthor" placeholder="请输入作者名字">
                    </div>
                    <button id="confirmDelAuthor" class="btn btn-primary" data-toggle="modal"
                        data-target="#myModal">确认删除</button>
                </div>
            </div>
            <!-- 查询面板 -->
            <!-- 按书籍名称 -->
            <div class="panel panel-primary panelShow">
                <div class="panel-heading">
                    <h3 class="panel-title">查询操作/按书籍名称</h3>
                </div>
                <div class="panel-body">
                    <div class="input-group">
                        <div class="input-group-addon addStyle"><span>*</span>书籍名称</div>
                        <input type="text" autocomplete="off" class="form-control" id="secBookName"
                            placeholder="请输入书籍名称">
                    </div>
                    <button id="confirmSearchBookName" class="btn btn-primary" data-toggle="modal"
                        data-target="#myModal">确认查询</button>
                </div>
            </div>
            <!-- 按作者名字 -->
            <div class="panel panel-primary panelShow">
                <div class="panel-heading">
                    <h3 class="panel-title">查询操作/按作者名称</h3>
                </div>
                <div class="panel-body">
                    <div class="input-group">
                        <div class="input-group-addon addStyle"><span>*</span>作者名字</div>
                        <input type="text" autocomplete="off" class="form-control" id="secAuthor" placeholder="请输入作者名字">
                    </div>
                    <button id="confirmSearchAuthor" class="btn btn-primary" data-toggle="modal"
                        data-target="#myModal">确认查询</button>
                </div>
            </div>
        </div>
        <!-- 右侧显示面板 -->
        <div class="showInf">
            <div class="panel-primary panel">
                <div class="panel-heading">
                    <h3 class="panel-title">图书列表</h3>
                </div>
                <div class="panel-body">
                    <ul style="padding: 0;">
                        <table class="table table-hover">
                            <tr class="active">
                                <thead>
                                    <tr class="active">
                                        <th>图书编号</th>
                                        <th>书籍名称</th>
                                        <th>作者名字</th>
                                        <th>出版单位</th>
                                        <th>出版时间</th>
                                        <th>书本数量</th>
                                        <th>书本价格</th>
                                        <th>书籍类型</th>
                                        <th>书籍刊号</th>
                                    </tr>

                                </thead>
                                <tbody id="bookListBox">

                                </tbody>
                            </tr>
                        </table>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 信息展示区域 -->
    <div class="showInf showSearchInf" id="showSearchInf" style="margin: 10px 0 0 0 ;">
        <div class="panel-primary panel">
            <div class="panel-heading">
                <h3 class="panel-title" style="display: inline-block;">查询结果</h3>
                <span class="close" style="float: right;">
                    <svg t="1699947031573" class="icon" viewBox="0 0 1035 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="4627" width="16" height="16">
                        <path
                            d="M961.799386 1018.342541c-16.972376 0-28.287293-5.657459-39.60221-16.972375L514.86016 594.033149l-412.994476 412.994475c-22.629834 22.629834-62.232044 22.629834-84.861878 0s-22.629834-62.232044 0-84.861878L429.998281 509.171271 28.318723 96.176796C5.688889 79.20442 5.688889 39.60221 28.318723 16.972376s62.232044-22.629834 84.861879 0L514.86016 424.309392 927.854635 11.314917c22.629834-22.629834 62.232044-22.629834 84.861878 0s22.629834 62.232044 0 84.861879L599.722038 509.171271l412.994475 412.994475c22.629834 22.629834 22.629834 62.232044 0 84.861878-22.629834 0-33.944751 11.314917-50.917127 11.314917z"
                            fill="#fff" p-id="4628"></path>
                    </svg>
                </span>

            </div>
            <div class="panel-body">
                <ul style="padding: 0;">
                    <table class="table table-hover">
                        <tr class="active">
                            <thead>
                                <tr class="active">
                                    <th>图书编号</th>
                                    <th>书籍名称</th>
                                    <th>作者名字</th>
                                    <th>出版单位</th>
                                    <th>出版时间</th>
                                    <th>书本数量</th>
                                    <th>书本价格</th>
                                    <th>书籍类型</th>
                                    <th>书籍刊号</th>
                                </tr>

                            </thead>
                            <tbody id="searchBookList">

                            </tbody>
                        </tr>
                    </table>
                </ul>
            </div>
        </div>
    </div>
    <!-- 模态框区域 -->
    <div class="container">
        <!-- 模态 -->
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
                <!-- 模态内容-->
                <div class="modal-content panel-primary panel" style="border-radius: 12px;">
                    <div class="modal-header panel-heading" style="border-radius: 10px 10px 0 0;">
                        <button type="button" class="close" data-dismiss="modal" style="transition: transform 1s;">
                            <svg t="1699947031573" class="icon" viewBox="0 0 1035 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="4627" width="16" height="16">
                                <path
                                    d="M961.799386 1018.342541c-16.972376 0-28.287293-5.657459-39.60221-16.972375L514.86016 594.033149l-412.994476 412.994475c-22.629834 22.629834-62.232044 22.629834-84.861878 0s-22.629834-62.232044 0-84.861878L429.998281 509.171271 28.318723 96.176796C5.688889 79.20442 5.688889 39.60221 28.318723 16.972376s62.232044-22.629834 84.861879 0L514.86016 424.309392 927.854635 11.314917c22.629834-22.629834 62.232044-22.629834 84.861878 0s22.629834 62.232044 0 84.861879L599.722038 509.171271l412.994475 412.994475c22.629834 22.629834 22.629834 62.232044 0 84.861878-22.629834 0-33.944751 11.314917-50.917127 11.314917z"
                                    fill="#fff" p-id="4628"></path>
                            </svg>
                        </button>
                        <h4 class="modal-title">结果</h4>
                    </div>
                    <div class="modal-body">
                        <p id="resultShow">失败</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/html" id="bookList">
        <!-- 遍历数组中每一个对象的每一个值 -->
         {{each list value}}
    <tr class="success">
        <th>{{value.BookId}}</th>
        <th>{{value.BookName}}</th>
        <th>{{value.Author}}</th>
        <th>{{value.Publisher}}</th>
        <th>{{value.PublicTime}}</th>
        <th>{{value.BookNumber}}</th>
        <th>{{value.BookPrice}}</th>
        <th>{{value.BookType}}</th>
        <th>{{value.INSS}}</th>
    </tr>
    {{/each}}
    </script>
    <script src="lib/JS/add.js"></script>
    <script src="lib/JS/modify.js"></script>
    <script src="lib/JS/delete.js"></script>
    <script src="lib/JS/search.js"></script>
</body>

</html>

最终实现效果

图书管理系统