当前位置： 首页 > news >正文

ajax图书管理项目

news 2026/4/8 22:38:45

bootstrap弹框

不离开当前页面，显示单独内容，让用户操作

 功能：不离开当前页面，显示单独内容，供用户操作步骤：
1.引入bootstrap.css和bootstrap.js                                                                                                    2.准备弹框标签，确认结构
3.通过自定义属性，控制弹框的显示和隐藏

<body> 
<button type="button" class ="btn btn-primary"
data-bs-toggle="model" data-bs-target=".my-box">显示弹框
</button>
<div class="modal my-box" tabindex="-1"><div class="modal-dialog"><!--弹框-内容--><div class="modal-content"><!--弹框-头部--><div class="modal-header"><h5 class="modal-title">Modal title</h5><button type="button" class="btn-close"data-bs-dismiss="modal" aria-label="Close"></button></div><!--弹框-身体--><div class="modal-body">.</div><!--弹框-底部--><div class="modal-footer"><button type="button" class="btn btn-secondary"data-bs-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Savechanges</button></div></div></div>
</div>

可能会出现一些问题，可能因为你用的版本4的，里面没用bs-，把属性data-dismiss改为data-bs-dismiss就行了

和JS的适配

  • 通过属性控制，弹框显示或隐藏
  • 通过JS控制，弹框显示或隐藏

有这样一串代码

