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

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=25https://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综合案例——图书管理

黑马程序员视频地址&#xff1a; AJAX-Day02-10.案例_图书管理AJAX-Day02-10.案例_图书管理_总结_V1.0是黑马程序员前端AJAX入门到实战全套教程&#xff0c;包含学前端框架必会的&#xff08;ajaxnode.jswebpackgit&#xff09;&#xff0c;一套全覆盖的第25集视频&#xff0c…...

JDK自带工具解析与生产问题定位指南(一)

1. 引言 Java开发工具包&#xff08;JDK&#xff09;内置了强大的诊断工具集&#xff0c;用于监控、分析和调试Java应用程序。这些工具涵盖了从进程管理、内存分析到性能监控的各个方面。本文将介绍一些最常用的Java开发工具&#xff0c;包括jps、jmap、jstat、jcmd、jstack、…...

FPGA 使用 CLOCK_DEDICATED_ROUTE 约束

使用 CLOCK_DEDICATED_ROUTE 约束 CLOCK_DEDICATED_ROUTE 约束通常在从一个时钟区域中的时钟缓存驱动到另一个时钟区域中的 MMCM 或 PLL 时使 用。默认情况下&#xff0c; CLOCK_DEDICATED_ROUTE 约束设置为 TRUE &#xff0c;并且缓存 /MMCM 或 PLL 对必须布局在相同…...

《解锁AI黑科技:数据分类聚类与可视化》

在当今数字化时代&#xff0c;数据如潮水般涌来&#xff0c;如何从海量数据中提取有价值的信息&#xff0c;成为了众多领域面临的关键挑战。人工智能&#xff08;AI&#xff09;技术的崛起&#xff0c;为解决这一难题提供了强大的工具。其中&#xff0c;能够实现数据分类与聚类…...

Java小白入门教程:Object

目录 一、定义 二、作用 三、使用场景 四、语法以及示例 1、创建Object类型的对象 2、使用 toString()方法 3、使用 equals()方法 4、使用 hashCode()方法 5、使用 getClass()方法 6、使用 clone()方法 7、使用 finalize()方法 一、定义 在Java中&#xff0c; object…...

