AJAX二、案例练习：图书管理（bootstrap.Modal弹窗，reset重置表单),图片上传（知识点),网站换肤、个人设置，英雄百科，分类商品

bootstrap弹窗

官网链接：

1.通过属性控制，弹框显示或隐藏

2.通过JS控制，弹框显示或隐藏

一、图书管理（案例）

1.图书列表(渲染数据）

  一 渲染图书列表
*/
// 3.3 抽取creator为变量
const creator = 'itheima1011'
    // 2.4 抽取渲染图书列表的逻辑为函数
function getBooks() {
    axios({
        url: 'http://hmajax.itheima.net/api/books',
        // 3.4 替换为变量
        params: {
            creator
        }
    }).then(res => {
        console.log(res)
        const htmlArr = res.data.data.map((item, index) => {
            const { author, bookname, publisher, id } = item
            // 2.2 在删除按钮上保存id
            return `<tr>
                <td>${index + 1}</td>
                <td>${bookname}</td>
                <td>${author}</td>
                <td>${publisher}</td>
                <td>
                  <span data-id="${id}" class="del">删除</span>
                  <span data-id="${id}" class="edit">编辑</span>
                </td>
              </tr>`
        })
        const htmlStr = htmlArr.join('')
        document.querySelector('.list').innerHTML = htmlStr
    })
}
// 2.5 默认调用一次
getBooks()

2.新增图书（新增数据）

 addForm.reset()重置表单

 const data = serialize(addForm, { hash: true, empty: true })表单收集

/*
  三 新增图书
*/
const addModal = new bootstrap.Modal(document.querySelector('.add-modal'))

document.querySelector('.add-btn').addEventListener('click', () => {
    // 3.2 收集表单数据
    const addForm = document.querySelector('.add-form')
    const data = serialize(addForm, { hash: true, empty: true })
    console.log('data:', data)
        // 3.3 提交到服务器
    axios({
        url: 'http://hmajax.itheima.net/api/books',
        method: 'POST',
        data: {...data, creator }
    }).then(res => {
        // console.log(res)
        // 关闭弹窗
        addModal.hide()
            // 重置表单
        addForm.reset()
            // 重新获取数据
        getBooks()
    })
})

3.删除图书（删除数据）

/*
  二 删除图书
*/
// 2.1 事件委托绑定事件
document.querySelector('.list').addEventListener('click', (e) => {
    if (e.target.classList.contains('del')) {
        // 2.3 获取保存在删除按钮上的id
        const { id } = e.target.dataset
        axios({
            url: `http://hmajax.itheima.net/api/books/${id}`,
            method: 'delete'
        }).then(res => {
            // console.log(res)
            // 2.6 删除成功之后 重新获取数据并渲染
            getBooks()
        })
    }
})

4.编辑图书（修改数据）

对象数组循环

//  四 编辑图书
const editModal = new bootstrap.Modal(document.querySelector('.edit-modal'))
document.querySelector('.list').addEventListener('click', (e) => {
    if (e.target.classList.contains('edit')) {
        const { id } = e.target.dataset
        axios({
            url: `http://hmajax.itheima.net/api/books/${id}`,
        }).then(res => {
            console.log(res)
                // 保存图书数据
                // document.querySelector('.edit-modal .bookname').value = res.data.data.bookname
                // document.querySelector('.edit-modal .author').value = res.data.data.author
                // document.querySelector('.edit-modal .publisher').value = res.data.data.publisher
            for (const key in res.data.data) {
                document.querySelector(`.edit-modal .${key}`).value = res.data.data[key]
            }
            editModal.show()
        })
    }
})

整体

// 有一个creator 数据，表示自己的账户名
const creator = 'daqiu8888'

// 获取服务器的数据渲染 -- 新增-编辑和删除都需要请求服务器最新数据渲染 → 封装函数
function render() {
  // 发请求得到数据 → 渲染页面
  axios({
    url: 'https://hmajax.itheima.net/api/books',
    params: {
      creator
    }
  }).then(res=>{
    // console.log(res)
    // data.data
    let str = res.data.data.map((item, index)=>{
      const {bookname, author,publisher, id} = item
      return `
        <tr>
          <td>${index+1}</td>
          <td>${bookname}</td>
          <td>${author}</td>
          <td>${publisher}</td>
          <td>
            <span class="del" data-id="${id}">删除</span>
            <span class="edit" data-id="${id}">编辑</span>
          </td>
        </tr>
      `
    }).join('')
    document.querySelector('.list').innerHTML = str
  })
}

render()

// 删除和编辑 → 事件委托
let id = ''
document.querySelector('.list').addEventListener('click', function(e) {
  // 如果点击的是删除按钮 执行删除功能 → 按id删除 → 数据来源于服务器：向服务器发请求，删除的请求-id → 服务器执行删除 → 渲染最新数据
  id = e.target.dataset.id
  if (e.target.classList.contains('del')) {
    // console.log(1)
    // `https://hmajax.itheima.net/api/books/${id}`
    axios({
      url: `https://hmajax.itheima.net/api/books/${id}`,
      method: 'DELETE'
    }).then(res=>{
      // console.log(res)
      // 重新请求新数据去渲染
      render()
    })
  }

  // 编辑
  if (e.target.classList.contains('edit')) {
    edModal.show()
    // 数据回显 → 数据都在服务器上面，要拿着id向服务器发请求，拿到最新的数据渲染到value值
    axios({
      url: `https://hmajax.itheima.net/api/books/${id}`
    })
      .then(res=>{
        console.log(res)
        const data = res.data.data
        // 放上父选择器edit-form，新增和编辑的表单输入框名字相同，新增在上面，querySelector只找第一个
        // document.querySelector('.edit-form .bookname').value = data.bookname
        // document.querySelector('.edit-form .author').value = data.author
        // document.querySelector('.edit-form .publisher').value = data.publisher
        for (const key in data) {
          // 对象名.属性名 -- 必须是真实存在的属性名
          // key 是变量名 对象名[变量]
          document.querySelector(`.edit-form .${key}`).value = data[key]
        }
      })
  }
})

// 修改按钮的点击事件 → 收集用户新输入的数据 发送到服务器保存 → 渲染新数据 → 关闭弹窗
document.querySelector('.edit-btn').addEventListener('click', function() {