图书管理系统 Axios 源码 __删除图书功能

目录

代码实现(index.js)

代码解析

使用方法


下面是完整的删除图书功能代码,基于 HTML + Bootstrap + JavaScript + Axios 开发。

代码实现(index.js)
javascript 复制代码
// 删除图书功能
document.querySelector('.list').addEventListener('click', (e) => {
  // 判断是否点击了删除按钮
  if (e.target.classList.contains('del')) {
    // 获取要删除的图书 ID
    const theId = e.target.parentNode.dataset.id;
    console.log(`即将删除的图书ID: ${theId}`);

    // 发送 DELETE 请求删除书籍
    axios({
      url: `http://hmajax.itheima.net/api/books/${theId}`,
      method: 'delete',
    }).then((result) => {
      console.log('删除成功', result);
      // 重新获取并渲染列表
      getBookList();
    }).catch((error) => {
      console.error('删除失败', error);
    });
  }
});
代码解析
  1. 事件委托 :监听 .list 表格区域,确保新添加的图书也能响应删除操作。
  2. 获取图书 ID :通过 e.target.parentNode.dataset.id 获取要删除的书籍 ID。
  3. 发送 DELETE 请求:使用 Axios 向服务器发送删除请求,成功后重新获取列表数据。
  4. 自动更新列表 :删除完成后,调用 getBookList() 让前端页面自动更新,无需手动刷新。
使用方法
  1. 在 HTML 页面中添加一个 .list 表格区域用于显示书籍列表,并确保 getBookList() 能正确渲染数据。
  2. 点击删除按钮时,触发 DELETE 请求,删除成功后自动更新界面。

该功能适合用于 图书管理系统、后台管理系统、前后端交互学习 ,帮助开发者理解 Axios 请求、事件委托、DOM 操作 等前端核心技术。

相关推荐
小小小小宇2 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊2 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习3 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
hero_heart3 小时前
vscode中c_cpp_properities.cpp文件生成和作用
ide·vscode·编辑器
涛哥码咖3 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖3 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水4 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐4 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06274 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台4 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue