AJAX 02-图书管理（bootstrap弹框、增删改查）

1、bootstrap弹框

步骤：

1. 引入 bootstrap.css 和 bootstrap.js 

2. 准备弹框标签，确认结构

3. 控制弹框的显示和隐藏

通过自定义属性控制 

  <!-- modal 是告诉按钮绑定的是modal模态框，.my-box是告诉按钮绑定的是哪一个模态框，因为一个页面可能有多个模态框 -->
  <button data-bs-toggle="modal" data-bs-target=".my-box">显示弹框</button>
  <!-- 关闭模态框 -->
  <button data-bs-dismiss="modal">Close</button>

  <!-- 弹框标签 -->
  <!-- 添加modal类名，默认隐藏 -->
  <div class="modal my-box" tabindex="-1">
    <!-- 弹框内容 -->
  </div>

通过JS控制 

// 创建弹框对象
const modalDom = document.querySelector('.my-box')
const modal = new bootstrap.Modal(modalDom)

// 显示弹框
modal.show()
// 隐藏弹框
modal.hide()

2、渲染列表（查）

const creator = '老张'
function getBookList() {
  // 1. 获取数据
  axios({
    url: 'http://hmajax.itheima.net/api/books',
    params: {
      creator
    }
  }).then(result => {
    // console.log(result)
    // console.log(result.data.data)   // 图书信息,数组对象形式
    const bookList = result.data.data

    // 2. 渲染数据
    const htmlStr = bookList.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">编辑</span>
          </td>
        </tr>
      `
    }).join('')
    document.querySelector('.list').innerHTML = htmlStr
  })
}
getBookList()

3、新增图书（增）

// 新增按钮
// 1. 创建弹框对象
const addModalDom = document.querySelector('.add-modal')
const addModal = new bootstrap.Modal(addModalDom)
// 点击保存按钮,收集表单信息,隐藏弹框
document.querySelector('.add-btn').addEventListener('click', () => {
  // 收集表单信息
  const addForm = document.querySelector('.add-form')
  const bookObj = serialize(addForm, { hash: true, empty: true })
  // 提交到服务器
  axios({
    url: 'http://hmajax.itheima.net/api/books',
    method: 'POST',
    data: {
      ...bookObj,
      creator
    }
  }).then(result => {
    // 刷新页面
    getBookList()
    // 重置表单
    addForm.reset()
    // 隐藏模态框
    addModal.hide()
  })
})

4、删除图书（删）

// 删除按钮 
document.querySelector('.list').addEventListener('click', e => {
  if (e.target.classList.contains('del')) {
    // 获取点击的目标元素的父节点
    let parentTd = e.target.parentNode
    // 通过循环不断向上寻找父节点，直到找到一个具有data-id属性的父节点
    while (!parentTd.hasAttribute('data-id')) {
      parentTd = parentTd.parentNode
    }
    // 用于标识要删除的书籍的唯一ID
    const theId = parentTd.dataset.id
    // 调用删除接口
    axios({
      url: `http://hmajax.itheima.net/api/books/${theId}`,
      method: 'DELETE'
    }).then(() => {
      getBookList()
    })
  }
})

5、编辑图书（改）

// 编辑按钮
const editDom = document.querySelector('.edit-modal')
const editModal = new bootstrap.Modal(editDom)
document.querySelector('.list').addEventListener('click', (e) => {
  if (e.target.classList.contains('edit')) {
    let parentTd = e.target.parentNode
    while (!parentTd.hasAttribute('data-id')) {
      parentTd = parentTd.parentNode
    }
    const theId = parentTd.dataset.id
    // 调用编辑接口，获取当前图书数据，回显到编辑表单上
    axios({
      url: `http://hmajax.itheima.net/api/books/${theId}`,
    }).then(result => {
      // console.log(result.data.data)       {id: 495034, bookname: '红楼梦', author: '曹雪芹', publisher: '北京出版社'
      const bookObj = result.data.data
      const keys = Object.keys(bookObj)   // 将对象里的属性拿出来组成数组
      // console.log(keys)                   ['id', 'bookname', 'author', 'publisher']
      keys.forEach(key => {
        document.querySelector(`.edit-form .${key}`).value = bookObj[key]
      })
    })
    editModal.show()
  }
})

// 修改按钮
document.querySelector('.edit-btn').addEventListener('click', () => {
  const editForm = document.querySelector('.edit-form')
  const { id, bookname, author, publisher } = serialize(editForm, { hash: true, empty: true })
  axios({
    url: `http://hmajax.itheima.net/api/books/${id}`,
    method: 'PUT',
    data: {
      bookname,
      author,
      publisher,
      creator
    }
  }).then(() => {
    getBookList()
    editModal.hide()
  })
})