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})editModal.hide()
})

happycat

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/391635.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Stegdetect教程:如何用Stegdetect检测和破解JPG图像隐写信息

一、Stegdetect简介 Stegdetect 是一个开源工具&#xff0c;专门设计用于检测图像文件&#xff08;JPG格式&#xff09;中的隐写信息。Stegdetect 可以检测多种常见的隐写方法&#xff0c;比如 JSteg、JPHide 和 OutGuess 等。 二、使用Stegdetect检测图像隐写 官方描述&#…

NSS [SWPUCTF 2022 新生赛]file_master

NSS [SWPUCTF 2022 新生赛]file_master 开题&#xff0c;一眼文件上传。 network看看返回包。后端语言是PHP。 除了文件上传还有个查看文件功能。 起手式查询/etc/passwd&#xff0c;发现查询方法是GET提交参数&#xff0c;后端使用file_get_contents()函数包含文件。同时有op…

企业级业务架构设计探讨

引言 在数字化转型的浪潮中&#xff0c;企业业务架构的设计成为了连接企业战略与技术实现的桥梁&#xff0c;其重要性日益凸显。本文探讨企业级业务架构的设计原则、流程、工具和技术实现&#xff0c;并结合具体案例&#xff0c;为读者提供参考。 一、设计原则&#xff1a;奠…

KubeSphere 部署的 Kubernetes 集群使用 GlusterFS 存储实战入门

转载&#xff1a;KubeSphere 部署的 Kubernetes 集群使用 GlusterFS 存储实战入门 知识点 定级&#xff1a;入门级 GlusterFS 和 Heketi 简介 GlusterFS 安装部署 Heketi 安装部署 Kubernetes 命令行对接 GlusterFS 实战服务器配置(架构1:1复刻小规模生产环境&#xff0c;…

新手学习Gazebo+ros仿真控制小车-----易错和自己理解

赵虚左老师讲的很详细&#xff0c;这里只是理一下思路&#xff0c;说下突然出现“新”概念之间的关系。 urdf文件:里面是配置模型的&#xff0c;既有模型的位置、尺寸、颜色&#xff0c;也包含复杂的物理模型信息比如&#xff1a;转动惯量&#xff0c;碰撞box大小等等&#xff…

黑马Java零基础视频教程精华部分_11_面向对象进阶(3)_抽象类、接口、适配器

《黑马Java零基础视频教程精华部分》系列文章目录 黑马Java零基础视频教程精华部分_1_JDK、JRE、字面量、JAVA运算符 黑马Java零基础视频教程精华部分_2_顺序结构、分支结构、循环结构 黑马Java零基础视频教程精华部分_3_无限循环、跳转控制语句、数组、方法 黑马Java零基础视…

书生大模型基础岛-第二关:8G 显存玩转书生大模型 Demo

1.来源 https://github.com/InternLM/Tutorial/blob/camp3/docs/L1/Demo/task.md 2.过程 在 /root/share/pre_envs 中配置好了预置环境 icamp3_demo conda activate /root/share/pre_envs/icamp3_demo创建一个目录&#xff0c;用于存放我们的代码。并创建一个 cli_demo.py …

【hive】HiveSQL中两个json解析函数的使用json路径定位小工具

文章目录 1.HiveSQL中两个json解析函数1&#xff09;get_json_object2&#xff09;json_tuple 2.json中key所在层级路径定位小工具 关于json&#xff1a; https://blog.csdn.net/atwdy/article/details/124668815 1.HiveSQL中两个json解析函数 1&#xff09;get_json_object …

C语言程序设计-[3] 运算符和表达式

C语言的运算符也存在优先级和结合性的概念&#xff0c;在同一表达式中&#xff0c;优先级高的先结合&#xff0c;优先级相同时&#xff0c;就需要考虑结合性(分为左结合性和右结合性——对于单目、三目和赋值运算符表达式&#xff0c;从右至左运算&#xff1b;其他运算符表达式…

【Mind+】掌控板入门教程04 迷你动画片

