黑马AJAX图书管理案例

最新推荐文章于 2024-08-07 23:30:48 发布

阮小航

最新推荐文章于 2024-08-07 23:30:48 发布

阅读量777

点赞数 23

文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/2301_80293400/article/details/140994003

版权

黑马AJAX图书管理案例

注意 bootstrap的css与js这里是本地导入，需要自行导入一下

这里是bootstrap下载链接

然后直接复制到vscode打开就行

代码如下

总体

<!DOCTYPE html>
<html lang="cmn-hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <script src="../bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>Document</title>
    <style>
      table{
        text-align: center;
        border: 1px solid black;
      }
      table th,td{
        border: 1px solid black;
        padding: 10px;
      }
      caption{
        text-align: center;
      }
      table td span{
        cursor: pointer;
      }
      .modal-body input{
        display: block;
        margin: 20px;
      }
    </style>
</head>
<body>
  <table>
    <caption>我是标题</caption>
    <thead>
      <tr>
        <th>序号</th>
        <th>书名</th>
        <th>作者</th>
        <th>出版社</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>
          <span class="del">删除</span>
          <span class="edit">编辑</span>
        </td>
      </tr>
    </tbody>
  </table>
  <!-- 增加按钮 -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#add">
    增加
  </button>
  
  <!-- 增加弹窗 -->
  <div class="modal fade" id="add" 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>
        <div class="modal-body">
          <input type="text" class="bookname" placeholder="书名">
          <input type="text" class="author" placeholder="作者">
          <input type="text" class="publisher" placeholder="出版社">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" data-bs-dismiss="modal">保存</button>
        </div>
      </div>
    </div>
  </div>

    <!-- 修改弹窗 -->
    <div class="modal fade" id="edit" 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>
          <div class="modal-body">
            <input type="text" class="bookname" placeholder="书名">
            <input type="text" class="author" placeholder="作者">
            <input type="text" class="publisher" placeholder="出版社">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">保存</button>
          </div>
        </div>
      </div>
    </div>
  <script>
    const creator = '阮小航'
    // 渲染函数
    function show(){
      axios({
      url: 'http://hmajax.itheima.net/api/books',
      params: {
        creator
      }
    }).then(function(r){
      const content = r.data.data.map((item,index) => {
        return `
        <tr>
        <td>${index + 1}</td>
        <td>${item.bookname}</td>
        <td>${item.author}</td>
        <td>${item.publisher}</td>
        <td data-id=${item.id}>
          <span class="del">删除</span>
          <span class="edit" data-bs-toggle="modal" data-bs-target="#edit">编辑</span>
        </td>
        </tr>
        `
      }).join('')
      document.querySelector('tbody').innerHTML = content
    })
    }
    show()
    // 绑定增加函数
    document.querySelector('#add .btn-primary').addEventListener('click',()=>{
      axios({
        url: 'http://hmajax.itheima.net/api/books',
        method: 'post',
        data: {
          bookname: document.querySelector('.bookname').value,
          author: document.querySelector('.author').value,
          publisher: document.querySelector('.publisher').value,
          creator
        }
      }).then(()=>{
        show()
        // 清除表单内容 保证下次添加表单为空
        document.querySelector('.bookname').value=''
        document.querySelector('.author').value=''
        document.querySelector('.publisher').value=''
      })
    })
    // 存放操作图书的id变量
    let edit_id = 0
    // 通过事件委托绑定修改与删除操作
    document.querySelector('tbody').addEventListener('click', e =>{
      // 删除操作
      if(e.target.classList.contains('del')){
        axios({
          url: `http://hmajax.itheima.net/api/books/${e.target.parentNode.dataset.id}`,
          method: 'delete'
        }).then(show)
      }
      // 修改操作
      if(e.target.className==='edit'){
        axios({
          url: `http://hmajax.itheima.net/api/books/${e.target.parentNode.dataset.id}`
        }).then(r=>{
          document.querySelector('#edit .modal-body .bookname').value=r.data.data.bookname
          document.querySelector('#edit .modal-body .author').value=r.data.data.author
          document.querySelector('#edit .modal-body .publisher').value=r.data.data.publisher
          edit_id = e.target.parentNode.dataset.id
        })
      }
    })
    // 修改操作
    document.querySelector('#edit .modal-footer .btn-primary').addEventListener('click',()=>{
      axios({
        url: `http://hmajax.itheima.net/api/books/${edit_id}`,
        method: 'put',
        data: {
          bookname: document.querySelector('#edit .modal-body .bookname').value,
          author: document.querySelector('#edit .modal-body .author').value,
          publisher: document.querySelector('#edit .modal-body .publisher').value,
          creator
        }
      }).then(show)
    })
  </script>
</body>
</html>