【ajax实战09】内容管理页面——删除功能

本文章目标：点击删除图标实现对应数据删除
实现步骤如下：

一：将服务器端获取数据中数据id值绑定到删除图标（重点）

即在渲染时，利用自定义属性，为td设置id值

<td data-id = "${ele.id}">
     <i class="bi bi-pencil-square edit"></i>
     <i class="bi bi-trash3 del"></i>
</td>

二：利用事件委托，绑定点击事件，并获取文章id

三：向服务器传递数据

document.querySelector('.art-list').addEventListener('click', async (e) => {
  if (e.target.classList.contains('del')) {
    const delId = e.target.parentNode.dataset.id
    console.log(delId);
    const res = await axios({
      url: `/v1_0/mp/articles/${delId}`,
      method: 'delete'
    })
    console.log(res);
    getArtileList()
  }
})

四：删除最后一条，实现列表页跳转

const children = document.querySelector('.art-list').children
//根据向服务器请求的那样，会请求当前的数据条数
    console.log(children);
    if (children.length === 1 && searchUrl.page !== 1) {
      searchUrl.page--
      document.querySelector('.page-now').innerHTML = `第${searchUrl.page}页`
      getArtileList()
    }

。。。先这样吧，今天学累了。明天再详细整理一下这篇文档