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 十进制&…...
23-Oracle 23 ai 区块链表（Blockchain Table）
小伙伴有没有在金融强合规的领域中遇见，必须要保持数据不可变，管理员都无法修改和留痕的要求。比如医疗的电子病历中，影像检查检验结果不可篡改行的，药品追溯过程中数据只可插入无法删除的特性需求；登录日志、修改日志…...
Opencv中的addweighted函数
一.addweighted函数作用 addweighted（）是OpenCV库中用于图像处理的函数，主要功能是将两个输入图像（尺寸和类型相同）按照指定的权重进行加权叠加（图像融合），并添加一个标量值&#x…...
智能在线客服平台：数字化时代企业连接用户的 AI 中枢
随着互联网技术的飞速发展，消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁，不仅优化了客户体验，还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用，并…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 （忘了有没有这步了 估计有） 刷机程序 和 镜像 就不提供了。要刷的时…...
生成 Git SSH 证书
🔑 1. 生成 SSH 密钥对 在终端（Windows 使用 Git Bash，Mac/Linux 使用 Terminal）执行命令： ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明： -t rsa&#x…...
MySQL 8.0 OCP 英文题库解析（十三）
Oracle 为庆祝 MySQL 30 周年，截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始，将英文题库免费公布出来，并进行解析，帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...
让AI看见世界：MCP协议与服务器的工作原理
让AI看见世界：MCP协议与服务器的工作原理 MCP（Model Context Protocol）是一种创新的通信协议，旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天，MCP正成为连接AI与现实世界的重要桥梁。…...
在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包： for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...
Android第十三次面试总结（四大 组件基础）
Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成，用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机： onCreate() 调用时机：Activity 首次创建时调用。…...
PostgreSQL——环境搭建
一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在࿰…...