ajax图书管理项目
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弹框 不离开当前页面，显示单独内容，让用户操作 功能：不离开当前页面，显示单独内容，供用户操作步骤： 1.引入bootstrap.css和bootstrap.js …...
深入理解 Java SPI - 概念、原理、应用
零、前言 在当今互联网时代，应用程序越来越复杂，对于我们开发人员来说，如何实现高效的组件化和模块化已经成为了一个重要的问题。而 Java SPI（Service Provider Interface）机制，作为一种基于接口的服务发现…...
JavaScript - 判断数组中是否包含某个的元素的几种方式
目录 1. 使用 includes 方法 2. 使用 indexOf 方法 3. 使用 find 方法 4. 使用 some 方法 5. 使用 filter 方法 6. 使用 every 方法 应该算是前端开发过程中比较常用的基本操作，话不多说，看代码。 1. 使…...
如何用AI颠覆企业未来：从大企业到中小型企业的实战攻略
如何用AI颠覆企业未来：从大企业到中小型企业的实战攻略 AI大佬经验分享：聊聊企业定制化AI需求和应用场景 今天想跟大家聊聊我在AI领域的一些经验和见解，希望能对大家有所启发。最近，不少企业都对AI很感兴趣，我也经常…...
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调整分区，在线调整分区…...
C++ 函数模板和类模板
参考视频：C类模板_哔哩哔哩_bilibili 遗留问题：编译器怎么处理函数模板和类模板 目录 一、为什么会有函数模版？函数模板是为了解决什么问题？ 二、函数模板的概念 三、函数模版的使用 四、函数模板的特化 五、类模板的概念 …...
安卓Termux系统设备安装内网穿透工具实现远程使用SFTP传输文件
文章目录 前言1. 安装openSSH2. 安装cpolar3. 远程SFTP连接配置4. 远程SFTP访问4. 配置固定远程连接地址 前言 本教程主要介绍如何在安卓 Termux 系统中使用 SFTP 文件传输，并结合cpolar内网穿透工具生成公网地址，轻松实现无公网IP环境远程传输…...
文件属性获取
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…...
C:冒泡排序
1、冒泡排序介绍： 冒泡排序的核心思想就是：两两相邻的元素进行比较。 先用一个例子来帮助大家理解一下冒泡排序的算法是怎们进行的 有一排高矮不同的人站成一列，要按照从矮到高的顺序重新排队。 冒泡排序的方法就是，从第一个人…...
探秘C# LINQ元素运算：原理阐释与实践指南
文章目录 一、LINQ元素运算符概述二. ElementAt 和 ElementAtOrDefault三. First 和 FirstOrDefault四. Last 和 LastOrDefault五. Single 和 SingleOrDefault六. Where 和 Select七、实际应用场景示例总结 LINQ（Language-Integrated Query）是C#中强大且…...
根据bean的名称获取bean，静态方法查询数据库
根据bean名称获取bean 1.先创建bean，如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…...
剪画小程序：音频剪辑新手入门：基础操作指南！
亲爱的小伙伴们，你是否对音频剪辑充满好奇，却不知道从何下手？今天，就让我们用【剪画】一起揭开音频剪辑基础操作的神秘面纱！ 音频拼接——打造个性音乐串烧 音频拼接是将多个音频片段组合在一起，创造出独特…...
IDEA中maven jar下载失败问题处理
前言 对于在IDEA中maven爆红问题，主要分为两类，一个是全部爆红，一个是部分爆红。 全部爆红 这类问题主要是maven配置没有搞好，可以根据下列步骤自查 1.配置好国内的Maven源 第一步:打开IDEA，查看配置 第二步: 检查…...
C++中，函数返回const类型有什么作用，请举例说明
在C中，函数返回const类型的主要作用是确保返回的对象不会被修改。这种保护机制增强了代码的健壮性和可维护性，尤其是在你希望保证函数返回的数据不被意外篡改时。下面通过几个例子来说明函数返回const类型的作用。 例子 1: 返回常量引用 当你从函数中返…...
Html详解——Vue基础
HTML是什么？ 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表…...
【安规电容知识点总结】
安规电容知识点总结 安规电容简介安规电容的种类X电容和Y电容X电容和Y电容示意图安规电容的型号与应用安规电容简介 安规电容：是指用于这样的场合，即电容器失效后，不会导致电击，不会危及到人身安全。 具体来说，所谓安规电容是一种与普通电容相比符合安全认证的电容，故称…...
R9000P 双系统安装 win11 和 ubuntu
网上了解到一堆关于 r9000p 安装较老的ubuntu系统，会有一堆问题 可能是电脑硬件比较新，较老的系统相关方面不兼容 那么干脆直接装新一点的系统 我安装了 Ubuntu 22.04 1 根据相关教程利用u盘制作系统盘 ultraISO 推荐使用清华源 速度快一点 https://…...
8月8日笔记
8月8日笔记 msf常见命令 启动MSF控制台 msfconsole: 启动MSF控制台。msfconsole -h: 显示帮助菜单。msfconsole -q: 启动MSF控制台并立即退出。 导航和管理 back: 返回上一级菜单。exit: 退出MSF控制台。banner: 显示MSF的横幅。cd: 更改工作目录。color: 开启或关闭彩色输…...
【单片机开发软件】使用VSCode开发STM32环境搭建
💌 所属专栏：【单片机开发软件技巧】 😀 作 者： 于晓超 🚀 个人简介：嵌入式工程师，专注嵌入式领域基础和实战分享 ，欢迎咨询！ 💖 欢迎大家࿱…...
第十五届蓝桥杯大赛青少组——赛前解析（算法）
算法：进制转换、模拟算法，枚举算法，冒泡排序，插入排序，选择排序，递推算法，递归算法，贪心算法。 1.进制转换 二进制：只包含0和1 八进制：只包含0-7 十进制&…...
铭豹扩展坞 USB转网口 突然无法识别解决方法
当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指：像函数调用/返回一样轻量地完成任务切换。 举例说明： 当你在程序中写一个函数调用： funcA() 然后 funcA 执行完后返回&…...
蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练
前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)：从基础到实战的深度解析-CSDN博客，但实际面试中，企业更关注候选人对复杂场景的应对能力（如多设备并发扫描、低功耗与高发现率的平衡）和前沿技术的…...
)
GitHub 趋势日报 (2025年06月08日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...
【JavaSE】绘图与事件入门学习笔记
-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角，以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向，距离坐标原点x个像素;第二个是y坐标，表示当前位置为垂直方向，距离坐标原点y个像素。 坐标体系-像素 …...
什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南
文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果
代理篇12|深入理解 Vite中的Proxy接口代理配置
在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...
蓝桥杯 冶炼金属
原题目链接 🔧 冶炼金属转换率推测题解 📜 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V，是一个正整数，表示每 V V V 个普通金属 O O O 可以冶炼出 …...
论文笔记——相干体技术在裂缝预测中的应用研究
目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术：基于互相关的相干体技术（Correlation）第二代相干体技术：基于相似的相干体技术（Semblance）基于多道相似的相干体…...
NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合
在汽车智能化的汹涌浪潮中，车辆不再仅仅是传统的交通工具，而是逐步演变为高度智能的移动终端。这一转变的核心支撑，来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒（T-Box）方案：NXP S32K146 与…...