AJAX综合案例——图书管理
黑马程序员视频地址:
AJAX-Day02-10.案例_图书管理AJAX-Day02-10.案例_图书管理_总结_V1.0是黑马程序员前端AJAX入门到实战全套教程,包含学前端框架必会的(ajax+node.js+webpack+git),一套全覆盖的第25集视频,该合集共计140集,视频收藏或关注UP主,及时了解更多相关视频内容。https://www.bilibili.com/video/BV1MN411y7pw?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.player.switch&p=25
https://www.bilibili.com/video/BV1MN411y7pw?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.player.switch&p=25
步骤一:Bootstrap弹框
1. 引入bootstrap.css 和 bootstrap.js
<!-- 引入bootstrap.css --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"><!-- 引入bootstrap.js --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>
2. 准备弹框标签,确认结构


<div class="modal" 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"><p>Modal body text goes here.</p></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">Save changes</button></div></div></div>
</div>
3. 通过自定义属性,控制弹框的显示和隐藏
1)弹框显示
<!--第一步:触发弹框,按钮绑定自定义属性:data-bs-toggle="modal"和data-bs-target="CSS选择器"-->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".myalert">显示弹框</button><!-- 第二步:给弹框加上myalert类,以便区分同一页面不同弹窗 --><div class="modal myalert" tabindex="-1"><!--省略代码好几行--></div>
2)弹框隐藏
<!--给需要有隐藏效果的按钮加上自定义属性data-bs-dismiss="modal"-->
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
4.通过JS控制,控制弹框显示或隐藏
1)弹窗显示
//第一步:给弹窗模块实例化,从而获取show方法与hide方法
const modalDom = document.querySelector(".name-box")
const modal = new bootstrap.Modal(modalDom)
//编辑按钮绑定事件
document.querySelector(".edit-btn").addEventListener("click", () => {//第二步:调用显示弹窗函数modal.show()
})
实例化(new)的作用:继承bootstraop.Modal原型对象里的方法,见下图观察bootstrap对象
console.dir(bootstrap)

2)弹窗隐藏
//保存按钮绑定事件document.querySelector(".save-btn").addEventListener("click", () => {//隐藏弹框modal.hide()})
步骤二:渲染列表(查)

