目錄

核心功能

源碼介紹

1. 獲取圖書列表

技術要點

適用人群

---

本項目是一個基于 HTML + Bootstrap + JavaScript + Axios 開發的圖書管理系統，可用于 添加、編輯、刪除和管理圖書信息，適合前端開發者學習 前端交互設計、Axios 數據請求 以及 Bootstrap 樣式布局。

---

核心功能

1. 圖書列表渲染

   • 通過 Axios 發送 GET 請求獲取服務器上的圖書數據。
   • 渲染數據到 HTML 表格，展示書籍的名稱、作者、出版社等信息。

2. 新增圖書

   • 點擊“添加”按鈕，彈出 Bootstrap Modal 模態框，填寫書名、作者、出版社等信息。
   • 提交后，數據會通過 Axios 發送到服務器并更新列表。

3. 編輯圖書

   • 點擊“編輯”按鈕，彈出模態框，填充已有數據，可修改后提交更新。

4. 刪除圖書

   • 點擊“刪除”按鈕，發送 DELETE 請求移除圖書，并自動刷新列表。

---

源碼介紹

1. 獲取圖書列表（index.js）

在網頁加載時，調用 getBookList() 發送 GET 請求，獲取圖書數據并渲染到頁面。

function getBookList() {axios({url: "http://hmajax.itheima.net/api/books",method: "get", params: {creator: "小寧", // 傳遞查詢參數},}).then((result) => {const bookList = result.data.data;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><span class="del">刪除</span><span class="edit">編輯</span></td></tr>`;}).join('');document.querySelector('.list').innerHTML = htmlStr;});
}// 頁面加載時自動獲取圖書列表
getBookList();

---

技術要點

1. Axios 數據請求

   • 采用 Axios 進行數據交互，GET 請求獲取數據，POST 發送新增數據，PUT 修改數據，DELETE 刪除數據。

2. Bootstrap 樣式

   • 采用 Bootstrap 美化界面，table 表格展示書籍信息，modal 實現彈出框功能。

3. DOM 操作

   • 通過 document.querySelector() 和 innerHTML 更新界面，響應用戶操作。

4. 事件監聽

   • 綁定 點擊事件 觸發新增、編輯、刪除操作。

---

適用人群

? 前端開發初學者
? 想要學習 Axios 數據交互 的開發者
? 需要快速搭建管理系統的開發者

🔥 趕快下載源碼學習吧！ 🚀