目录

功能介绍

核心代码解析

源码：新增图书功能

总结

本项目基于 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/[email protected]/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 组件应用 等知识。
• 可直接修改代码，扩展功能，如 删除、编辑、搜索 等。

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