黑马程序员视频地址：
https://www.bilibili.com/video/BV1MN411y7pw?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.player.switch&p=25步骤一：Bootstrap弹框
1. 引入bootstrap.css 和 bootstrap.js
html
<!-- 引入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>2. 准备弹框标签，确认结构
html
<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>3. 通过自定义属性，控制弹框的显示和隐藏
1）弹框显示
html
<!--第一步：触发弹框，按钮绑定自定义属性：data-bs-toggle="modal"和data-bs-target="CSS选择器"-->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".myalert">
显示弹框
</button>
<!-- 第二步：给弹框加上myalert类，以便区分同一页面不同弹窗 -->
<div class="modal myalert" tabindex="-1">
<!--省略代码好几行-->
</div>2）弹框隐藏
html
<!--给需要有隐藏效果的按钮加上自定义属性data-bs-dismiss="modal"-->
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>4.通过JS控制，控制弹框显示或隐藏
1）弹窗显示
javascript
//第一步：给弹窗模块实例化，从而获取show方法与hide方法
const modalDom = document.querySelector(".name-box")
const modal = new bootstrap.Modal(modalDom)
//编辑按钮绑定事件
document.querySelector(".edit-btn").addEventListener("click", () => {
//第二步：调用显示弹窗函数
modal.show()
})实例化（new）的作用：继承bootstraop.Modal原型对象里的方法，见下图观察bootstrap对象
javascript
console.dir(bootstrap)
2）弹窗隐藏
javascript
//保存按钮绑定事件
document.querySelector(".save-btn").addEventListener("click", () => {
//隐藏弹框
modal.hide()
})步骤二：渲染列表（查）
javascript
const creator = "USER_A001" //给服务器一个标识，用来获取某个用户的专属数据
function getData()
{
axios({
url: "https://hmajax.itheima.net/api/books",
params: {
creator
}
}).then(result => {
const bookList = result.data.data //将服务器返回的数据用一个数组来接收
const htmlStr = bookList.map((item, index) => { //map数组映射
return `
<tr>
<td>${index + 1}</td>
<td>${item.bookname}</td>
<td>${item.author}</td>
<td>${item.publisher}</td>
<td>
<span class="del">删除</span>
<span class="edit">编辑</span>
</td>
</tr>
`
}).join("") //join将数组用双引号内的东西拼接成字符串
document.querySelector(".list").innerHTML = htmlStr //将内容渲染到页面上
}).catch(error => {
console.log(error)
})
}
getData() //调用函数步骤三：新增图书（增）
javascript
//创建弹窗对象
const addModalDom = document.querySelector(".add-modal")
const addModal = new bootstrap.Modal(addModalDom)
//保存按钮绑定事件
document.querySelector(".add-btn").addEventListener("click", () => {
//获取表单数据
const addDataDom = document.querySelector(".add-form")
const addData = serialize(addDataDom, {hash: true, empty: true})
//向服务器提交数据
axios({
url: "https://hmajax.itheima.net/api/books",
method: "POST",
data: {
...addData,
creator
}
}).then(result => {
alert("数据提交成功")
//清除表单数据
addDataDom.reset()
//渲染数据
getData()
//隐藏弹窗
addModal.hide()
}).catch(error => {
alert("数据提交失败，请重试")
})
})步骤四：删除图书（删）
javascript
document.querySelector(".list").addEventListener("click", e => { //事件委托
if(e.target.classList.contains("del")) //判断触发源
{
const theId = e.target.parentNode.dataset.id
axios({
url: `https://hmajax.itheima.net/api/books/${theId}`, //以路径方式提交数据
method: "DELETE" //告诉服务器此次事件的方法
}).then(result => {
alert("成功删除！")
getData() //刷新数据
}).catch(error => {
alert("删除失败！")
})
}
})步骤五：编辑图书（改）
javascript
//创建编辑弹窗实例对象
const editModalDom = document.querySelector(".edit-modal")
const editModal = new bootstrap.Modal(editModalDom)
//编辑按钮绑定事件 事件委托
document.querySelector(".list").addEventListener("click", e => {
if(e.target.classList.contains("edit"))
{
//获取数据
const theId = e.target.parentNode.dataset.id
axios({
url: `https://hmajax.itheima.net/api/books/${theId}`
}).then(result => {
//显示数据
const editData = result.data.data
const key = Object.keys(editData) //获取对象的所有属性名
key.forEach(item => { //遍历数组，每遍历一次，将获取的数据赋值给拥有对应属性名的元素值
document.querySelector(`.edit-modal .${item}`).value = editData[item]
})
}).catch(error => {
alert("获取数据失败！")
})
//显示弹框
editModal.show()
}
})
//修改按钮绑定事件
document.querySelector(".edit-btn").addEventListener("click", () => {
//获取数据
const editDataDom = document.querySelector(".edit-form")
const {id, bookname, author, publisher} = serialize(editDataDom, {hash: true, empty: true}) //解构
//提交数据
axios({
url: `https://hmajax.itheima.net/api/books/${id}`,
method: "PUT", //看接口文档要求提交的方式，跟接口文档保持一致
data: { //为什么用data而不用params？接口文档要求的！
bookname,
author,
publisher,
creator
}
}).then(result => {
alert("修改成功！")
//关闭弹窗
editModal.hide()
//刷新数据
getData()
}).catch(error => {
alert("提交失败！")
})
})