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

相关推荐
超级大只老咪16 分钟前
何为“类”?(Java基础语法)
java·开发语言·前端
你的人类朋友3 小时前
快速搭建redis环境并使用redis客户端进行连接测试
前端·redis·后端
深蓝电商API3 小时前
实战破解前端渲染:当 Requests 无法获取数据时(Selenium/Playwright 入门)
前端·python·selenium·playwright
bestcxx4 小时前
(二十七)、k8s 部署前端项目
前端·容器·kubernetes
鲸落落丶4 小时前
webpack学习
前端·学习·webpack
灰太狼大王灬4 小时前
Node.js 本地服务部署、常驻及调用完整笔记
笔记·node.js
excel5 小时前
深入理解 3D 火焰着色器:从 Shadertoy 到 Three.js 的完整实现解析
前端
光影少年5 小时前
vue打包优化方案都有哪些?
前端·javascript·vue.js
硅谷工具人5 小时前
vue3边学边做系列(3)-路由缓存接口封装
前端·缓存·前端框架·vue