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 十进制&…...
05.查询表
查询表 字段显示可以使用别名: col1 AS alias1, col2 AS alias2, … WHERE子句:指明过滤条件以实现“选择"的功能: 过滤条件: 布尔型表达式算术操作符:,-,*,/,%比较操作符:,<>(相等或都为空),<>,!(非标准SQL),>,>,<,<范围查询: BETWEEN min_num …...
Linux 系统中的算法技巧与性能优化
引言 Linux 系统以其开源、稳定和高度可定制的特性，在服务器端、嵌入式设备以及开发环境中得到了极为广泛的应用。对于开发者而言，不仅要掌握在 Linux 环境下实现各类算法的方法，更要知晓如何利用系统特性对算法进行优化，以提升…...
DAY 48 随机函数与广播机制
知识点回顾： 随机张量的生成：torch.randn函数卷积和池化的计算公式（可以不掌握，会自动计算的）pytorch的广播机制：加法和乘法的广播机制 ps：numpy运算也有类似的广播机制，基本一致 作…...
CAN通信收发测试（USB2CAN模块测试实验）
1.搭建测试环境 电脑：安装 USB 驱动，安装原厂调试工具，安装cangaroo（参考安装包的入门教程即可） USB驱动路径：~\CAN分析仪资料20230701_Linux\硬件驱动程序 原厂调试工具路径：~\CAN分析仪资料2…...
能上Nature封面的idea！强化学习+卡尔曼滤波
2025深度学习发论文&模型涨点之——强化学习卡尔曼滤波 强化学习（Reinforcement Learning, RL）与卡尔曼滤波（Kalman Filtering, KF）的交叉研究已成为智能控制与状态估计领域的重要前沿方向。 强化学习通过试错机制优化决策策…...
)
SQL-labs通关(level1-22)
SQL-labs靶场详解 靶场下载 靶场下载地址 关卡 level1联合注入 用order by语句来查询字段数 顺便提一下，使用联合注入语句union select也可以查询字段数，在不能使用order by的情况下，可以使用union select来查询字段数。这里我们通过查询…...
powershell 安装 .netframework3.5
在 PowerShell 中安装 .NET Framework 3.5 可以通过几种不同的方法实现，取决于你的操作系统版本。以下是几种常见的方法： 方法1：使用 DISM 命令 对于 Windows 10 和 Windows 8.1，你可以使用 DISM（Deployment Image Se…...
LLM 笔记：Speculative Decoding 投机采样
1 基本介绍 投机采样（Speculative Sampling）是一种并行预测多个可能输出，然后快速验证并采纳正确部分的加速策略 在不牺牲输出质量的前提下，减少语言模型生成 token 所需的时间 传统的语言模型生成是 串行 的 必须生成一个&…...
simulink这边重新第二次仿真时，直接UE5崩溃，然后simulink没有响应
提问 ： simulink这边重新第二次仿真时，直接UE5崩溃，然后simulink没有响应 simulink和UE5仿真的时候，simulink这边先停止仿真（也就是官方要求的顺序——注意：如果先在UE5那边停止仿真，如果UE5这…...
[Harmony]网络状态监听
权限 在module.json5中添加必要权限： // 声明应用需要请求的权限列表 "requestPermissions": [{"name": "ohos.permission.GET_NETWORK_INFO", // 网络信息权限"reason": "$string:network_info_reason","…...