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

ajax图书管理项目

news 2026/1/16 9:05:30

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弹框 不离开当前页面&#xff0c;显示单独内容&#xff0c;让用户操作 功能&#xff1a;不离开当前页面&#xff0c;显示单独内容&#xff0c;供用户操作步骤&#xff1a; 1.引入bootstrap.css和bootstrap.js …...

编程日记 2024/8/8 21:31:07

深入理解 Java SPI - 概念、原理、应用

零、前言 在当今互联网时代&#xff0c;应用程序越来越复杂&#xff0c;对于我们开发人员来说&#xff0c;如何实现高效的组件化和模块化已经成为了一个重要的问题。而 Java SPI&#xff08;Service Provider Interface&#xff09;机制&#xff0c;作为一种基于接口的服务发现…...

编程日记 2024/8/8 21:29:05

JavaScript - 判断数组中是否包含某个的元素的几种方式

目录​​​​​​​​​​​​​​ 1. 使用 includes 方法 2. 使用 indexOf 方法 3. 使用 find 方法 4. 使用 some 方法 5. 使用 filter 方法 6. 使用 every 方法​​​​​​​ 应该算是前端开发过程中比较常用的基本操作&#xff0c;话不多说&#xff0c;看代码。 1. 使…...

编程日记 2024/8/8 21:28:04

如何用AI颠覆企业未来：从大企业到中小型企业的实战攻略

如何用AI颠覆企业未来&#xff1a;从大企业到中小型企业的实战攻略 AI大佬经验分享&#xff1a;聊聊企业定制化AI需求和应用场景 今天想跟大家聊聊我在AI领域的一些经验和见解&#xff0c;希望能对大家有所启发。最近&#xff0c;不少企业都对AI很感兴趣&#xff0c;我也经常…...

编程日记 2024/8/8 21:27:03

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调整分区&#xff0c;在线调整分区…...

编程日记 2024/8/8 21:24:00

C++ 函数模板和类模板

参考视频&#xff1a;C类模板_哔哩哔哩_bilibili 遗留问题&#xff1a;编译器怎么处理函数模板和类模板 目录 一、为什么会有函数模版&#xff1f;函数模板是为了解决什么问题&#xff1f; 二、函数模板的概念 三、函数模版的使用 四、函数模板的特化 五、类模板的概念 …...

编程日记 2024/8/8 21:22:58

安卓Termux系统设备安装内网穿透工具实现远程使用SFTP传输文件

文章目录 前言1. 安装openSSH2. 安装cpolar3. 远程SFTP连接配置4. 远程SFTP访问4. 配置固定远程连接地址 前言 本教程主要介绍如何在安卓 Termux 系统中使用 SFTP 文件传输&#xff0c;并结合cpolar内网穿透工具生成公网地址&#xff0c;轻松实现无公网IP环境远程传输&#xf…...

编程日记 2024/8/8 21:21:56

文件属性获取

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…...

编程日记 2024/8/8 21:18:53

C:冒泡排序

1、冒泡排序介绍&#xff1a; 冒泡排序的核心思想就是&#xff1a;两两相邻的元素进行比较。 先用一个例子来帮助大家理解一下冒泡排序的算法是怎们进行的 有一排高矮不同的人站成一列&#xff0c;要按照从矮到高的顺序重新排队。 冒泡排序的方法就是&#xff0c;从第一个人…...

编程日记 2024/8/8 21:16:51

探秘C# LINQ元素运算：原理阐释与实践指南

文章目录 一、LINQ元素运算符概述二. ElementAt 和 ElementAtOrDefault三. First 和 FirstOrDefault四. Last 和 LastOrDefault五. Single 和 SingleOrDefault六. Where 和 Select七、实际应用场景示例总结 LINQ&#xff08;Language-Integrated Query&#xff09;是C#中强大且…...

编程日记 2024/8/8 21:15:50

根据bean的名称获取bean，静态方法查询数据库

根据bean名称获取bean 1.先创建bean&#xff0c;如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…...

编程日记 2024/8/8 21:13:48

剪画小程序：音频剪辑新手入门：基础操作指南！

