当前位置: 首页 > 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…...

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...