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