目录

核心功能

源码介绍

1. 获取图书列表

技术要点

适用人群

---

本项目是一个基于 HTML + Bootstrap + JavaScript + Axios 开发的图书管理系统，可用于 添加、编辑、删除和管理图书信息，适合前端开发者学习 前端交互设计、Axios 数据请求 以及 Bootstrap 样式布局。

---

核心功能

1. 图书列表渲染

   • 通过 Axios 发送 GET 请求获取服务器上的图书数据。
   • 渲染数据到 HTML 表格，展示书籍的名称、作者、出版社等信息。

2. 新增图书

   • 点击“添加”按钮，弹出 Bootstrap Modal 模态框，填写书名、作者、出版社等信息。
   • 提交后，数据会通过 Axios 发送到服务器并更新列表。

3. 编辑图书

   • 点击“编辑”按钮，弹出模态框，填充已有数据，可修改后提交更新。

4. 删除图书

   • 点击“删除”按钮，发送 DELETE 请求移除图书，并自动刷新列表。

---

源码介绍

1. 获取图书列表（index.js）

在网页加载时，调用 getBookList() 发送 GET 请求，获取图书数据并渲染到页面。

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="del">删除</span>
            <span class="edit">编辑</span>
          </td>
        </tr>`;
    }).join('');

    document.querySelector('.list').innerHTML = htmlStr;
  });
}

// 页面加载时自动获取图书列表
getBookList();

---

技术要点

1. Axios 数据请求

   • 采用 Axios 进行数据交互，GET 请求获取数据，POST 发送新增数据，PUT 修改数据，DELETE 删除数据。

2. Bootstrap 样式

   • 采用 Bootstrap 美化界面，table 表格展示书籍信息，modal 实现弹出框功能。

3. DOM 操作

   • 通过 document.querySelector() 和 innerHTML 更新界面，响应用户操作。

4. 事件监听

   • 绑定 点击事件 触发新增、编辑、删除操作。

---

适用人群

✅ 前端开发初学者
✅ 想要学习 Axios 数据交互 的开发者
✅ 需要快速搭建管理系统的开发者

🔥 赶快下载源码学习吧！ 🚀