文章目录
- 1.编辑图书
-
- [1.1 编辑弹框 显示和隐藏](#1.1 编辑弹框 显示和隐藏)
- [1.2 获取当前编辑图书的数据 回显到编辑表单中](#1.2 获取当前编辑图书的数据 回显到编辑表单中)
- [1.3 提交保存修改,刷新修改列表](#1.3 提交保存修改,刷新修改列表)
- 完整代码如下:
1.编辑图书
- 编辑弹框 显示和隐藏
- 获取当前编辑图书的数据 回显到编辑表单中
- 提交保存修改,刷新修改列表
1.1 编辑弹框 显示和隐藏
找到编辑的按钮,弹出html中对应写好的表单,然后显示调用
javascript
//编辑图书
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()
}
})编辑弹框出现之后,通过查找修改的按钮的类名,即可给修改绑定点击事件
首先先给修改按钮绑定事件,先绑定一个点击隐藏这个表单事件
javascript
document.querySelector('.edit-btn').addEventListener('click',()=>{
editModal.hide()
})1.2 获取当前编辑图书的数据 回显到编辑表单中
接口查看
javascript
//设置回显
const theId = e.target.parentNode.dataset.id
axios({
url: `http://hmajax.itheima.net/api/books/${theId}`
}).then(result => {
console.log(result)
})result 数据如下
javascript
//返回一个对象数据
const bookObj=result.data.data
console.log(bookObj)
通过类.value ,给输入框赋予默认值
javascript
document.querySelector(".edit-form .bookname").value=bookObj.bookname回显成功
但是一个一个赋值,未免太麻烦.通过循环遍历代码简化代码
javascript
const keys=Object.keys(bookObj)
keys.forEach(key=>{
document.querySelector(`.edit-form .${key}`).value=bookObj[key]
})讲解简化代码:
1.Object.keys(obj)
返回对象中所有"属性名"组成的数组
例子
javascript
const bookObj = {
bookname: 'Vue实战',
author: '尤雨溪',
publisher: '电子工业出版社'
}
const keys = Object.keys(bookObj)
// 结果：['bookname', 'author', 'publisher']
通过 keys[0] 可以拿到 bookname综上这个数组负责拿到 bookname 之类的类名
2.forEach 遍历数组
javascript
keys.forEach(key => {
console.log(key)
})
输出如下
//id
//bookname
//...3.bookObj[key]
对象可以通过数组,然后[下标值]的方式拿到值,注意这个下标值是一个字符类型,就是可以是字符串,或者变量(这个变量的值是字符串)
1.3 提交保存修改,刷新修改列表
- 通过 serialize 提取表单当前的数据
- 通过接口文档将数据提上去
通过 serialize 提取表单当前的数据,表单数据存在这里
serialize(form, { hash: true }) 的作用就是：
把表单中的所有 的 value 值收集起来，变成一个对象
这个表格的结构是,其中 id是隐藏的
javascript
<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>通过接口文档将数据提上去,查看文档如下
代码如下:
javascript
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()
})完整代码如下:
javascript
//编辑图书
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()
})