亲爱的小伙伴们&#xff0c;你是否对音频剪辑充满好奇&#xff0c;却不知道从何下手&#xff1f;今天&#xff0c;就让我们用【剪画】一起揭开音频剪辑基础操作的神秘面纱&#xff01; 音频拼接——打造个性音乐串烧 音频拼接是将多个音频片段组合在一起&#xff0c;创造出独特…...

编程日记 2024/8/8 21:12:47

IDEA中maven jar下载失败问题处理

前言 对于在IDEA中maven爆红问题&#xff0c;主要分为两类&#xff0c;一个是全部爆红&#xff0c;一个是部分爆红。 全部爆红 这类问题主要是maven配置没有搞好&#xff0c;可以根据下列步骤自查 1.配置好国内的Maven源 第一步:打开IDEA&#xff0c;查看配置 第二步: 检查…...

编程日记 2024/8/8 21:11:46

C++中，函数返回const类型有什么作用，请举例说明

在C中&#xff0c;函数返回const类型的主要作用是确保返回的对象不会被修改。这种保护机制增强了代码的健壮性和可维护性&#xff0c;尤其是在你希望保证函数返回的数据不被意外篡改时。下面通过几个例子来说明函数返回const类型的作用。 例子 1: 返回常量引用 当你从函数中返…...

编程日记 2024/8/8 21:09:44

Html详解——Vue基础

HTML是什么&#xff1f; 超文本标记语言&#xff08;英语&#xff1a;HyperText Markup Language&#xff0c;简称&#xff1a;HTML&#xff09;是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是&#xff1a;一组段落、一个重点信息列表、也可以含有图片和数据表…...

编程日记 2024/8/8 21:07:42

【安规电容知识点总结】

安规电容知识点总结 安规电容简介安规电容的种类X电容和Y电容X电容和Y电容示意图安规电容的型号与应用安规电容简介 安规电容：是指用于这样的场合，即电容器失效后，不会导致电击，不会危及到人身安全。 具体来说，所谓安规电容是一种与普通电容相比符合安全认证的电容，故称…...

编程日记 2024/8/8 21:05:41

R9000P 双系统安装 win11 和 ubuntu

网上了解到一堆关于 r9000p 安装较老的ubuntu系统&#xff0c;会有一堆问题 可能是电脑硬件比较新&#xff0c;较老的系统相关方面不兼容 那么干脆直接装新一点的系统 我安装了 Ubuntu 22.04 1 根据相关教程利用u盘制作系统盘 ultraISO 推荐使用清华源 速度快一点 https://…...

编程日记 2024/8/8 21:04:40

8月8日笔记

8月8日笔记 msf常见命令 启动MSF控制台 msfconsole: 启动MSF控制台。msfconsole -h: 显示帮助菜单。msfconsole -q: 启动MSF控制台并立即退出。 导航和管理 back: 返回上一级菜单。exit: 退出MSF控制台。banner: 显示MSF的横幅。cd: 更改工作目录。color: 开启或关闭彩色输…...

编程日记 2024/8/8 21:03:39

【单片机开发软件】使用VSCode开发STM32环境搭建

&#x1f48c; 所属专栏&#xff1a;【单片机开发软件技巧】 &#x1f600; 作  者&#xff1a; 于晓超 &#x1f680; 个人简介&#xff1a;嵌入式工程师&#xff0c;专注嵌入式领域基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f496; 欢迎大家&#xff1…...

编程日记 2024/8/8 21:00:36

第十五届蓝桥杯大赛青少组——赛前解析（算法）

算法&#xff1a;进制转换、模拟算法&#xff0c;枚举算法&#xff0c;冒泡排序&#xff0c;插入排序&#xff0c;选择排序&#xff0c;递推算法&#xff0c;递归算法&#xff0c;贪心算法。 1.进制转换 二进制&#xff1a;只包含0和1 八进制&#xff1a;只包含0-7 十进制&…...

编程日记 2024/8/8 20:55:31

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

编程新知 2026/1/15 5:38:25

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2026/1/15 5:22:21

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/11/8 0:24:13

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2026/1/15 6:35:15

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2026/1/15 5:44:22

多种风格导航菜单 HTML 实现（附源码）

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

编程新知 2026/1/15 5:04:15

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

编程新知 2026/1/15 1:55:04

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

编程新知 2025/11/28 5:32:31

短视频矩阵系统文案创作功能开发实践，定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

编程新知 2026/1/15 8:12:29