图书管理系统（案例）

Han_Zhou_Z

已于 2022-03-05 11:33:50 修改

阅读量780

点赞数 2

文章标签： css html

于 2022-03-03 21:28:45 首次发布

本文链接：https://blog.csdn.net/han_zhou_z/article/details/123263956

版权

本文介绍了使用HTML和CSS技术构建一个图书管理系统的实践过程，详细讲解了如何通过HTML进行页面布局，以及如何利用CSS进行样式设计，实现系统的美观与易用性。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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/bootstrap-dialog.min.css">
    <link rel="stylesheet" href="../css/bootstrap-table.min.css">
    <link rel="stylesheet" href="../css/toastr.min.css">

    <script src="../js/jquery-3.4.1.js"></script>
    <script src="../js//bootstrap.min.js"></script>
    <script src="../js/bootstrap-dialog.min.js"></script>
    <script src="../js/bootstrap-table.min.js"></script>
    <script src="../js/bootstrap-table-zh-CN.js"></script>
    <script src="../js/toastr.min.js"></script>
</head>
<body>
    <button id="btn_add" class="btn btn-info" style="margin-top: 25px; margin-left: 5px;">增加图书</button>
    <button id="btn_batch" class="btn btn-danger" style="margin-top: 25px; margin-left: 5px;">批量删除</button>
    <table id="book" style="margin-top: 10px;"></table>

    <script>
        toastr.options = {
                positionClass: "toast-top-center", //显示的位置
                timeOut: "2000" //持续的时间
            }
        $(function(){
            $('#book').bootstrapTable({
                url: 'http://localhost:8089/bookapi/books', //服务器URL
                method: 'get', //请求方式,
                dataType: 'json', //响应数据的类型
                striped: true, //数据隔行变色
                sidePagination: "client",//分页方式：client客户端分页，server服务端分页
                pagination: true, // 是否显示分页工具栏
                pageList:[5,10,15,20,25], //每页显示的记录数列表
                pageSize: "5", //默认每页显示的记录数
                paginationPreText: "上一页",
                paginationNextText: "下一页",
                clickToSelect: true,//是否启用点击选中行
                uniqueId: "id",//每一行的唯一标识，一般为主键列
                columns: [ //表格的列
                     {
                         checkbox: true, //复选框列
                         align: 'center', //水平对齐方式
                         valign: 'middle' //垂直对齐方式
                     },
                     {
                         field: 'id', //服务器响应数据的key(和模型的属性名相同)
                         title: '编号',//表格中显示的列名
                         width: 30,
                         align: 'center', //水平对齐方式
                         valign: 'middle' //垂直对齐方式
                     },
                     {
                         field:'isbn',
                         title: 'ISBN',
                         width: 50,
                         align: 'center', //水平对齐方式
                         valign: 'middle' //垂直对齐方式
                     },
                     {
                         field:'bookName',
                         title: '图书名称',
                         width: 150,
                         align: 'center', //水平对齐方式
                         valign: 'middle' //垂直对齐方式
                     },
                     {
                         field:'author',
                         title: '作者',
                         width: 120,
                         align: 'center', //水平对齐方式
                         valign: 'middle' //垂直对齐方式
                     },
                     {
                         field:'press',
                         title: '出版社',
                         width: 80,
                         align: 'center', //水平对齐方式
                         valign: 'middle' //垂直对齐方式
                     },
                     {
                         field:'price',
                         title: '单价',
                         width: 30,
                         align: 'center', //水平对齐方式
                         valign: 'middle' //垂直对齐方式
                     },
                     {
                         field:'pubDate',