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

相关推荐
web打印社区17 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗17 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长17 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅18 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_18 小时前
Chrome开发者工具
前端·chrome
YiHanXii18 小时前
this 输出题
前端·javascript·1024程序员节
楊无好18 小时前
React中ref
前端·react.js
维他命Coco18 小时前
js常见开发学习
javascript
程琬清君18 小时前
vue3 confirm倒计时
前端·1024程序员节
歪歪10019 小时前
在C#中详细介绍一下Visual Studio中如何使用数据可视化工具
开发语言·前端·c#·visual studio code·visual studio·1024程序员节