还记得小时候每天放学必看的动画片吗&#xff1f;还记得那些年陪伴我一起长大的卡通人物吗&#xff1f;勇救爷爷的葫芦娃&#xff0c;我们的朋友小哪吒&#xff0c;相信这些经典的动画形象已经成为了一代人童年的美好回忆。今天就让我们用掌控板来制作一部迷你动画片吧。 项目示…

什么是云原生?

1. 前言 停下手头的工作&#xff0c;让你的同事定义“云原生”一词。你很可能会得到几个不同的答案。 1.1 让我们从一个简单的定义开始&#xff1a; 云原生架构和技术是一种设计、构建和操作在云中构建并充分利用云计算模型的工作负载的方法。 1.2 云原生计算基金会给出了官方…

Godot的节点与场景

要深入的理解节点与场景&#xff0c;我们需要跳出这两个概念来看他。说的再直白一些godot本质就是一个场景编辑器&#xff01; 场景的概念应该在我们平时看电影看电视时会经常提到&#xff0c;比如某一个打斗的场景&#xff0c;这个场景可能会被设在某一个街道&#xff0c;那么…

数据湖之Hudi

Apache Hudi&#xff08;Hadoop Upserts Deletes and Incrementals&#xff09;是一个用于管理大规模数据湖的开源框架&#xff0c;旨在高效地进行数据的插入、更新和删除操作&#xff0c;并支持流式数据的处理。Hudi 的设计目标是解决传统数据湖在数据管理和查询性能上的不足&…

如何将本地代码上传到github

将本地文件上传到GitHub仓库的过程通常包括以下几个步骤&#xff1a; 一 创建GitHub仓库&#xff1a; 如果你还没有一个GitHub仓库&#xff0c;首先需要在GitHub上创建一个新的仓库。登录到你的GitHub账户&#xff0c;然后点击“New repository”按钮&#xff0c;填写仓库的相关…

oracle(19c)用户管理

简介 本文介绍 Oracle 中的用户管理&#xff0c;包含以下内容&#xff1a; 概念介绍 系统用户 解锁 hr 用户 创建用户 用户相关案例 使用 Profile 管理用户口令 Oracle 的认证方式 重置管理员(sys)密码 1. 概念介绍 Oracle 中可以创建多个 Database 实例&#xff0c;…

(STM32笔记)九、RCC时钟树与时钟 第一部分

我用的是正点的STM32F103来进行学习&#xff0c;板子和教程是野火的指南者。 之后的这个系列笔记开头未标明的话&#xff0c;用的也是这个板子和教程。 九、RCC时钟树与时钟 九、RCC时钟树与时钟1、时钟树HSE时钟HSI时钟锁相环时钟系统时钟HCLK时钟PCLK1时钟PCLK2时钟RTC时钟独…

后端学习笔记(3)--Maven

1.Maven ​ *专门用于管理和构建Java项目的工具&#xff0c;主要功能有&#xff1a; ​ 1.提供了一套标准化的项目结构 ​ 2.提供了一套标准化的构建流程(编译&#xff0c;测试&#xff0c;打包&#xff0c;发布) ​ 3.提供了一套依赖管理机制 1.简介 ​ *Apache Maven是一…

服务器自动部署网络安装环境

实验环境 rhel7&#xff1a;IP地址为172.25.254.200、主机名为node1.rhel7.org 实验配置 一.kickstart自动安装脚本制作 1.安装图形化生成kickstart自动安装脚本的工具 [rootnode1 ~]# yum install system-config-kickstart 2. 启动图形制作工具 [rootnode1 ~]# system-…

【网络编程】网络原理(一)

系列文章目录 1、 初识网络 2、网络编程的基础使用&#xff08;一&#xff09; 文章目录 系列文章目录前言一、端口号的使用二、UDP报文学习1.报文格式2.MD5算法 总结 前言 在前文中&#xff0c;主要对UDP和TCP协议有了简单的了解&#xff0c;而这两种协议是负责传输层的内容…

部署k8s+conatinerd环境

1、准备系统环境 禁用默认休眠&#xff08;可选&#xff09; 禁用&#xff1a;systemctl mask sleep.target suspend.target hibernate.target hybrid-sleep.target启用&#xff1a;sudo systemctl unmask sleep.target suspend.target hibernate.target hybrid-sleep.target …