图书管理系统 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 操作 等前端核心技术。

相关推荐
打不着的大喇叭26 分钟前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code32 分钟前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟34 分钟前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00001 小时前
Vue组件通信方式详解
前端·面试
呆呆的心1 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
百锦再1 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
susnm1 小时前
Dioxus 与数据库协作
前端·rust
优雅永不过时_v1 小时前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript