目录

功能介绍

核心代码解析

源码：新增图书功能

总结

---

本项目基于 HTML、Bootstrap、JavaScript 和 Axios 开发，实现了图书的增删改查功能。以下是新增图书的功能实现，适合前端开发学习和项目实践。

---

功能介绍

用户可以通过 模态框（Modal） 添加新图书，提交数据后，使用 Axios 发送 POST 请求 将数据存储到服务器，并实时更新图书列表。

---

核心代码解析

• 控制模态框：使用 bootstrap.Modal 控制新增图书窗口的显示与隐藏。
• 收集表单数据：利用 serialize 方法获取表单数据并转换为对象。
• 发送 Axios POST 请求：提交书名、作者、出版社等信息到服务器。
• 数据提交成功后处理：
  • 刷新图书列表，显示最新数据；
  • 重置表单，清空输入框内容；
  • 关闭模态框，返回主界面。

---

源码：新增图书功能（index.js）

javascript">    <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 组件应用 等知识。
• 可直接修改代码，扩展功能，如 删除、编辑、搜索 等。

本项目适合作为 图书管理系统前端示例，可用于学习 前后端交互 相关技术，有助于理解 前端数据请求和动态渲染 的基本原理。