目錄

功能介紹

核心代碼解析

源碼：新增圖書功能

總結

---

本項目基于 HTML、Bootstrap、JavaScript 和 Axios 開發，實現了圖書的增刪改查功能。以下是新增圖書的功能實現，適合前端開發學習和項目實踐。

---

功能介紹

用戶可以通過 模態框（Modal） 添加新圖書，提交數據后，使用 Axios 發送 POST 請求 將數據存儲到服務器，并實時更新圖書列表。

---

核心代碼解析

• 控制模態框：使用 bootstrap.Modal 控制新增圖書窗口的顯示與隱藏。
• 收集表單數據：利用 serialize 方法獲取表單數據并轉換為對象。
• 發送 Axios POST 請求：提交書名、作者、出版社等信息到服務器。
• 數據提交成功后處理：
  • 刷新圖書列表，顯示最新數據；
  • 重置表單，清空輸入框內容；
  • 關閉模態框，返回主界面。

---

源碼：新增圖書功能（index.js）

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.serializeJSON/3.2.1/jquery.serializejson.min.js"></script><script>// 目標：獲取并渲染圖書列表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="btn btn-danger btn-sm del">刪除</span><span class="btn btn-warning btn-sm edit">編輯</span></td></tr>`;}).join("");document.querySelector(".list").innerHTML = htmlStr;});}// 頁面加載時獲取并渲染列表getBookList();// 新增圖書功能const addModalDom = document.querySelector(".add-modal");const addModal = new bootstrap.Modal(addModalDom);document.querySelector(".save-btn").addEventListener("click", () => {const addForm = document.querySelector(".add-form");const bookData = $(addForm).serializeJSON(); // 序列化表單數據axios({url: "http://hmajax.itheima.net/api/books",method: "post",data: {bookname: bookData.bookname,author: bookData.author,publisher: bookData.publisher,creator: "小寧",},}).then(() => {getBookList(); // 重新渲染列表addForm.reset(); // 重置表單addModal.hide(); // 關閉模態框});});</script>

---

總結

1. 使用技術

• HTML + Bootstrap：構建界面
• JavaScript：處理交互
• Axios：發送 AJAX 請求

2. 主要功能

• 通過模態框（Modal）新增圖書
• 發送 POST 請求，將數據提交至服務器
• 提交成功后，自動更新圖書列表

3. 適用場景

• 適用于 前端初學者 和 項目開發者，可用于 學習 AJAX、Axios、Bootstrap 組件應用 等知識。
• 可直接修改代碼，擴展功能，如 刪除、編輯、搜索 等。

本項目適合作為 圖書管理系統前端示例，可用于學習 前后端交互 相關技術，有助于理解 前端數據請求和動態渲染 的基本原理。