[AJAX 实战] 图书管理系统下 编辑图书

1.编辑图书

• 编辑弹框 显示和隐藏
• 获取当前编辑图书的数据 回显到编辑表单中
• 提交保存修改,刷新修改列表

1.1 编辑弹框 显示和隐藏

找到编辑的按钮,弹出html中对应写好的表单,然后显示调用

//编辑图书
const editDom=document.querySelector('.edit-modal')
const editModal=new bootstrap.Modal(editDom)

document.querySelector('.list').addEventListener('click',e=>{

    //如果是编辑按钮
    if(e.target.classList.contains('edit'))
    {    console.log("点击编辑")
        //展示出编辑框
         editModal.show()   
    }
 
})

编辑弹框出现之后,通过查找修改的按钮的类名,即可给修改绑定点击事件

首先先给修改按钮绑定事件,先绑定一个点击隐藏这个表单事件

document.querySelector('.edit-btn').addEventListener('click',()=>{
    editModal.hide()
})

1.2 获取当前编辑图书的数据 回显到编辑表单中

接口查看

        //设置回显
        const theId = e.target.parentNode.dataset.id
        axios({
            url: `http://hmajax.itheima.net/api/books/${theId}`
        }).then(result => {
            console.log(result)
        })

result 数据如下

 //返回一个对象数据
            const bookObj=result.data.data
            console.log(bookObj)

通过类.value ,给输入框赋予默认值

 document.querySelector(".edit-form .bookname").value=bookObj.bookname

回显成功

但是一个一个赋值,未免太麻烦.通过循环遍历代码简化代码

 const keys=Object.keys(bookObj)
            keys.forEach(key=>{
                document.querySelector(`.edit-form .${key}`).value=bookObj[key]
            })

讲解简化代码:
1.Object.keys(obj)
返回对象中所有“属性名”组成的数组
例子

const bookObj = {
  bookname: 'Vue实战',
  author: '尤雨溪',
  publisher: '电子工业出版社'
}

const keys = Object.keys(bookObj)
// 结果：['bookname', 'author', 'publisher']

通过 keys[0] 可以拿到 bookname

综上这个数组负责拿到 bookname 之类的类名

2.forEach 遍历数组

keys.forEach(key => {
  console.log(key)
})
输出如下
//id
//bookname
//...

3.bookObj[key]
对象可以通过数组,然后[下标值]的方式拿到值,注意这个下标值是一个字符类型,就是可以是字符串,或者变量(这个变量的值是字符串)

1.3 提交保存修改,刷新修改列表

• 通过 serialize 提取表单当前的数据
• 通过接口文档将数据提上去

通过 serialize 提取表单当前的数据,表单数据存在这里
serialize(form, { hash: true }) 的作用就是：
把表单中的所有 的 value 值收集起来，变成一个对象

这个表格的结构是,其中 id是隐藏的

<form class="edit-form">
  <input type="hidden" class="id" name="id">
  <input type="text" name="bookname">
  <input type="text" name="author">
  <input type="text" name="publisher">
</form>

通过接口文档将数据提上去,查看文档如下

代码如下:

document.querySelector('.edit-btn').addEventListener('click', () => {

    //提交保存修改,刷新修改列表
    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(()=>{
            getBooksList()
            
    })

    editModal.hide()

})

完整代码如下:

//编辑图书
const editDom = document.querySelector('.edit-modal')
const editModal = new bootstrap.Modal(editDom)

document.querySelector('.list').addEventListener('click', e => {

    //如果是编辑按钮
    if (e.target.classList.contains('edit')) {
        console.log("点击编辑")

        //展示出编辑框
        editModal.show()


        //设置回显
        const theId = e.target.parentNode.dataset.id
        axios({
            url: `http://hmajax.itheima.net/api/books/${theId}`
        }).then(result => {
            console.log(result)
            //返回一个对象数据
            const bookObj = result.data.data
            console.log(bookObj)
            // document.querySelector(".edit-form .bookname").value=bookObj.bookname
            const keys = Object.keys(bookObj)
           console.log(bookObj['id'])
            keys.forEach(key => {
                console.log(key)
            })
            keys.forEach(key => {
                document.querySelector(`.edit-form .${key}`).value = bookObj[key]
            })
        })

       
        
    }

})

document.querySelector('.edit-btn').addEventListener('click', () => {

    //提交保存修改,刷新修改列表
    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(()=>{
            getBooksList()
            
    })

    editModal.hide()

})