AJAX 2——Bootstrap弹框使用、图书管理案例、图片上传方法

AJAX 2——Bootstrap弹框使用、图书管理案例、图片上传方法

1.Bootstrap弹框使用-Modal

• 通过自定义属性控制

  <button  data-bs-toggle="modal" data-bs-target="CSS选择器">点击该按钮显示弹框</button>
   <button data-bs-dismiss="modal" >Close关闭弹框</button>
  

• 通过JS控制

   //  1. 创建弹框对象
    // 2. 调用弹框对象内置方法
    //   .show() 显示
    //   .hide() 隐藏
    const modalDom = document.querySelector('.name-box')
    const modal = new bootstrap.Modal(modalDom)
    document.querySelector('.edit-btn').addEventListener
        ('click', () => {
          document.querySelector('.username').value = '小小怪'
          modal.show()
      })
   document.querySelector('.save-btn').addEventListener
        ('click', () => {
          const username =  document.querySelector('.username').value
          console.log(username)
          modal.hide()
        })
  

2.案例：图书管理（增删查改）

• 查：注意获取数据渲染列表的时候把图书序号获取过来加到删除编辑模块，是为了后续进行删除编辑可以获取该序号并传给服务器进行操作

/**
 * 目标1：渲染图书列表
 *  1.1 获取数据
 *  1.2 渲染数据
 */
function getBookList() {
  axios({
    url: 'http://hmajax.itheima.net/api/books',
    params: {
      creator: '老张'
    }
  }).then(result => {
    console.log(result)
    const bookList = result.data.data
    console.log(bookList)
    const htmlStr = bookList.map((item, id) => {
      const { bookname, author, publisher } = item
      return `
      <tr>
          <td>${id + 1}</td>
          <td>${bookname}</td>
          <td>${author}</td>
          <td>${publisher}</td>
          <td data-id=${item.id}>
            <span class="del">删除</span>
            <span class="edit">编辑</span>
          </td>
        </tr>
      `
    }).join('')
    const list = document.querySelector('.list')
    list.innerHTML = htmlStr
  })
}
getBookList()

• 增：注意新增完之后要先重置表单，下一次点击新增按钮后表单是空的

// 目标2：新增图书
const creator = '老张'
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 })
    console.log(bookObj);
    axios({
      url: 'http://hmajax.itheima.net/api/books',
      method: 'post',
      data: {
        ...bookObj,
        creator
      }
    }).then(result => {
      console.log(result)
      getBookList()
      //重置表单
      addForm.reset()
      addModal.hide()
    })
  })

• 删：注意使用的请求方法为删除数据，传递参数的方法为地址传参（由接口文档决定的）

//3.删除列表项
document.querySelector('.list').addEventListener('click', function (e) {
  if (e.target.classList.contains('del')) {
    const delId = e.target.parentNode.dataset.id
    axios({
      url: `http://hmajax.itheima.net/api/books/${delId}`,
      method: 'DELETE',
    }).then(result => {
      console.log(result)
      getBookList()
    })
  }
})

• 改：注意编辑的逻辑是：点击编辑按钮获取该图书的唯一序号发送给服务器——>服务器返回图书信息——>将图书信息赋给编辑图书页面的输入框并显示编辑框——>点击保存按钮将修改的信息包括该图书的id传递给服务器，请求方法为修改数据PUT——>渲染页面

//4.编辑图书
const editModalDom = document.querySelector('.edit-modal')
const editModal = new bootstrap.Modal(editModalDom)
document.querySelector('.list').addEventListener('click', function (e) {
  if (e.target.classList.contains('edit')) {
    const editId = e.target.parentNode.dataset.id
    axios({
      url: `http://hmajax.itheima.net/api/books/${editId}`,
    }).then(result => {
      console.log(result.data.data)
      const bookObj = result.data.data
      //数据对象属性和标签类名一致  防止表单元素过多要一一赋值
      const keys = Object.keys(bookObj)
      keys.forEach(key => {
        document.querySelector(`.edit-form .${key}`).value = bookObj[key]
      })
    })
    editModal.show()
  }
  //4.1编辑 点击保存
})
document.querySelector('.edit-btn').addEventListener('click', function () {
  const editForm = document.querySelector('.edit-form')
  //注意这里的id是从哪里来的呢 这里的hidden隐藏了 前面点击编辑的时候以及从服务器获取火来并赋值到value了
  // <input type="hidden" class="id" name="id" value="509570">
  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(result => {
    console.log(result)
    getBookList()
    editModal.hide()
  })
})

3.案例：图片上传

• 注意当接口文档标明需要FormData格式上传图片时使用该方法

<body>
  <!-- 文件选择元素 -->
  <input type="file" class="upload">
  <img src="" alt="" class="my-img">

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 目标：图片上传，显示到网页上
     *  1. 获取图片文件
     *  2. 使用 FormData 携带图片文件
     *  3. 提交到服务器，获取图片url网址使用
    */
    document.querySelector('.upload').addEventListener('change', e => {
      //获取图片文件
      console.log(e.target.files[0])
      //使用FormData携带图片文件
      const fd = new FormData()
      fd.append('img', e.target.files[0])
      console.log(fd);

      //提交到服务器
      axios({
        url: 'http://hmajax.itheima.net/api/uploadimg',
        method: 'POST',
        data: fd
      }).then(result => {
        console.log(result)
        const imgURL = result.data.data.url
        document.querySelector('.my-img').src = imgURL
      })

    })
  </script>
</body>