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

相关推荐
IDOOY1 分钟前
OSS-服务端签名Web端直传+STS获取临时凭证+POST签名v4版本开发过程中的细节
前端·oss·服务端验签直传·sts方式·java+oss-sts验签
Hilaku14 分钟前
“全栈”正在淘汰“前端”吗?一个前端专家的焦虑与思考
前端·面试·程序员
前端大卫18 分钟前
页面加载太慢?一文搞懂 JS 和 CSS 阻塞机制!
前端·javascript
十步杀一人_千里不留行22 分钟前
I Built an Offline-Capable App by Myself: React Native Frontend, C# Backend
前端·react native·typescript
SoaringHeart1 小时前
Flutter小技巧:IM音浪效果实现
前端·flutter
小old弟1 小时前
亲测autojs自动化,关闭应用的三种方法
前端
AndyLaw1 小时前
我用 ChatGPT 起手、脚本改造,给孩子做了一个绘本
前端·javascript·openai
放空欧巴1 小时前
学习 elpis 有感 -- 初识 elpis-core (实现简易版 Egg.js)
前端
前端开发呀1 小时前
震惊!开启浏览器翻译竟会导致react应用报错?
前端·react.js
Sun_light1 小时前
从 0 到 1 实现低代码编辑器的基本功能
前端·react.js·typescript