//创建弹框对象
const modalDom = document.queryselector('css选择器')
const modal = new bootstrap.Modal(modelDom)
//显示弹框
modal.show()
//雌就弹框
modal.hide()
<div class="modal name-box" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">请输入姓名</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><form action=""><span>姓名：</span><input type="text" class="username"></form></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button><button type="button" class="btn btn-primarysave-btn">保存</button></div></div></div>
</div><!--导入bootstrap.js -->
<script>
//1.创建弹框对象
const modalDom = document.querySelector('.name-box')
const modal = new bootstrap.Modal(modalDom)
//编辑姓名->点击->赋予默认姓名->弹框显示
document.querySelector('.edit-btn').addEventListener('click', () => {document.querySelector('.username').value = '默认姓名'//2.显示弹框modal.show()})
//保存->点击->->获取姓名打印->弹框隐藏
document.querySelector('. save-btn').addEventlistener('click', () => {const username = document.querySelector('.username').valueconsole.log('模拟把姓名保存到服务器上'，username)//2.隐藏弹框modal.hide()})
</script>

图书管理渲染列表

/**目标1：渲染图书列表* 1.1获取数据*1.2渲染数据
**/
const creator = '老张'
// 封装 - 获取并渲染图书列表函数
function getBooksList() {//1.1获取数据axios({url: 'http: //hmajax.itheima.net/api/books',params: {// 外号：获取对应数据creator}}).then(result => {console.log(result)const bookList = result.data.dataconsole.log(bookList)//1.2渲染数据const htmlStr = bookList.map((item, index) => {return `<tr>
<td>${index + 1}</td>
<td>${item.bookname}</td>
<td>${item.author}</td>
<td>${item.publisher}</td>
<td>
<span class="del">删除</span>
<span class="edit">编辑</span>
</td>
</tr>`
}).join('')console.log(htmlStr)
document. querySelector('.list'). innerHTML = htmlStr})// 网页加载运行，获取并渲染列表一次getBooksList()

CUDA常见的 

添加数据
const addModalDom = document.querySelector('.add-modal')
const addModal = new bootstrap.Modal(addModalDom)
// 保存按钮 -> 点击 -> 隐藏弹框
document.querySelector('.add-btn').addEventListener('click', () => {//2.2收集表单数据，并提交到服务器保存const addForm = document.querySelector('.add-form')const bookObj = serialize(addForm, { hash: true, empty: true })console.log(bookObj)//提交到服务器axios({url: 'http: //hmajax.itheima.net/api/books',method: 'POST',data: {...book0bj,creator}}).then(result => {console.log(result)//2.3添加成功后，重新请求并渲染图书列表getBooksList()//重置表单addForm.reset()//隐藏弹框addModal.hide()})
删除数据
/* 目标3：删除图书* 3.1删除元素绑定点击事件 -> 获取图书id*3.2调用删除接口* 3.3刷新图书列表*/
//3.1删除元素->点击（事件委托）
document.querySelector('.list').addEventListener('click', e => {//获取触发事件目标元素// console.log(e.target)//判断点击的是删除元素if (e.target.classList.contains('del')) {//console.log('点击删除元素')// 获取图书id(自定义属性id)const theId = e.target.parentNode.dataset.idconsole.log(theId)//3.2调用删除接口axios({url: `http://hmajax.itheima.net/api/books/${theId}`,method: 'DELETE'}).then()=> {//3.3刷新图书列表getBooksList()})}
})
编辑图书
/**
* 目标4：编辑图书* 4.1编辑弹框 -> 显示和隐藏* 4.2获取当前编辑图书数据 -> 回显到编辑表单中* 4.3提交保存修改，并刷新列表*/
//4.1编辑弹框->显示和隐藏
const editDom = document.querySelector('.edit-modal')
const editModal = new bootstrap.Modal(editDom)
//编辑元素->点击->弹框显示
document.querySelector('.list').addEventListener('click', e => {//判断点击的是否为编辑元素if (e.target.classlist.contains('edit')) {const theId=e.target.parentNode.dataset.idaxios({url:`http://hmajax.itheima.net/api/books/${theId}`}).then(result=>{const bookObj=result.data.datadocument.querySelector('.edit-form.bookname').value=bookObj.booknamedocument.querySelector('.edit-form.author').value=author//因为默认的是GET方式，所以现在这个可以不写method//遍历数据对象，使用属性获取对应的标签，快速赋值const keys =Object.keys(bookObj)//['id','bookname','author','publisher']keys.foreach(key=>{document.querySelector(`.edit-form.${key}`.value=bookObj[key]// 为什么不能点key因为获取过来的是字符串})})editModal.show()}
})
//修改按钮->点击->隐藏弹框
document.querySelector('.edit-btn').addEventListener('click', ()
=> {//4.3提交保存修改，并刷新列表const editForm = document.querySelector('.edit-form')const bookObj = serialize(editForm, { hash: true, empty: true}) console.log(bookobj)// 保存正在编辑的图书id，隐藏起来：无需让用户修改// <input type="hidden" class="id" name="id" value="84783" axios（{url: `http://hmajax.itheima.net/api/books/{id}`,method:'PUT',data:{bookname,author,publisher,creator}
}).then(()=>{getBooksList()   editModal.hide()
})

happycat 

相关文章：

ajax图书管理项目

bootstrap弹框 不离开当前页面&#xff0c;显示单独内容&#xff0c;让用户操作 功能&#xff1a;不离开当前页面&#xff0c;显示单独内容&#xff0c;供用户操作步骤&#xff1a; 1.引入bootstrap.css和bootstrap.js …...

编程日记 2024/8/8 21:31:07

深入理解 Java SPI - 概念、原理、应用

零、前言 在当今互联网时代&#xff0c;应用程序越来越复杂&#xff0c;对于我们开发人员来说&#xff0c;如何实现高效的组件化和模块化已经成为了一个重要的问题。而 Java SPI&#xff08;Service Provider Interface&#xff09;机制&#xff0c;作为一种基于接口的服务发现…...

编程日记 2024/8/8 21:29:05

JavaScript - 判断数组中是否包含某个的元素的几种方式

目录​​​​​​​​​​​​​​ 1. 使用 includes 方法 2. 使用 indexOf 方法 3. 使用 find 方法 4. 使用 some 方法 5. 使用 filter 方法 6. 使用 every 方法​​​​​​​ 应该算是前端开发过程中比较常用的基本操作&#xff0c;话不多说&#xff0c;看代码。 1. 使…...

编程日记 2024/8/8 21:28:04

如何用AI颠覆企业未来：从大企业到中小型企业的实战攻略

如何用AI颠覆企业未来&#xff1a;从大企业到中小型企业的实战攻略 AI大佬经验分享&#xff1a;聊聊企业定制化AI需求和应用场景 今天想跟大家聊聊我在AI领域的一些经验和见解&#xff0c;希望能对大家有所启发。最近&#xff0c;不少企业都对AI很感兴趣&#xff0c;我也经常…...

编程日记 2024/8/8 21:27:03

Linux磁盘管理_LVM逻辑卷_SWAP交换分区_Centos-LVM格式磁盘扩容

目录 一、基本磁盘管理1.1 创建分区1.2 创建文件系统1.3 挂载mount1.4 查看挂载信息1.5 重启失效解决方式 二、逻辑卷LVM2.1 LVM2.2 创建LVM2.3 扩大卷组VG2.4 命令汇总 三、交换分区SWAP管理3.1 SWAP3.2 查看swap3.3 增加交换分区 四、Centos调整分区&#xff0c;在线调整分区…...

编程日记 2024/8/8 21:24:00

C++ 函数模板和类模板

参考视频&#xff1a;C类模板_哔哩哔哩_bilibili 遗留问题&#xff1a;编译器怎么处理函数模板和类模板 目录 一、为什么会有函数模版&#xff1f;函数模板是为了解决什么问题&#xff1f; 二、函数模板的概念 三、函数模版的使用 四、函数模板的特化 五、类模板的概念 …...

编程日记 2024/8/8 21:22:58

安卓Termux系统设备安装内网穿透工具实现远程使用SFTP传输文件

文章目录 前言1. 安装openSSH2. 安装cpolar3. 远程SFTP连接配置4. 远程SFTP访问4. 配置固定远程连接地址 前言 本教程主要介绍如何在安卓 Termux 系统中使用 SFTP 文件传输&#xff0c;并结合cpolar内网穿透工具生成公网地址&#xff0c;轻松实现无公网IP环境远程传输&#xf…...

编程日记 2024/8/8 21:21:56

文件属性获取

1、getpwuid函数 #include <stdio.h> #include <sys/types.h> #include <pwd.h> int main(int argc, char *argv[]) {uid_t uid 1000;struct passwd * pw getpwuid(uid);printf("name:%s gid:%d info:%s wd:%s shell:%s\n",pw->pw_name,pw-&g…...

编程日记 2024/8/8 21:18:53

C:冒泡排序

1、冒泡排序介绍&#xff1a; 冒泡排序的核心思想就是&#xff1a;两两相邻的元素进行比较。 先用一个例子来帮助大家理解一下冒泡排序的算法是怎们进行的 有一排高矮不同的人站成一列&#xff0c;要按照从矮到高的顺序重新排队。 冒泡排序的方法就是&#xff0c;从第一个人…...

编程日记 2024/8/8 21:16:51

探秘C# LINQ元素运算：原理阐释与实践指南

文章目录 一、LINQ元素运算符概述二. ElementAt 和 ElementAtOrDefault三. First 和 FirstOrDefault四. Last 和 LastOrDefault五. Single 和 SingleOrDefault六. Where 和 Select七、实际应用场景示例总结 LINQ&#xff08;Language-Integrated Query&#xff09;是C#中强大且…...

编程日记 2024/8/8 21:15:50

根据bean的名称获取bean，静态方法查询数据库

根据bean名称获取bean 1.先创建bean&#xff0c;如template package com.test.game.config;import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.jdbc.core.JdbcTemplate;import…...

编程日记 2024/8/8 21:13:48

剪画小程序：音频剪辑新手入门：基础操作指南！

亲爱的小伙伴们&#xff0c;你是否对音频剪辑充满好奇&#xff0c;却不知道从何下手&#xff1f;今天&#xff0c;就让我们用【剪画】一起揭开音频剪辑基础操作的神秘面纱&#xff01; 音频拼接——打造个性音乐串烧 音频拼接是将多个音频片段组合在一起&#xff0c;创造出独特…...

编程日记 2024/8/8 21:12:47

IDEA中maven jar下载失败问题处理

前言 对于在IDEA中maven爆红问题&#xff0c;主要分为两类&#xff0c;一个是全部爆红&#xff0c;一个是部分爆红。 全部爆红 这类问题主要是maven配置没有搞好&#xff0c;可以根据下列步骤自查 1.配置好国内的Maven源 第一步:打开IDEA&#xff0c;查看配置 第二步: 检查…...

编程日记 2024/8/8 21:11:46

C++中，函数返回const类型有什么作用，请举例说明

在C中&#xff0c;函数返回const类型的主要作用是确保返回的对象不会被修改。这种保护机制增强了代码的健壮性和可维护性&#xff0c;尤其是在你希望保证函数返回的数据不被意外篡改时。下面通过几个例子来说明函数返回const类型的作用。 例子 1: 返回常量引用 当你从函数中返…...

编程日记 2024/8/8 21:09:44

Html详解——Vue基础

HTML是什么&#xff1f; 超文本标记语言&#xff08;英语&#xff1a;HyperText Markup Language&#xff0c;简称&#xff1a;HTML&#xff09;是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是&#xff1a;一组段落、一个重点信息列表、也可以含有图片和数据表…...

编程日记 2024/8/8 21:07:42

【安规电容知识点总结】

安规电容知识点总结 安规电容简介安规电容的种类X电容和Y电容X电容和Y电容示意图安规电容的型号与应用安规电容简介 安规电容：是指用于这样的场合，即电容器失效后，不会导致电击，不会危及到人身安全。 具体来说，所谓安规电容是一种与普通电容相比符合安全认证的电容，故称…...

编程日记 2024/8/8 21:05:41

R9000P 双系统安装 win11 和 ubuntu

网上了解到一堆关于 r9000p 安装较老的ubuntu系统&#xff0c;会有一堆问题 可能是电脑硬件比较新&#xff0c;较老的系统相关方面不兼容 那么干脆直接装新一点的系统 我安装了 Ubuntu 22.04 1 根据相关教程利用u盘制作系统盘 ultraISO 推荐使用清华源 速度快一点 https://…...

编程日记 2024/8/8 21:04:40

8月8日笔记

8月8日笔记 msf常见命令 启动MSF控制台 msfconsole: 启动MSF控制台。msfconsole -h: 显示帮助菜单。msfconsole -q: 启动MSF控制台并立即退出。 导航和管理 back: 返回上一级菜单。exit: 退出MSF控制台。banner: 显示MSF的横幅。cd: 更改工作目录。color: 开启或关闭彩色输…...

编程日记 2024/8/8 21:03:39

【单片机开发软件】使用VSCode开发STM32环境搭建

&#x1f48c; 所属专栏&#xff1a;【单片机开发软件技巧】 &#x1f600; 作  者&#xff1a; 于晓超 &#x1f680; 个人简介&#xff1a;嵌入式工程师&#xff0c;专注嵌入式领域基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f496; 欢迎大家&#xff1…...

编程日记 2024/8/8 21:00:36

第十五届蓝桥杯大赛青少组——赛前解析（算法）

算法&#xff1a;进制转换、模拟算法&#xff0c;枚举算法&#xff0c;冒泡排序&#xff0c;插入排序&#xff0c;选择排序&#xff0c;递推算法&#xff0c;递归算法&#xff0c;贪心算法。 1.进制转换 二进制&#xff1a;只包含0和1 八进制&#xff1a;只包含0-7 十进制&…...

编程日记 2024/8/8 20:55:31

Redis持久化：从AOF到RDB，如何实现数据不丢失？耐

Qt是一个跨平台C图形界面开发库&#xff0c;利用Qt可以快速开发跨平台窗体应用程序&#xff0c;在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置&#xff0c;实现图形化开发极大的方便了开发效率&#xff0c;本笔记将重点介绍QSpinBox数值微调组件的常用方法及灵活应用。…...

编程新知 2026/4/8 22:05:47

DB1-05S05D 与 B0505D-1WR3 适配性实测｜工业电源选型无改板替换指南

在工业控制、仪器仪表、通信设备等场景的电源选型中&#xff0c;DB1-05S05D和B0505D-1WR3两款隔离型DC-DC电源模块&#xff0c;因相同的电压规格与封装形式&#xff0c;均成为工程师的常用选择。两者核心电气参数与应用场景高度契合&#xff0c;均可适配各类常规工业设备的供电…...

编程新知 2026/4/8 22:03:46

【权威实测｜2026.03.15 CPython核心团队签发】：Python原生AOT插件下载失败率骤降92%，但90%开发者仍卡在第2步安装验证

第一章&#xff1a;Python原生AOT编译方案2026插件下载与安装概览Python原生AOT&#xff08;Ahead-of-Time&#xff09;编译方案2026是CPython官方实验性路线图中的关键演进&#xff0c;旨在为Python代码提供零运行时依赖的二进制输出能力。该方案不依赖PyInstaller或Nuitka等第…...

编程新知 2026/4/8 21:13:15

哪款头戴式蓝牙耳机性价比高？十大热门平价头戴式耳机品牌推荐！

2026年头戴耳机市场新老品牌争奇斗艳&#xff0c;从入门到高端让人目不暇接。作为一名经历过选择困难的音频爱好者&#xff0c;我完全理解这种幸福的烦恼&#xff1a;参数术语堆砌、营销话术包装&#xff0c;让人难辨虚实。在实测过多款产品后&#xff0c;我发现关键要避开这些…...

编程新知 2026/4/8 20:48:59

原神玩家必备：Snap Hutao工具箱5大核心功能让游戏体验升级

原神玩家必备&#xff1a;Snap Hutao工具箱5大核心功能让游戏体验升级 【免费下载链接】Snap.Hutao 实用的开源多功能原神工具箱 &#x1f9f0; / Multifunctional Open-Source Genshin Impact Toolkit &#x1f9f0; 项目地址: https://gitcode.com/GitHub_Trending/sn/Snap…...

编程新知 2026/4/8 19:52:04

OpenVINO-Audacity插件：AI音频处理全流程加速指南

OpenVINO-Audacity插件&#xff1a;AI音频处理全流程加速指南 【免费下载链接】openvino-plugins-ai-audacity A set of AI-enabled effects, generators, and analyzers for Audacity. 项目地址: https://gitcode.com/gh_mirrors/op/openvino-plugins-ai-audacity Open…...

编程新知 2026/4/8 16:46:21

从零配置Livox Mid-360到Faster-LIO：一份给ROS Noetic新手的保姆级环境搭建清单

从零配置Livox Mid-360到Faster-LIO&#xff1a;一份给ROS Noetic新手的保姆级环境搭建清单 第一次接触Livox Mid-360激光雷达和SLAM算法时&#xff0c;我完全被各种依赖项和编译错误搞懵了。ROS Noetic环境下的配置过程就像走迷宫&#xff0c;稍有不慎就会陷入版本冲突、路径…...

编程新知 2026/4/8 16:27:36

余姚加工中心编程培训好的培训机构推荐

在浙江余姚这座"中国模具之城"&#xff0c;寻找一家优质的加工中心编程培训机构至关重要。舜龙模具数控培训作为当地一家有着28年历史的技术培训机构&#xff0c;值得考虑。舜龙模具数控培训概况舜龙模具数控培训成立于1998年&#xff0c;位于金型路33-5号&#xff0…...

编程新知 2026/4/8 15:58:46

HsMod：炉石传说终极模改插件，5个核心功能让游戏体验翻倍

HsMod&#xff1a;炉石传说终极模改插件&#xff0c;5个核心功能让游戏体验翻倍 【免费下载链接】HsMod Hearthstone Modification Based on BepInEx 项目地址: https://gitcode.com/GitHub_Trending/hs/HsMod 你是否曾经在炉石传说中感到等待时间过长&#xff1f;是否希…...

编程新知 2026/4/8 15:28:30

基于深度学习YOLOv12的蘑菇毒性检测系统（YOLOv12+YOLO数据集+UI界面+登录注册界面+Python项目源码+模型）

一、项目介绍 本项目基于 YOLOv12 深度学习目标检测算法&#xff0c;构建了一套高精度、高实时性的蘑菇毒性检测系统&#xff0c;旨在解决野生蘑菇误食导致的中毒风险问题。系统针对蘑菇的毒性分类需求&#xff0c;将检测目标划分为不可食用&#xff08;inedible&#xff09;、…...

编程新知 2026/4/8 12:55:01