[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.idaxios({url: `http://hmajax.itheima.net/api/books/${theId}`}).then(result => {console.log(result)})

result 数据如下

 //返回一个对象数据const bookObj=result.data.dataconsole.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.idaxios({url: `http://hmajax.itheima.net/api/books/${theId}`}).then(result => {console.log(result)//返回一个对象数据const bookObj = result.data.dataconsole.log(bookObj)// document.querySelector(".edit-form .bookname").value=bookObj.booknameconst 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()})