个人网站的后台文章管理功能

项目场景：

实现一个能够前后端交互的后台文章管理功能

---

问题描述

最开始思路出错，仅做到了dom的删除：

let target1
noBtn.onclick =deletePop.onclick=function(){
        popUps.style.display="none"
}
yesBtn.onclick =function (){
        target1.parentNode.remove() 
        popUps.style.display = "none"
}
const tBody =document.querySelector('.blog-list tbody') 
tBody.onclick = function(e){ 
        target1 =e.target.parentNode 
        let target =etarget 
console.log(target);
console.log(target.parentNode);
if(target.classList.contains('delete')){ 
        popUps.style.display = "block"
        return target1}

---

解决方案：

运用事件委托和自定义属性，向后端传需要删除的文章id，再次渲染。从而实现功能

yesBtn.onclick = function () {

    getUserId()

    function getUserId() {

        axios.get('/admin/deleteBlog', {

          params: {

            id: userId

          }

        }).then(res => {

          if (res.data == "success") {

            fetchData()

          }

        })

      }

    popUps.style.display = "none"

  }

  const tBody = document.querySelector('.blog-list tbody')

  tBody.onclick = function (e) {

    let target = e.target

    userId = target.getAttribute('user-id')

    console.log(userId);

    if (target.classList.contains('delete')) {

      popUps.style.display = "block"

      return userId

    } else if (target.classList.contains('edit')) {

      window.location.href = './post-blog.html';

    }

  }