目录
- 图书列表渲染功能描述
- 图书列表渲染实现步骤
- 1.准备工作
- 2.数据渲染
- 3.数据添加
- 4.数据删除
- 5.数据编辑
- 完整实例代码
图书列表渲染功能描述
- 页面刷新时，列表自动渲染图书列表数据
- 已渲染的图书列表数据可以进行编辑和删除功能
- 点击添加按钮，可以添加图书信息，并将其渲染到页面上
图书列表渲染实现步骤
1.准备工作
了解axios函数的基本使用
引入
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.0/axios.min.js"></script>
使用
axios({url:'请求网址',method:'请求方式', //默认为getparams:{} //get请求参数data:{} //post请求参数})
了解bootstrap表单和formserialize的基本使用
引入
<script src="./lib/form-serialize.js"></script> //本地form-serialize引入<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.min.js">
使用
const {结构的变量名称}=form-serialize('表单名',{hash:true,empty:true}) //hash为true将数据转换为哈希值，推荐使用。empty为true可以接受空值
准备合适的接口
自行准备
2.数据渲染
先从后台请求数据，将请求的数据映射到对应列表的位置上
const list = document.querySelector('.list') //渲染位置function addData() { //封装渲染函数，要复用axios({url: 'http://hmajax.itheima.net/api/books',params: { //保证数据请求格式正确creator: 'Tom'}}).then(res => {const arr = res.data.dataconst str = arr.map(item => { //使用map映射return `<tr><td>${item.id}</td><td>${item.bookname}</td><td>${item.author}</td><td>${item.publisher}</td><td><span class="del">删除</span><span class="edit">编辑</span></td></tr>`})document.querySelector('.list').innerHTML = str //将所得数据写入到指定位置})}addData()
实现效果
3.数据添加
给添加按钮绑定点击事件，当点击时，打开添加弹窗，自动收集弹窗中表单的数据，将其发送到服务器中，关闭添加弹窗，再渲染一遍数据
const plusBtn = document.querySelector('.plus-btn')// 添加弹窗const addModal = document.querySelector('.add-modal')const aModal = new bootstrap.Modal(addModal)const addForm = document.querySelector('.add-form')plusBtn.addEventListener('click', () => {aModal.show()// 保存添加const addBtn = document.querySelector('.add-btn')addBtn.addEventListener('click', () => {const { bookname, author, publisher } = serialize(addForm, { hash: true, empty: true })const data = {bookname,author,publisher,creator: 'Tom'}axios({url: 'http://hmajax.itheima.net/api/books',method: 'post',data}).then(res => {aModal.hide()addForm.reset() //添加结束后重置表单addData()})})})
实现效果
4.数据删除
利用事件委托给图书列表添加点击事件，当点击到删除按钮时，利用元素节点找到该列表的id值，拼接到url网址上
list.addEventListener('click', (e) => { //使用事件委托绑定点击事件if (e.target.classList.contains('del')) {const id = e.target.parentNode.parentNode.children[0].innerHTMLaxios({url: `http://hmajax.itheima.net/api/books/${id}`,method: 'delete'}).then(res => {addData()})}...}
实现效果
5.数据编辑
利用事件委托，当点击到编辑按钮时，打开编辑弹窗，收集渲染列表的数据，并自动收集弹窗中表单的数据，将其发送到服务器中，关闭编辑弹窗，再渲染一遍数据
if (e.target.classList.contains('edit')) {const id = e.target.parentNode.parentNode.children[0].innerHTMLconst children = e.target.parentNode.parentNode.childrenconst bookname = children[1].innerHTML //遍历列表，保证编辑框打开后存在数据const author = children[2].innerHTMLconst publisher = children[3].innerHTMLeModal.show()editForm.querySelector('input[name="bookname"]').value = booknameeditForm.querySelector('input[name="author"]').value = authoreditForm.querySelector('input[name="publisher"]').value = publishereditBtn.addEventListener('click', () => {const { bookname, author, publisher } = serialize(editForm, { hash: true, empty: true })const data = {bookname,author,publisher,creator: 'Tom'}axios({url: `http://hmajax.itheima.net/api/books/${id}`,method: 'put',data}).then(res => {eModal.hide()addData()editForm.reset() //编辑结束后重置表单})})}
实现效果
完整实例代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>案例-图书管理</title><!-- 字体图标 --><link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3736758_vxpb728fcyh.css"><!-- 引入bootstrap.css --><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet"><!-- 核心样式 --><link rel="stylesheet" href="./css/index.css">
</head><body><!-- 主体区域 --><div class="container"><!-- 头部标题和添加按钮 --><div class="top"><h3>图书管理</h3><button type="button" class="btn btn-primary plus-btn" data-bs-toggle="modal" data-bs-target=".add-modal"> + 添加</button></div><!-- 数据列表 --><table class="table"><thead class="table-light"><tr><th style="width: 150px;">序号</th><th>书名</th><th>作者</th><th>出版社</th><th style="width: 180px;">操作</th></tr></thead><tbody class="list"></tbody></table></div><!-- 新增-弹出框 --><div class="modal fade add-modal"><!-- 中间白色区域 --><div class="modal-dialog"><div class="modal-content"><div class="modal-header top"><span>添加图书</span><button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button></div><div class="modal-body form-wrap"><!-- 新增表单 --><form class="add-form"><div class="mb-3"><label for="bookname" class="form-label">书名</label><input type="text" class="form-control bookname" placeholder="请输入书籍名称" name="bookname"></div><div class="mb-3"><label for="author" class="form-label">作者</label><input type="text" class="form-control author" placeholder="请输入作者名称" name="author"></div><div class="mb-3"><label for="publisher" class="form-label">出版社</label><input type="text" class="form-control publisher" placeholder="请输入出版社名称" name="publisher"></div></form></div><div class="modal-footer btn-group"><button type="button" class="btn btn-primary" data-bs-dismiss="modal"> 取消 </button><button type="button" class="btn btn-primary add-btn"> 保存 </button></div></div></div></div><!-- 编辑-弹出框 --><div class="modal fade edit-modal"><!-- 中间白色区域 --><div class="modal-dialog"><div class="modal-content"><div class="modal-header top"><span>编辑图书</span><button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button></div><div class="modal-body form-wrap"><!-- 编辑表单 --><form class="edit-form"><input type="hidden" class="id" name="id"><div class="mb-3"><label for="bookname" class="form-label">书名</label><input type="text" class="form-control bookname" placeholder="请输入书籍名称" name="bookname"></div><div class="mb-3"><label for="author" class="form-label">作者</label><input type="text" class="form-control author" placeholder="请输入作者名称" name="author"></div><div class="mb-3"><label for="publisher" class="form-label">出版社</label><input type="text" class="form-control publisher" placeholder="请输入出版社名称" name="publisher"></div></form></div><div class="modal-footer btn-group"><button type="button" class="btn btn-primary" data-bs-dismiss="modal"> 取消 </button><button type="button" class="btn btn-primary edit-btn"> 修改 </button></div></div></div></div><script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.0/axios.min.js"></script><script src="./lib/form-serialize.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.min.js"></script><!-- 核心逻辑 --><script>// 数据渲染
const list = document.querySelector('.list')
function addData() {axios({url: 'http://hmajax.itheima.net/api/books',params: {creator: 'Tom'}}).then(res => {const arr = res.data.dataconst str = arr.map(item => {return `<tr><td>${item.id}</td><td>${item.bookname}</td><td>${item.author}</td><td>${item.publisher}</td><td><span class="del">删除</span><span class="edit">编辑</span></td></tr>`})document.querySelector('.list').innerHTML = str})
}
addData()
// 数据添加
// 添加按钮
const plusBtn = document.querySelector('.plus-btn')
// 添加弹窗
const addModal = document.querySelector('.add-modal')
const aModal = new bootstrap.Modal(addModal)
const addForm = document.querySelector('.add-form')
plusBtn.addEventListener('click', () => {aModal.show()// 保存添加const addBtn = document.querySelector('.add-btn')addBtn.addEventListener('click', () => {const { bookname, author, publisher } = serialize(addForm, { hash: true, empty: true })const data = {bookname,author,publisher,creator: 'Tom'}axios({url: 'http://hmajax.itheima.net/api/books',method: 'post',data}).then(res => {aModal.hide()addForm.reset()addData()})})
})
// 删除数据
const editModal = document.querySelector('.edit-modal')
const eModal = new bootstrap.Modal(editModal)
const editBtn = document.querySelector('.edit-btn')
const editForm = document.querySelector('.edit-form')
list.addEventListener('click', (e) => {if (e.target.classList.contains('del')) {const id = e.target.parentNode.parentNode.children[0].innerHTMLaxios({url: `http://hmajax.itheima.net/api/books/${id}`,method: 'delete'}).then(res => {addData()})}//编辑数据if (e.target.classList.contains('edit')) {const id = e.target.parentNode.parentNode.children[0].innerHTMLconst children = e.target.parentNode.parentNode.childrenconsole.log(children)const bookname = children[1].innerHTMLconst author = children[2].innerHTMLconst publisher = children[3].innerHTMLeModal.show()editForm.querySelector('input[name="bookname"]').value = booknameeditForm.querySelector('input[name="author"]').value = authoreditForm.querySelector('input[name="publisher"]').value = publishereditBtn.addEventListener('click', () => {const { bookname, author, publisher } = serialize(editForm, { hash: true, empty: true })const data = {bookname,author,publisher,creator: 'Tom'}axios({url: `http://hmajax.itheima.net/api/books/${id}`,method: 'put',data}).then(res => {eModal.hide()addData()editForm.reset()})})}
})</script>
</body></html>