const creator = "USER_A001" //给服务器一个标识,用来获取某个用户的专属数据
function getData()
{axios({url: "https://hmajax.itheima.net/api/books",params: {creator}}).then(result => {const bookList = result.data.data //将服务器返回的数据用一个数组来接收const htmlStr = bookList.map((item, index) => { //map数组映射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("") //join将数组用双引号内的东西拼接成字符串document.querySelector(".list").innerHTML = htmlStr //将内容渲染到页面上}).catch(error => {console.log(error)})
}getData() //调用函数
步骤三:新增图书(增)
//创建弹窗对象
const addModalDom = document.querySelector(".add-modal")
const addModal = new bootstrap.Modal(addModalDom)
//保存按钮绑定事件
document.querySelector(".add-btn").addEventListener("click", () => {//获取表单数据const addDataDom = document.querySelector(".add-form") const addData = serialize(addDataDom, {hash: true, empty: true})//向服务器提交数据axios({url: "https://hmajax.itheima.net/api/books",method: "POST",data: {...addData,creator}}).then(result => {alert("数据提交成功")//清除表单数据addDataDom.reset()//渲染数据getData()//隐藏弹窗addModal.hide()}).catch(error => {alert("数据提交失败,请重试")})})
步骤四:删除图书(删)
document.querySelector(".list").addEventListener("click", e => { //事件委托if(e.target.classList.contains("del")) //判断触发源{const theId = e.target.parentNode.dataset.idaxios({url: `https://hmajax.itheima.net/api/books/${theId}`, //以路径方式提交数据method: "DELETE" //告诉服务器此次事件的方法}).then(result => {alert("成功删除!")getData() //刷新数据}).catch(error => {alert("删除失败!")})}
})
步骤五:编辑图书(改)
//创建编辑弹窗实例对象
const editModalDom = document.querySelector(".edit-modal")
const editModal = new bootstrap.Modal(editModalDom)
//编辑按钮绑定事件 事件委托
document.querySelector(".list").addEventListener("click", e => {if(e.target.classList.contains("edit")){//获取数据const theId = e.target.parentNode.dataset.idaxios({url: `https://hmajax.itheima.net/api/books/${theId}`}).then(result => {//显示数据const editData = result.data.dataconst key = Object.keys(editData) //获取对象的所有属性名key.forEach(item => { //遍历数组,每遍历一次,将获取的数据赋值给拥有对应属性名的元素值document.querySelector(`.edit-modal .${item}`).value = editData[item]})}).catch(error => {alert("获取数据失败!")})//显示弹框editModal.show()}
})//修改按钮绑定事件
document.querySelector(".edit-btn").addEventListener("click", () => {//获取数据const editDataDom = document.querySelector(".edit-form")const {id, bookname, author, publisher} = serialize(editDataDom, {hash: true, empty: true}) //解构//提交数据axios({url: `https://hmajax.itheima.net/api/books/${id}`,method: "PUT", //看接口文档要求提交的方式,跟接口文档保持一致data: { //为什么用data而不用params?接口文档要求的!bookname,author,publisher,creator}}).then(result => {alert("修改成功!")//关闭弹窗editModal.hide()//刷新数据getData()}).catch(error => {alert("提交失败!")})})相关文章:
AJAX综合案例——图书管理
黑马程序员视频地址: AJAX-Day02-10.案例_图书管理AJAX-Day02-10.案例_图书管理_总结_V1.0是黑马程序员前端AJAX入门到实战全套教程,包含学前端框架必会的(ajaxnode.jswebpackgit),一套全覆盖的第25集视频,…...
JDK自带工具解析与生产问题定位指南(一)
1. 引言 Java开发工具包(JDK)内置了强大的诊断工具集,用于监控、分析和调试Java应用程序。这些工具涵盖了从进程管理、内存分析到性能监控的各个方面。本文将介绍一些最常用的Java开发工具,包括jps、jmap、jstat、jcmd、jstack、…...
FPGA 使用 CLOCK_DEDICATED_ROUTE 约束
使用 CLOCK_DEDICATED_ROUTE 约束 CLOCK_DEDICATED_ROUTE 约束通常在从一个时钟区域中的时钟缓存驱动到另一个时钟区域中的 MMCM 或 PLL 时使 用。默认情况下, CLOCK_DEDICATED_ROUTE 约束设置为 TRUE ,并且缓存 /MMCM 或 PLL 对必须布局在相同…...
《解锁AI黑科技:数据分类聚类与可视化》
在当今数字化时代,数据如潮水般涌来,如何从海量数据中提取有价值的信息,成为了众多领域面临的关键挑战。人工智能(AI)技术的崛起,为解决这一难题提供了强大的工具。其中,能够实现数据分类与聚类…...
Java小白入门教程:Object
目录 一、定义 二、作用 三、使用场景 四、语法以及示例 1、创建Object类型的对象 2、使用 toString()方法 3、使用 equals()方法 4、使用 hashCode()方法 5、使用 getClass()方法 6、使用 clone()方法 7、使用 finalize()方法 一、定义 在Java中, object…...
记6(人工神经网络
目录 1、M-P神经元2、感知机3、Delta法则4、前馈型神经网络(Feedforward Neural Networks)5、鸢尾花数据集——单层前馈型神经网络:6、多层神经网络:增加隐含层7、实现异或运算(01、10为1,00、11为0)8、线性…...
stm32硬件实现与w25qxx通信
使用的型号为stm32f103c8t6与w25q64。 STM32CubeMX配置与引脚衔接 根据stm32f103c8t6引脚手册,采用B12-B15四个引脚与W25Q64连接,实现SPI通信。 W25Q64SCK(CLK)PB13MOSI(DI)PB15MISO(DO)PB14CS(…...
编程题-最接近的三数之和
题目: 给你一个长度为 n 的整数数组 nums 和 一个目标值 target。请你从 nums 中选出三个整数,使它们的和与 target 最接近。 返回这三个数的和。 假定每组输入只存在恰好一个解。 解法一(排序双指针): 题目要求找…...
索引的底层数据结构、B+树的结构、为什么InnoDB使用B+树而不是B树呢
索引的底层数据结构 MySQL中常用的是Hash索引和B树索引 Hash索引:基于哈希表实现的,查找速度非常快,但是由于哈希表的特性,不支持范围查找和排序,在MySQL中支持的哈希索引是自适应的,不能手动创建 B树的…...
【工欲善其事】利用 DeepSeek 实现复杂 Git 操作:从原项目剥离出子版本树并同步到新的代码库中
文章目录 利用 DeepSeek 实现复杂 Git 操作1 背景介绍2 需求描述3 思路分析4 实现过程4.1 第一次需求确认4.2 第二次需求确认4.3 第三次需求确认4.4 V3 模型:中间结果的处理4.5 方案验证,首战告捷 5 总结复盘 利用 DeepSeek 实现复杂 Git 操作 1 背景介绍…...
网络编程套接字(中)
文章目录 🍏简单的TCP网络程序服务端创建套接字服务端绑定服务端监听服务端获取连接服务端处理请求客户端创建套接字客户端连接服务器客户端发起请求服务器测试单执行流服务器的弊端 🍐多进程版的TCP网络程序捕捉SIGCHLD信号让孙子进程提供服务 …...
前端学习-事件委托(三十)
目录 前言 课前思考 for循环注册事件 语法 事件委托 1.事件委托的好处是什么? 2.事件委托是委托给了谁,父元素还是子元素 3.如何找到真正触发的元素 示例代码 总结 前言 才子佳人,自是白衣卿相 课前思考 1.如果同时给多个元素注册事件&…...
线程池以及在QT中的接口使用
文章目录 前言线程池架构组成**一、任务队列(Task Queue)****二、工作线程组(Worker Threads)****三、管理者线程(Manager Thread)** 系统协作流程图解 一、QRunnable二、QThreadPool三、线程池的应用场景W…...
c语言操作符(详细讲解)
目录 前言 一、算术操作符 一元操作符: 二元操作符: 二、赋值操作符 代码例子: 三、比较操作符 相等与不相等比较操作符: 大于和小于比较操作符: 大于等于和小于等于比较操作符: 四、逻辑操作符 逻辑与&…...
【自然语言处理(NLP)】深度学习架构:Transformer 原理及代码实现
文章目录 介绍Transformer核心组件架构图编码器(Encoder)解码器(Decoder) 优点应用代码实现导包基于位置的前馈网络残差连接后进行层规范化编码器 Block编码器解码器 Block解码器训练预测 个人主页:道友老李 欢迎加入社…...
JavaScript 入门教程
JavaScript 入门教程 JavaScript 入门教程引言学习 JavaScript 的好处常见的 JavaScript 框架和库 安装开发环境下载并安装 Node.js 和 npm安装常用开发工具(如 VS Code)配置本地开发环境 基础语法入门数据类型变量与常量运算符算术运算符比较运算符 条件…...
浅析CDN安全策略防范
CDN(内容分发网络)信息安全策略是保障内容分发网络在提供高效服务的同时,确保数据传输安全、防止恶意攻击和保护用户隐私的重要手段。以下从多个方面详细介绍CDN的信息安全策略: 1. 数据加密 数据加密是CDN信息安全策略的核心之…...
代码随想录刷题day22|(字符串篇)344.反转字符串、541.反转字符串 II
目录 一、题目思路 二、相关题目 三、总结与知识点 3.1 字符数组转换成字符串 一、题目思路 344反转字符串比较容易,双指针即可在空间复杂度为O(1)的基础上解决; 541反转字符串II :其中for循环中 i 每次的取值,不是 i&#…...
python学opencv|读取图像(五十三)原理探索:使用cv.matchTemplate()函数实现最佳图像匹配
【1】引言 前序学习进程中,已经探索了使用cv.matchTemplate()函数实现最佳图像匹配的技巧,并且成功对两个目标进行了匹配。 相关文章链接为:python学opencv|读取图像(五十二)使用cv.matchTemplate()函数实现最佳图像…...
win10部署本地deepseek-r1,chatbox,deepseek联网(谷歌网页插件Page Assist)
win10部署本地deepseek-r1,chatbox,deepseek联网(谷歌网页插件Page Assist) 前言一、本地部署DeepSeek-r1step1 安装ollamastep2 下载deepseek-r1step2.1 找到模型deepseek-r1step2.2 cmd里粘贴 后按回车,进行下载 ste…...
未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?
编辑:陈萍萍的公主一点人工一点智能 未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战,在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
Zustand 状态管理库:极简而强大的解决方案
Zustand 是一个轻量级、快速和可扩展的状态管理库,特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...
系统设计 --- MongoDB亿级数据查询优化策略
系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log,共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题,不能使用ELK只能使用…...
linux 错误码总结
1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...
Python 包管理器 uv 介绍
Python 包管理器 uv 全面介绍 uv 是由 Astral(热门工具 Ruff 的开发者)推出的下一代高性能 Python 包管理器和构建工具,用 Rust 编写。它旨在解决传统工具(如 pip、virtualenv、pip-tools)的性能瓶颈,同时…...
Caliper 配置文件解析:fisco-bcos.json
config.yaml 文件 config.yaml 是 Caliper 的主配置文件,通常包含以下内容: test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...
解决:Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist
现象: android studio报错: [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决: 不要动CMakeLists.…...
DBLP数据库是什么?
DBLP(Digital Bibliography & Library Project)Computer Science Bibliography是全球著名的计算机科学出版物的开放书目数据库。DBLP所收录的期刊和会议论文质量较高,数据库文献更新速度很快,很好地反映了国际计算机科学学术研…...
全面解析数据库:从基础概念到前沿应用
在数字化时代,数据已成为企业和社会发展的核心资产,而数据库作为存储、管理和处理数据的关键工具,在各个领域发挥着举足轻重的作用。从电商平台的商品信息管理,到社交网络的用户数据存储,再到金融行业的交易记录处理&a…...
Neko虚拟浏览器远程协作方案:Docker+内网穿透技术部署实践
前言:本文将向开发者介绍一款创新性协作工具——Neko虚拟浏览器。在数字化协作场景中,跨地域的团队常需面对实时共享屏幕、协同编辑文档等需求。通过本指南,你将掌握在Ubuntu系统中使用容器化技术部署该工具的具体方案,并结合内网…...
