* BootStrap彈框

功能：不離開當前頁面，顯示單獨內容，供用戶操作

步驟：

1、引入bootstrap.css和bootstrap.js

2、準備彈框標簽，確認結構

3、通過自定義屬性，控制彈框的顯示和隱藏

其中的bootstrap.css鏈接為：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

bootstrap鏈接為：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

以下是模板代碼：

      <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body">...</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>

利用自定義屬性控制彈框的顯示和隱藏

data-bs-toggle="modal"

data-bs-target="#exampleModal"

示例的按鈕：

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch demo modal
</button>

如果使用js進行控制：

        //創建彈框對象const modal=new bootstrap.Modal('css選擇器')//顯示彈框modal.show()//隱藏彈框modal.hide()

1、渲染列表

自己的圖書數據：給自己起個外號，并告訴服務器，默認會有三本書，基于這三本書做數據的增刪改查

其中的圖書列表接口為：

http://ajax-api.itheima.net/api/books

首先基本的html與css代碼為以下：

    <!-- 操作列 --><div class="head"><h1 class="title">圖書管理</h1><button class="add_btn">添加</button></div>

    <!-- 圖書管理列表 --><table><thead><tr><th>序號</th><th>書名</th><th>作者</th><th>出版社</th><th>操作</th></th></thead><tbody><!-- <tr><th>1</th><th>《java程序設計》</th><th>xxx</th><th>高等教育出版社</th><th><span class="del">刪除</span><span class="edi">編輯</span></th></tr> --></tbody></table>

以下代碼為使用BooyStrap的添加圖書彈窗

    <!-- 添加圖書彈窗 --><div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h1 class="modal-title fs-5" id="exampleModalLabel">圖書管理</h1><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><div>書名</div><input class="bookname" type="text" placeholder="請輸入書籍名稱"><div>作者</div><input class="author" type="text" placeholder="請輸入作者名稱"><div>出版社</div><input class="publisher" type="text" placeholder="請輸入出版社名稱"></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button><button type="button" class="btn btn-primary">確定</button></div></div></div></div>

下面為添加圖書的js部分：

        const tbody=document.querySelector('tbody')function getBook() {axios({url:'http://ajax-api.itheima.net/api/books'}).then(res => {console.log(res)tbody.innerHTML=res.data.data.map((item,index) =>`<tr><th>${index+1}</th><th>${item.bookname}</th><th>${item.author}</th><th>${item.publisher}</th><th class='${item.id}'><span class="del">刪除</span><span class="edi">編輯</span></th></tr>`)})}getBook()// 添加圖書操作//創建彈框對象const modal=new bootstrap.Modal('.modal')const add_btn=document.querySelector('.add_btn')        const bookDec=document.querySelectorAll('.modal-body input')//顯示彈框        add_btn.addEventListener('click',() => {for(let i=0;i<bookDec.length;i++){bookDec[i].value=null}modal.show() })// 添加圖書操作document.querySelector('.btn-primary').addEventListener('click',() =>{axios({url:'http://ajax-api.itheima.net/api/books',method:'post',data:{bookname: bookDec[0].value,author:bookDec[1].value,publisher:bookDec[2].value}}).then(res => {getBook()modal.hide()})})

2、刪除數據

當點擊刪除按鈕時，該行的數據將會被刪除，并在頁面中重新渲染

        // 刪除操作document.querySelector('tbody').addEventListener('click',e => {if(e.target.className==='del'){console.log(e.target.parentNode.className);const id=e.target.parentNode.classNameaxios({url:`http://ajax-api.itheima.net/api/books/${id}`,method:'delete'}).then(res => {getBook()})}})

3、修改數據

修改數據部分包括了數據回顯以及修改數據

當點擊編輯按鈕時，會彈出編輯圖書彈框

      <!-- 編輯圖書彈窗 --><div class="modal fade modal_edi" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h1 class="modal-title fs-5" id="exampleModalLabel">圖書管理</h1><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body modal_body_edi"><div>書名</div><input class="bookname" type="text" placeholder="請輸入書籍名稱"><div>作者</div><input class="author" type="text" placeholder="請輸入作者名稱"><div>出版社</div><input class="publisher" type="text" placeholder="請輸入出版社名稱"></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button><button type="button" class="btn btn-primary edi_btn">修改</button></div></div></div></div>

再修改數據后，點擊修改按鈕，將進行修改

       // 點擊編輯，獲取圖書信息const modal_edi=new bootstrap.Modal('.modal_edi')const modal_body_edi=document.querySelectorAll('.modal_body_edi input')document.querySelector('tbody').addEventListener('click',e => {if(e.target.className==='edi'){modal_edi.show()console.log(e.target.parentNode.parentNode.children[0]);const id=e.target.parentNode.classNameaxios({url:`http://ajax-api.itheima.net/api/books/${id}`}).then(res => {console.log(res.data.data)modal_body_edi[0].value=res.data.data.booknamemodal_body_edi[1].value=res.data.data.authormodal_body_edi[2].value=res.data.data.publisher//點擊修改按鈕，對圖書信息進行修改document.querySelector('.edi_btn').addEventListener('click',() => {axios({url:`http://ajax-api.itheima.net/api/books/${id}`,method:'put',data:{bookname:modal_body_edi[0].value,author:modal_body_edi[1].value,publisher:modal_body_edi[2].value}}).then(edi_res =>{getBook()})modal_edi.hide()})}).catch(err => console.log(err))}})

* 圖片上傳

1、獲取圖片文件對象

2、使用FormData攜帶圖片文件

const fd=new FormData()
fd.append(參數名,值)

3、提交表單數據到服務器，使用圖片url網址