列表的增删改查

经典业务逻辑之列表的增删改查，常见的业务逻辑，记录一下 。

查询

网页加载，或对数据进行了修改（添加删除更改），此时发送网络请求，得到最新数据再将数据渲染至列表。

具体操作：

function getBookList(){
  // 获取数据
  axios({
    url: 'http://hmajax.itheima.net/api/books',
    params:{
      creator
    }
  }).then(result=>{
    const bookList = result.data.data
    // console.log(bookList);
    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()

这里定义了getBookList方法，用来向服务器请求数据，根据返回的数据通过map和模版字符串的使用，进行遍历渲染，再插入到DOM中。

tips：Array.prototype.map()，该方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。点击查看具体用法

新增

新增数据实现逻辑：当用户点击添加按钮，弹出输入框，用户在输入框中点击输入信息，再点击保存即可实现新增一条数据列表。

思路：

1.点击添加按钮，实现新增输入框的弹出。

获取到新增弹框元素对象

// 获取新增弹框
const addModalDom = document.querySelector('.add-modal')
const addModal = new bootstrap.Modal(addModalDom)

bootstrap弹框对象，点击按钮data-bs-target=".add-modal"带有add-modal类的弹框自动弹出。

2.弹出弹框，用户输入新增的数据，点击保存，给“保存”按钮添加点击事件，收集数据并提交到服务器，点击后完成数据的保存，再次调用getBookList方法重新获取数据进行渲染，关闭弹框。

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()
  })
})

这里用到了form-serialize插件快速收集表单元素的值。点击查看具体用法

删除

实现删除功能，需要给删除按钮绑定点击事件，删除按钮是动态创建的，需要给父级委托点击事件再获取删除按钮。

// 获取父级元素
const list = document.querySelector(".list")
// 给父级元素绑定点击事件
list.addEventListener('click',(e)=>{
    // 判断点击的是删除元素
    if(e.target.classList.contains('del')){
        // 获取绑定自定义属性的id
        const theId = e.target.parentNode.dataset.id
        axios({																		                                      url:`http://hmajax.itheima.net/api/books/${theId}`,
             method:'delete'
        }).then(res=>{
			// 重新渲染数据
            getBookList()
        })
    }
})

修改

基本逻辑：点击编辑按钮，弹出编辑输入框，弹出输入框需要带上原本数据，点击修改，发送请求更改服务器数据，再次请求数据进行渲染。

点击编辑数据回填：

// 编辑图书功能
const editForm = document.querySelector('.edit-modal')
const editModal = new bootstrap.Modal(editForm)
// 事件委托
document.querySelector('.list').addEventListener('click',e=>{
  if(e.target.classList.contains('edit')){
    // 点击按钮，弹框弹出
    editModal.show()
    const id = e.target.parentNode.dataset.id
    axios({
      url:`http://hmajax.itheima.net/api/books/${id}`,
    }).then(res=>{
      const bookObj = res.data.data
      const keys = Object.keys(bookObj)
      // 遍历渲染
      keys.forEach(item=>{
        document.querySelector(`.edit-form .${item}`).value=bookObj[item]
      })
    })
  }
})

点击修改，保存数据：

// 点击修改按钮隐藏弹框
document.querySelector(".edit-btn").addEventListener('click',()=>{
  // 4.3提交保存修改，并刷新列表
  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(res=>{
    // 修改成功之后重新获取
    getBookList()
  })
  editModal.hide()
})