黑馬程序員視頻地址：
AJAX-Day02-10.案例_圖書管理AJAX-Day02-10.案例_圖書管理_總結_V1.0是黑馬程序員前端AJAX入門到實戰全套教程，包含學前端框架必會的（ajax+node.js+webpack+git），一套全覆蓋的第25集視頻，該合集共計140集，視頻收藏或關注UP主，及時了解更多相關視頻內容。https://www.bilibili.com/video/BV1MN411y7pw?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.player.switch&p=25
https://www.bilibili.com/video/BV1MN411y7pw?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.player.switch&p=25
步驟一：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>?2. 準備彈框標簽，確認結構
<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）彈框顯示?
<!--第一步：觸發彈框，按鈕綁定自定義屬性：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）彈框隱藏
<!--給需要有隱藏效果的按鈕加上自定義屬性data-bs-dismiss="modal"-->
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>4.通過JS控制，控制彈框顯示或隱藏
1）彈窗顯示
//第一步：給彈窗模塊實例化，從而獲取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對象
console.dir(bootstrap)
2）彈窗隱藏
//保存按鈕綁定事件document.querySelector(".save-btn").addEventListener("click", () => {//隱藏彈框modal.hide()})步驟二：渲染列表（查）
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() //調用函數步驟三：新增圖書（增）
//創建彈窗對象
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("數據提交失敗，請重試")})})步驟四：刪除圖書（刪）
document.querySelector(".list").addEventListener("click", e => { //事件委托if(e.target.classList.contains("del")) //判斷觸發源{const theId = e.target.parentNode.dataset.idaxios({url: `https://hmajax.itheima.net/api/books/${theId}`, //以路徑方式提交數據method: "DELETE" //告訴服務器此次事件的方法}).then(result => {alert("成功刪除！")getData() //刷新數據}).catch(error => {alert("刪除失敗！")})}
})步驟五：編輯圖書（改）
//創建編輯彈窗實例對象
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.idaxios({url: `https://hmajax.itheima.net/api/books/${theId}`}).then(result => {//顯示數據const editData = result.data.dataconst 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("提交失敗！")})})
