目录
功能介绍
核心代码解析
源码：新增图书功能
总结
本项目基于 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 组件应用 等知识。
- 可直接修改代码，扩展功能，如 删除、编辑、搜索 等。
本项目适合作为 图书管理系统前端示例，可用于学习 前后端交互 相关技术，有助于理解 前端数据请求和动态渲染 的基本原理。
