欢迎来到“雪碧聊技术”CSDN博客！
在这里，您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者，还是具有一定经验的开发者，相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导，我将不断探索Java的深邃世界，分享最新的技术动态、实战经验以及项目心得。
让我们一同在Java的广阔天地中遨游，携手提升技术能力，共创美好未来！感谢您的关注与支持，期待在“雪碧聊技术”与您共同成长！
目录
一、案例介绍
1、需要完成的功能
2、步骤
①学习Bootstrap弹框的使用
②渲染列表（查）
③新增图书（增）
④删除图书（删）
⑤编辑图书（改）
二、Bootstrap弹框的使用
1、Bootstrap弹框的入门1：通过属性控制弹框的显示/隐藏
①引入bootstrap.css和bootstrap.js
②准备弹框标签
③通过给自定义按钮添加属性，控制弹框的显示和隐藏
效果展示：
2、Bootstrap弹框的入门2：通过JS控制弹框的显示/隐藏
①引入bootstrap.css和bootstrap.js
②准备弹框标签
③创建弹框对象
④通过弹框对象的.show()和.hide()方法，来控制弹框的显示/隐藏
举例：
三、图书管理-渲染列表
1、渲染图书列表
①通过axios直接查询图书列表
②将查询到的图书列表，渲染到页面上
接口文档
代码
2、新增图书
①解决弹框的显示/隐藏
②使用serialize插件，收集表单数据，然后提交到后端接口
③刷新图书列表
接口文档
代码
3、删除图书
4、编辑图书
结语
一、案例介绍
1、需要完成的功能
完成图书管理系统的增、删、改、查四个功能。
2、步骤
①学习Bootstrap弹框的使用
②渲染列表（查）
③新增图书（增）
④删除图书（删）
⑤编辑图书（改）
二、Bootstrap弹框的使用
1、Bootstrap弹框的入门1：通过属性控制弹框的显示/隐藏
①引入bootstrap.css和bootstrap.js
<!-- 引入bootstrap.css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"><!-- 引入bootstrap.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>②准备弹框标签
这是直接从bootstrap官网粘贴的：
<div class="modal" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">Modal title</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><p>Modal body text goes here.</p></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div></div>③通过给自定义按钮添加属性，控制弹框的显示和隐藏
第一步：给上一步复制的弹框，添加一个class选择器
第二步：给自定义按钮添加一些属性
第三步：给上一步复制的弹框的×按钮、取消按钮，添加属性
效果展示：
2、Bootstrap弹框的入门2：通过JS控制弹框的显示/隐藏
①引入bootstrap.css和bootstrap.js
②准备弹框标签
③创建弹框对象
④通过弹框对象的.show()和.hide()方法，来控制弹框的显示/隐藏
举例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入bootstrap.css --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body><button type="button" class="myButton">编辑姓名</button><div class="modal myBox" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">请输入姓名</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body">姓名：<input class="username"></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button><button type="button" class="btn btn-primary mySave">保存</button></div></div></div></div><!-- 引入bootstrap.js --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script><script>//1、创建弹框对象const modalDom = document.querySelector('.myBox')const modal = new bootstrap.Modal(modalDom)//点击“编辑姓名”-》显示弹框document.querySelector('.myButton').addEventListener('click', ()=>{//给姓名输入框一个默认值document.querySelector(".username").value = "默认姓名"//2、显示弹框modal.show()})//点击“保存”=》隐藏弹框document.querySelector('.mySave').addEventListener('click', ()=>{const username = document.querySelector(".username").valueconsole.log('模拟把姓名保存到服务器上', username)//2、隐藏弹框modal.hide()})</script>
</body>
</html>三、图书管理-渲染列表
1、渲染图书列表
①通过axios直接查询图书列表
②将查询到的图书列表，渲染到页面上
接口文档
代码
/*** 目标1：渲染图书列表* 1.1 获取数据* 1.2 渲染数据*/
const creator = 'casually'
// 封装-获取并渲染图书列表函数
function getBooksList() {// 1.1 获取数据axios({url: 'http://hmajax.itheima.net/api/books',params: {// 外号：获取对应数据creator}}).then(result => {// console.log(result)const bookList = result.data.data// console.log(bookList)// 1.2 渲染数据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('')// console.log(htmlStr)document.querySelector('.list').innerHTML = htmlStr})
}
// 网页加载运行，获取并渲染列表一次
getBooksList()运行效果：
2、新增图书
①解决弹框的显示/隐藏
②使用serialize插件，收集表单数据，然后提交到后端接口
③刷新图书列表
接口文档
代码
/*** 目标2：新增图书* 2.1 新增弹框->显示和隐藏* 2.2 收集表单数据，并提交到服务器保存* 2.3 刷新图书列表*/
// 2.1 创建弹框对象
const addModalDom = document.querySelector('.add-modal')
const addModal = new bootstrap.Modal(addModalDom)
// 保存按钮->点击->隐藏弹框
document.querySelector('.add-btn').addEventListener('click', () => {// 2.2 收集表单数据，并提交到服务器保存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 => {// console.log(result)// 2.3 添加成功后，重新请求并渲染图书列表getBooksList()// 重置表单addForm.reset()// 隐藏弹框addModal.hide()})
})运行效果：
3、删除图书
/*** 目标3：删除图书* 3.1 删除元素绑定点击事件->获取图书id* 3.2 调用删除接口* 3.3 刷新图书列表*/
// 3.1 删除元素->点击（事件委托）
document.querySelector('.list').addEventListener('click', e => {// 获取触发事件目标元素// console.log(e.target)// 判断点击的是删除元素if (e.target.classList.contains('del')) {// console.log('点击删除元素')// 获取图书id（自定义属性id）const theId = e.target.parentNode.dataset.id// console.log(theId)// 3.2 调用删除接口axios({url: `http://hmajax.itheima.net/api/books/${theId}`,method: 'DELETE'}).then(() => {// 3.3 刷新图书列表getBooksList()})}
})4、编辑图书
/*** 目标4：编辑图书* 4.1 编辑弹框->显示和隐藏* 4.2 获取当前编辑图书数据->回显到编辑表单中* 4.3 提交保存修改，并刷新列表*/
// 4.1 编辑弹框->显示和隐藏
const editDom = document.querySelector('.edit-modal')
const editModal = new bootstrap.Modal(editDom)
// 编辑元素->点击->弹框显示
document.querySelector('.list').addEventListener('click', e => {// 判断点击的是否为编辑元素if (e.target.classList.contains('edit')) {// 4.2 获取当前编辑图书数据->回显到编辑表单中const theId = e.target.parentNode.dataset.idaxios({url: `http://hmajax.itheima.net/api/books/${theId}`}).then(result => {const bookObj = result.data.data// document.querySelector('.edit-form .bookname').value = bookObj.bookname// document.querySelector('.edit-form .author').value = bookObj.author// 数据对象“属性”和标签“类名”一致// 遍历数据对象，使用属性去获取对应的标签，快速赋值const keys = Object.keys(bookObj) // ['id', 'bookname', 'author', 'publisher']keys.forEach(key => {document.querySelector(`.edit-form .${key}`).value = bookObj[key]})})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})// 保存正在编辑的图书id，隐藏起来：无需让用户修改// <input type="hidden" class="id" name="id" value="84783">axios({url: `http://hmajax.itheima.net/api/books/${id}`,method: 'PUT',data: {bookname,author,publisher,creator}}).then(() => {// 修改成功以后，重新获取并刷新列表getBooksList()// 隐藏弹框editModal.hide()})
})
结语
以上就是图书管理案例的全部内容，想了解更多axios知识，请关注本博主~~
