图书管理增删查改案例学习总结附代码与讲解（Axios）
[*]渲染列表（查）
[*]新增图书（增）
[*]删除图书（删）
[*]编辑图书（改）
目标1：渲染图书列表
1.1 获取数据
1.2 渲染数据
//获取数据
const creator = "老张"
function getData() {
axios({
url: "http://hmajax.itheima.net/api/books",
params: {
creator //属性与变量同名省略
}
}).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
})
}
getData()
目标2：新增图书列表
1.1 点击弹框，出现新增（用js控制弹框）。
[*]先把要控制的弹框获取过来
[*]创建新弹框对象
[*] const addModalDom = document.querySelector('.add-modal')；const addModal = new bootstrap.Modal(addModalDom)
/*创建弹框对象（这段代码选择具有 "add-modal "类的 DOM 元素，并利用该 DOM 元素创建一个新的 Bootstrap 模态实例。如许，您就可以通过`addModal` 变量来控制模态，例如表现、隐藏或利用 Bootstrap 模态方法和属性来操作模态。）*/
1.2 网络表单数据（利用插件serialize）
1.2.1必要在index里引入<script src="./lib/form-serialize.js"></script>插件
1.3向服务器提交数据
1.4 重新获取，渲染数据
[*] 创建被控制弹框对象
const addModalDom = document.querySelector('.add-modal')
const addModal = new bootstrap.Modal(addModalDom)
//获取保存按钮->点击->隐藏弹框
document.querySelector('.add-btn').addEventListener('click', () => {
//收集数据（需要在index里引入<script src="./lib/form-serialize.js"></script>插件
const addForm = document.querySelector('.add-form')
//定义接受图书数据的变量
const bookObj = serialize(addForm, { hash: true, empty: true })
// console.log(bookObj)
//提交到服务器
axios({
url: 'http://hmajax.itheima.net/api/books',
method: 'post',
data: {
...bookObj,
creator
}
}).then(result => {
//提交处理后的结果（添加数据）
getData()
// 重置表单
addForm.reset()
addModal.hide()
})
})
目标3：删除选定图书
3.1获取选定图书的删除按钮（给动态生成的标签绑定点击事件，可以委托给父级）
3.2通过ID获取当前列
3.3利用数据传参的方式提交删除的数据
3.4重新传参
//先获取父级元素tbody，再获取里面的
document.querySelector('.list').addEventListener('click', e => {
//如果点的是“删除”
if (e.target.classList.contains('del')) {
//console.log(e.target)
//获取图书id(自定义属性id)
const theId = e.target.parentNode.dataset.id
axios({
url: `http://hmajax.itheima.net/api/books/${theId}`,
//路径传参
method: 'DELETE'
}).then(()=> {
getData()
}
)
}
}) 目标4：编辑选定图书（弹框表现隐藏——数据表现——生存修改&刷新列表）
4.1创建编辑弹框
3.1.1通过JS控制表现隐藏
4.2编辑数据
4.2.1（根据Id利用axios）获取当前编辑图书数据，（遍历属性，）返回到表单中
4.3利用数据传参的方式提交编辑的数据
4.4重新传参
//先创建模态框
const editDom = document.querySelector('.edit-modal')
const editModal = new bootstrap.Modal(editDom)
//获取对应元素
document.querySelector('.list').addEventListener('click', e => {
if (e.target.classList.contains('edit')) {
const theId = e.target.parentNode.dataset.id
//console.log(theId)
//调用删除接口
axios({
url: `http://hmajax.itheima.net/api/books/${theId}`,
}).then(result => {
//从result中取出图书对象
const bookObj = result.data.data
//document.querySelector('.edit-form .bookname').value =
// bookObj.bookname
//document.querySelector('.edit0form .author').value =
// bookObj.author
/*这段代码片段是使用JavaScript来遍历一个对象（bookObj）的键值对，并将每个键对应的值填充到页面上指定类名的元素中。具体的步骤如下：
1. 使用`Object.keys()`方法获取对象bookObj的所有键，将它们存储在一个数组keys中。
2. 使用`forEach()`方法遍历keys数组中的每个键。
3. 对于每个键，使用`document.querySelector()`方法找到页面上具有特定类名的元素（例如`.edit-form .${key}`），并将该元素的值设置为bookObj中对应键的值。
这段代码的作用是将bookObj对象中的数据填充到页面上指定的表单元素中，以便用户可以编辑这些数据。*/
//遍历数据对象，使用属性去获取对应的标签，快速赋值
const keys = Object.keys(bookObj)//['id','bookname']
//遍历数组里的每一个属性，找到对应表单元素，快速赋值
keys.forEach(key => {
document.querySelector(`.edit-form .${key}`).value =
bookObj
})
})
editModal.show()
}
})
//修改按钮->点击->隐藏事件
document.querySelector('.edit-btn').addEventListener('click', () => {
//4.3提交保存修改
//先获取编辑表单
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(() => {
getData()
editModal.hide()
})
}
)
ps：
在 JavaScript 中，对象的属性可以通过点表示法或者中括号表示法来访问。利用点表示法，可以直接通过对象的属性名来访问属性的值，例如 `bookObj.title`。而利用中括号表示法，可以通过变量或者表达式来动态地访问对象的属性，例如 `bookObj['title']` 或者 `bookObj`。
在这段代码中，`bookObj` 利用了中括号表示法，此中 `key` 是一个变量，代表对象 `bookObj` 中的属性名。通过利用中括号表示法，可以动态地访问对象中的属性，这对于必要根据变量来确定属性名的环境非常有效，比如在循环中访问对象的属性。
.then(() => {
getData()
editModal.hide()
}) .then()是Promise对象的方法，用于处理异步操作乐成的环境。当axios请求乐成返回数据时，.then()方法会执行此中的回调函数。在这里，.then()中的箭头函数会调用getData()函数来刷新数据，并调用editModal.hide()来隐藏编辑模态框。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]