记6(人工神经网络

目录 1、M-P神经元2、感知机3、Delta法则4、前馈型神经网络&#xff08;Feedforward Neural Networks&#xff09;5、鸢尾花数据集——单层前馈型神经网络&#xff1a;6、多层神经网络&#xff1a;增加隐含层7、实现异或运算&#xff08;01、10为1,00、11为0&#xff09;8、线性…...

stm32硬件实现与w25qxx通信

使用的型号为stm32f103c8t6与w25q64。 STM32CubeMX配置与引脚衔接 根据stm32f103c8t6引脚手册&#xff0c;采用B12-B15四个引脚与W25Q64连接&#xff0c;实现SPI通信。 W25Q64SCK&#xff08;CLK&#xff09;PB13MOSI&#xff08;DI&#xff09;PB15MISO(DO)PB14CS&#xff08…...

编程题-最接近的三数之和

题目&#xff1a; 给你一个长度为 n 的整数数组 nums 和 一个目标值 target。请你从 nums 中选出三个整数&#xff0c;使它们的和与 target 最接近。 返回这三个数的和。 假定每组输入只存在恰好一个解。 解法一&#xff08;排序双指针&#xff09;&#xff1a; 题目要求找…...

索引的底层数据结构、B+树的结构、为什么InnoDB使用B+树而不是B树呢

索引的底层数据结构 MySQL中常用的是Hash索引和B树索引 Hash索引&#xff1a;基于哈希表实现的&#xff0c;查找速度非常快&#xff0c;但是由于哈希表的特性&#xff0c;不支持范围查找和排序&#xff0c;在MySQL中支持的哈希索引是自适应的&#xff0c;不能手动创建 B树的…...

【工欲善其事】利用 DeepSeek 实现复杂 Git 操作:从原项目剥离出子版本树并同步到新的代码库中

文章目录 利用 DeepSeek 实现复杂 Git 操作1 背景介绍2 需求描述3 思路分析4 实现过程4.1 第一次需求确认4.2 第二次需求确认4.3 第三次需求确认4.4 V3 模型&#xff1a;中间结果的处理4.5 方案验证&#xff0c;首战告捷 5 总结复盘 利用 DeepSeek 实现复杂 Git 操作 1 背景介绍…...

网络编程套接字(中)

文章目录 &#x1f34f;简单的TCP网络程序服务端创建套接字服务端绑定服务端监听服务端获取连接服务端处理请求客户端创建套接字客户端连接服务器客户端发起请求服务器测试单执行流服务器的弊端 &#x1f350;多进程版的TCP网络程序捕捉SIGCHLD信号让孙子进程提供服务 &#x1…...

前端学习-事件委托(三十)

目录 前言 课前思考 for循环注册事件 语法 事件委托 1.事件委托的好处是什么? 2.事件委托是委托给了谁&#xff0c;父元素还是子元素 3.如何找到真正触发的元素 示例代码 总结 前言 才子佳人&#xff0c;自是白衣卿相 课前思考 1.如果同时给多个元素注册事件&…...

线程池以及在QT中的接口使用

文章目录 前言线程池架构组成**一、任务队列&#xff08;Task Queue&#xff09;****二、工作线程组&#xff08;Worker Threads&#xff09;****三、管理者线程&#xff08;Manager Thread&#xff09;** 系统协作流程图解 一、QRunnable二、QThreadPool三、线程池的应用场景W…...

c语言操作符(详细讲解)

目录 前言 一、算术操作符 一元操作符&#xff1a; 二元操作符&#xff1a; 二、赋值操作符 代码例子&#xff1a; 三、比较操作符 相等与不相等比较操作符&#xff1a; 大于和小于比较操作符&#xff1a; 大于等于和小于等于比较操作符&#xff1a; 四、逻辑操作符 逻辑与&…...

【自然语言处理(NLP)】深度学习架构:Transformer 原理及代码实现

文章目录 介绍Transformer核心组件架构图编码器&#xff08;Encoder&#xff09;解码器&#xff08;Decoder&#xff09; 优点应用代码实现导包基于位置的前馈网络残差连接后进行层规范化编码器 Block编码器解码器 Block解码器训练预测 个人主页&#xff1a;道友老李 欢迎加入社…...

JavaScript 入门教程

JavaScript 入门教程 JavaScript 入门教程引言学习 JavaScript 的好处常见的 JavaScript 框架和库 安装开发环境下载并安装 Node.js 和 npm安装常用开发工具&#xff08;如 VS Code&#xff09;配置本地开发环境 基础语法入门数据类型变量与常量运算符算术运算符比较运算符 条件…...

浅析CDN安全策略防范

CDN&#xff08;内容分发网络&#xff09;信息安全策略是保障内容分发网络在提供高效服务的同时&#xff0c;确保数据传输安全、防止恶意攻击和保护用户隐私的重要手段。以下从多个方面详细介绍CDN的信息安全策略&#xff1a; 1. 数据加密 数据加密是CDN信息安全策略的核心之…...

代码随想录刷题day22|(字符串篇)344.反转字符串、541.反转字符串 II

目录 一、题目思路 二、相关题目 三、总结与知识点 3.1 字符数组转换成字符串 一、题目思路 344反转字符串比较容易&#xff0c;双指针即可在空间复杂度为O(1)的基础上解决&#xff1b; 541反转字符串II &#xff1a;其中for循环中 i 每次的取值&#xff0c;不是 i&#…...

python学opencv|读取图像(五十三)原理探索:使用cv.matchTemplate()函数实现最佳图像匹配

【1】引言 前序学习进程中&#xff0c;已经探索了使用cv.matchTemplate()函数实现最佳图像匹配的技巧&#xff0c;并且成功对两个目标进行了匹配。 相关文章链接为&#xff1a;python学opencv|读取图像&#xff08;五十二&#xff09;使用cv.matchTemplate()函数实现最佳图像…...

win10部署本地deepseek-r1,chatbox,deepseek联网(谷歌网页插件Page Assist)

win10部署本地deepseek-r1&#xff0c;chatbox&#xff0c;deepseek联网&#xff08;谷歌网页插件Page Assist&#xff09; 前言一、本地部署DeepSeek-r1step1 安装ollamastep2 下载deepseek-r1step2.1 找到模型deepseek-r1step2.2 cmd里粘贴 后按回车&#xff0c;进行下载 ste…...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...

为什么要创建 Vue 实例

核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...