图书管理系统：增删查操作与前端实现-CSDN博客

一、题目要求

完成图书数据的增，删，查

二、效果

三、代码

css

        .btn-primary {
            height: 35px;
            background-color: #337ab7;
            }

        .panel-body .mb-3 {
            margin-bottom: 0 !important;
            }

        .form-control {
            height: 34px;

            }

        body {
            padding: 15px;
            font-size: 14px;
            }
        .form-control,
        .input-group-text,
        .btn-primary {
            padding: 6px 12px;
            font-size: 14px;
            }
        .panel-body {
            display: flex;
            }
        .form-control {
            margin-right: 5px;
            }
        .input-group {
            width: 267px;
            }
       tr{
            display: flex;
            }
       th:nth-child(1),td:nth-child(1){
         flex:1;
         }
       th:nth-child(2) ,td:nth-child(2){
         flex:2;
         }
       th:nth-child(3),td:nth-child(3){
         flex:1.5;
         }
       th:nth-child(4),td:nth-child(4){
         flex:3;
         }
       th:nth-child(5),td:nth-child(5){
            flex:1;
            }

html

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!--bootstrap3-->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><!--导入本地文件未生效，直接在线引入-->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!--bootstrap4-->
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加新图书</h3>
        </div>
        <div class="panel-body  ">
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">书名</span>
                </div>
                <input class="form-control bookname" placeholder="请输入书名" type="text">
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">作者</span>
                </div>
                <input class="form-control author" placeholder="请输入作者" type="text">
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">出版社</span>
                </div>
                <input class="form-control publisher" placeholder="请输入出版社" type="text">
            </div>
            <button class="btn btn-primary" type="button">添加</button>
        </div>
    </div>
    <!--表格-->
    <table class="table table-bordered table-hover">
        <thead>
        <tr>
            <th>id</th>
            <th>书名</th>
            <th>作者</th>
            <th>出版社</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tb">

        </tbody>
    </table>

      // 把获取图书列表封装为函数，有更新时就调用
      function getBooklist() {
        // 获取图书列表
        $.ajax({
          type:'GET',
          url:'http://www.liulongbin.top:3006/api/getbooks',
          success:function(res){
            if(res.status!==200){/*去看接口文档，成功的状态码是多少*/
            return   alert('获取数据失败了')
            }
            let rows= [];
            // 循环图书信息，循环一次，生成一个tr行
           $.each(res.data,(i,item)=>{
             rows.push(`<tr><td>${item.id}</td><td>${item.bookname}</td><td>${item.author}</td><td>${item.publisher}</td><td><a href="javascript:;" class="del" data-id=${item.id}>删除</a></td></tr>`)/*把每一行结构追加近数组，当做一个字符串元素*/
           })
            $('#tb').empty().append(rows.join(''));/*清空，转为字符串添加到tbody标签内*/
          }
        })
      }
      // 一点开页面就调用
      getBooklist();

      // 点击添加按钮事件
      $('.btn').on('click',function() {
        let bookname = $('.bookname').val(), /*val()方法获取表单value*/
            author = $('.bookname').val(),
            publisher = $('.publisher').val();
    if(bookname!==''&&author!==''&&publisher!==''){/*三个信息栏不为空*/
    $.ajax({
      type: 'POST',
      url:'http://www.liulongbin.top:3006/api/addbook',
      data:{
        bookname:bookname.trim(),/*trim方法去除字符串两端空格*/
        author:author.trim(),
        publisher:publisher.trim()
      },
      success:function(res) {
        getBooklist();/*获取列表*/
        bookname='';
        author='';
        publisher='';/*清空表单*/
        if(res.status!==201){/*状态码不是200，提示格式错误*/
          alert(res.msg)
        }
      }
    })
    }
    else{/*信息没有填完整*/
      alert('图书信息未填完整！')
    }
      })

      //点击删除，就拿到当行的id
      $('tbody').on('click','.del',function() {/*以事件代理来为动态创建的元素绑定事件*/
        let id = $(this).attr('data-id');/*获取自定义属性的值*/
        $.ajax({
          type:'GET',
          url:'http://www.liulongbin.top:3006/api/delbook',/*删除数据的接口*/
          data:{id:id},/*指定要删除的id*/
          success:function(res) {
            if(res.status!==200){/*状态码不是200（说明不成功）*/
             return  alert('未删除成功')
            }
            getBooklist();/*更新列表*/
          }
        })
      })