【无标题】

图书管理核心代码

渲染数据

//获取数据
axios({...}).then(result => {
       const bookList = result.data.data
       //渲染数据
       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
})

新增数据

const addModalDom = document.querySelector('.add-modal')
const addModal = new bootstrap.Modal(addModalDom)
document.querySelector('add-btn').addEvenListener('click',() =>{
    //收集数据，提交服务器保存
    const addForm = document.querySelector('.add-form')
    const bookObj = serialize(addForm,{hash:true,empty:true})
    axios({...}).then(result =>{
           //重新渲染数据
           getBoosList()
    	   //重置表单数据
    	   addForm.reset()
    	   //隐藏弹框
    	   addModal.hide()
          })
})

删除数据

document.querySelector('.list').addEvenListener('click',e =>{
    if(e.target.classList.contains('del')){   //如果点击对象里包含del的class
        //获取id   id在父节点的class里
        const theId = e.target.parentNode.dataset.id
        //调用删除接口
        axios({...}).then(() =>{
            getBookList() //刷新图书列表
        })
    }
})

编辑数据

const editDom = document.querySelector('.edit-modal')
const editModal = new bootstrap.Modal(editDom)
document.querySelector('.list').addEvenListener('click',e =>{
    if if(e.target.classList.contains('edit')){
        //把数据回显到表单中
        const theId = e.target.parentNode.dataset.id
        axios({...}).then(result =>{
               const bookObj = result.data.data
               //遍历赋值
               const keys = Object.keys(bookObj)
        	   keys.forEach(key =>{
                   document.querySelector(`.edit-form .${key}`).value = bookObj[key]
               })
              })
         editModal.show()
    }
})
//后面与新增的步骤一致