‘老生常谈’ - 图书管理系统

最新推荐文章于 2024-10-01 16:34:30 发布

象更

最新推荐文章于 2024-10-01 16:34:30 发布

阅读量228

点赞数 5

文章标签：前端 javascript 开发语言 ajax

本文链接：https://blog.csdn.net/m0_74227060/article/details/136571157

版权

本文介绍了在软件开发中，如何使用axios进行数据的增删改查操作，包括从服务器获取数据、表单提交、界面渲染，以及删除和编辑功能的实现，涉及到了事件委托和HTTP方法的使用。

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

在软件开发中，增、删、改、查这几个业务非常常见

增

基于axios从服务器拿到需要数据，进行渲染、封装，新增数据并不是一条一条渲染，而是整体重新渲染；

对于该系统新增数据：收集表单数据、提交服务器保存 ->重新获取列表

删

对于删除数据，事件委托，请求服务器删除数据，重新渲染界面

获取id ->调用删除接口->重新渲染

改

调用删除接口，需要id信息，但不能更改（最好隐藏）；收集修改信息，提交给接口

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="shortcut icon" href="https://www.bilibili.com/favicon.ico">
  <link rel="stylesheet" href="../bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">

  <style>
    @font-face {
      font-family: 'icomoon';
      src: url('fonts/icomoon.eot?au9n7q');
      src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?au9n7q') format('truetype'),
        url('fonts/icomoon.woff?au9n7q') format('woff'),
        url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
      font-display: block;
    }

    thead {
      background-color: rgba(119, 119, 119, 0.746);
      color: #fff;
    }

    .box {
      width: 900px;
      margin: 50px auto;
      position: relative;
    }

    .btn1 {
      width: 50px;
      height: 20px;
      background-color: #2d4acd;
      color: #fff;
      position: absolute;
      right: 0px;
      padding: 0;
      font-size: 10px;
      line-height: 8px;
      top: 9px;
    }

    .del {
      color: red;
    }

    .edit {
      color: rgb(11, 196, 196);
    }

    .del,
    .edit {
      cursor: pointer;
    }

    .form-control {
      width: 80%;
    }

    .box1 {
      margin: 12px;
      margin-right: 10px;
    }
  </style>
</head>

<body>

  <div class="modal fade myModal" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">添加图书</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>

        <form class="modal-body">
          <div class="box1">
            <label class="form-label" style="font-weight: bold;">书名</label>
            <input type="text" name="bookname" class="form-control">
          </div>

          <div class="box1">
            <label class="form-label" style="font-weight: bold;">作者</label>
            <input type="text" name="author" class="form-control">
          </div>

          <div class="box1">
            <label class="form-label" style="font-weight: bold;">出版社</label>
            <input type="text" name="publisher" class="form-control">
          </div>
        </form>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn_save btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

  <div class="box">

    <button type="button" class="btn1 btn-primary" data-toggle="modal" data-target="#exampleModal">
      +添加
    </button>

    <h2 class="sub-header">图书管理</h2>

    <table class="table table-striped">
      <thead>
        <tr>
          <th>#</th>
          <th>书名</th>
          <th>作者</th>
          <th>出版社</th>
          <th style="width: 180px;">操作</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>


  <div class="modal fade myModal2" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">编辑图书</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>

        <form class="save_modal-body">
          <input type="hidden" name="id" class="form-control">
          <div class="box1">
            <label class="form-label" style="font-weight: bold;">书名</label>
            <input type="text" name="bookname" class="form-control bookname" value="">
          </div>

          <div class="box1">
            <label class="form-label" style="font-weight: bold;">作者</label>
            <input type="text" name="author" class="form-control author" value="">
          </div>

          <div class="box1">
            <label class="form-label" style="font-weight: bold;">出版社</label>
            <input type="text" name="publisher" class="form-control publisher" value="">
          </div>
        </form>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn edit_btn_save btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

  <script src="../form-serialize.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="../bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>
  <script>

    const save = document.querySelector('.btn_save')
    const myModal = document.querySelector('.myModal')
    const modal = new bootstrap.Modal(myModal)
    const add = document.querySelector('.btn1')
    const tbody = document.querySelector('tbody')
    const form = document.querySelector('.modal-body')
    const creator = 'wwx'

    const save_form = document.querySelector('.save_modal-body')
    const myModal2 = document.querySelector('.myModal2')
    const modal2 = new bootstrap.Modal(myModal2)
    const edit_save = document.querySelector('.edit_btn_save')

    function render() {
      axios({
        url: 'http://hmajax.itheima.net/api/books',
        params: {
          creator
        }
      }).then(result => {
        console.log(result)
        const booklist = result.data.data.map((item, index) => {
          return `
          <tr>
          <td class="b_id">${index + 1}</td>
          <td class="b_name">${item.bookname}</td>
          <td class="writer">${item.author}</td>
          <td class="press">${item.publisher}</td>
          <td data-id="${result.data.data[index].id}">
            <span class="del">删除</span>
            &nbsp;&nbsp;
            <span class="edit">编辑</span>
          </td>
        </tr>
          `
        }).join('')
        tbody.innerHTML = booklist
      })
    }

    render()



    //添加图书
    add.addEventListener('click', function () {
      modal.show()
    })

    tbody.addEventListener('click', function (e) {
      if (e.target.classList.contains('del')) {
        const id = e.target.parentNode.dataset.id
        axios({
          url: `http://hmajax.itheima.net/api/books/${id}`,
          method: 'delete'
        }).then(result => {
          render()
        })
      }
    })

    save.addEventListener('click', function () {
      const bookobj = serialize(form, { hash: true, empty: true })
      axios({
        url: 'http://hmajax.itheima.net/api/books',
        method: 'post',
        data: {
          ...bookobj,
          creator
        }
      }).then(result => {
        render()
        form.reset()
        modal.hide()
      })

    })



    //编辑图书
    tbody.addEventListener('click', function (e) {
      if (e.target.classList.contains('edit')) {
        const id = e.target.parentNode.dataset.id
        document.querySelector('[name=id]').value = id
        axios({
          url: `http://hmajax.itheima.net/api/books/${id}`
        }).then(result => {
          const bookobj = result.data.data
          document.querySelector('.save_modal-body .bookname').value = bookobj.bookname
          document.querySelector('.save_modal-body .author').value = bookobj.author
          document.querySelector('.save_modal-body .publisher').value = bookobj.publisher
        })
        modal2.show()
      }
    })

    edit_save.addEventListener('click', function (e) {
      const bookobj = serialize(save_form, { hash: true, empty: true })
      const { id } = bookobj
      console.log(bookobj)
      axios({
        url: `http://hmajax.itheima.net/api/books/${id}`,
        method: 'put',
        data: {
          ...bookobj,
          creator
        }
      }).then(result => {
        render()
        modal2.hide()
      })

    })


  </script>
</body>

</html>

效果：