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

Ajax图书管理业务

图书管理业务

Ajax图书管理业务

需求: 对服务器的图书数据进行 增、删、改、查。功能的实现,同时实时动态的渲染刷新页面内容

根据功能模块分为四个业务模块,下面有各个业务的实现步骤

01_ 渲染图书列表业务

* 目标1:渲染图书列表

* 1.1 获取数据

* 1.2 渲染数据

业务1代码
// 固定的携带参数别名
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()

02_新增图书业务

目标2:新增图书

​ * 2.1 新增弹框 -> 显示和隐藏

​ * 2.2 收集表单数据,并提交给服务器

​ * 2.3 刷新图书列表、同时重置表单

业务2代码
// 2.1 创建一个弹框对象
const addModalDom = document.querySelector('.add-modal')
const addModal = new bootstrap.Modal(addModalDom)
// 给保存按钮添加点击事件
document.querySelector('.add-btn').addEventListener('click', () => {// 2.2 收集表单数据,并提交给服务器const form = document.querySelector('.add-form')// 使用serialize插件的函数获取拥有anme属性的表单值const data = serialize(form, { hash: true, empty: true })// 使用对象解构对获取的值进行处理,用于提交数据const { bookname, author, publisher } = dataconsole.log(data)// 2.2.1 向服务器发送提交请求(提交到服务器)axios({url: 'http://hmajax.itheima.net/api/books',method: 'post',data: {...data,creator}}).then(result => {console.log(result)// 2.3 服务器响应后我们需要重新渲染图书数据列表getBooksList()// 重置表单form.reset()// 隐藏弹框addModal.hide()})
})

这里的显示,我们使用bootstrap属性控制就可以了,但是隐藏我们需要提交数据,所以我们使用js来控制。

03_删除图书业务

* 目标3: 删除图书

* 3.1 删除元素绑定点击事件 -> 获取图书id

* 3.2 调用删除接口

* 3.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(result => {// 3.3 刷新图书列表getBooksList()console.log(result)}).catch(error => {console.log(error)console.log(error.response.data.message)})}
})

04_编辑图书业务

* 目标4 :编辑图书

* 4.1 编辑弹框 -> 显示和隐藏

* 4.2 获取当前编辑图书数据 -> 回显到编辑表单中

* 4.3 提交保存修改 ,并刷新列表

业务4代码
// 4.1 编辑弹框 -> 显示和隐藏 (使用js方式控制)
const editDom = document.querySelector('.edit-modal')
// 通过bootstrap.Modal构造函数创建一个实例对象
const editModal = new bootstrap.Modal(editDom)
// 给编辑元素 -> 绑定 ->委托事件
document.querySelector('.list').addEventListener('click', e => {// 判断点击的是否为 edit 这个类 的标签if (e.target.classList.contains('edit')) {// console.log('编辑')// 4.2 获取当前编辑图书数据 -> 回显到编辑表单中const theId = e.target.parentNode.dataset.id// console.log(theId)axios({// 路径传参  嵌入进去url: `http://hmajax.itheima.net/api/books/${theId}`,method: 'GET',}).then(result => {const bookObj = result.data.data// document.querySelector('.edit-form .bookname').value = bookObj.bookname// document.querySelector('.edit-form .author').value = bookObj.author// 数据对象“属性”和标签“类名”一致// 遍历数据对象,使用属性去获取对应标签,快速赋值const keys = Object.keys(bookObj) //['id', 'bookname', 'author', 'publisher']keys.forEach(key => {document.querySelector(`.edit-form .${key}`).value = bookObj[key]})})// 给弹框对象添加show方法,让编辑框显示出来editModal.show()}
})//  修改按钮 -> 点击 -> 隐藏按钮
document.querySelector('.edit-btn').addEventListener('click', () => {// 4.3 提交保存修改 ,并刷新列表const editForm = document.querySelector('.edit-form')const bookObj = serialize(editForm ,{ hash: true ,empty: true })// 下面是保存正在编辑的图书id ,隐藏起来:无需让用户修改// <input type="hidden" class="id" name="id" value="228500">axios({url: `http://hmajax.itheima.net/api/books/${bookObj.id}`,method: 'PUT',data: {...bookObj,creator}}).then(() => {// 修改成功以后,重新获取并刷新列表getBooksList()// 隐藏弹框editModal.hide()})})

业务总结

  • 核心的步骤

* 业务1:渲染图书列表

* 1.1 获取数据

* 1.2 渲染数据

业务2:新增图书

​ * 2.1 新增弹框 -> 显示和隐藏

​ * 2.2 收集表单数据,并提交给服务器

​ * 2.3 刷新图书列表、同时重置表单

* 业务3: 删除图书

* 3.1 删除元素绑定点击事件 -> 获取图书id

* 3.2 调用删除接口

* 3.3 刷新图书列表

* 业务4 :编辑图书

  • 显示和隐藏

* 4.2 获取当前编辑图书数据 -> 回显到编辑表单中

* 4.3 提交保存修改 ,并刷新列表

在所有的查询和请求中,只要服务器的数据发生变化,同时也需要渲染刷新页面的内容.

相关文章:

Ajax图书管理业务

图书管理业务 Ajax图书管理业务 需求: 对服务器的图书数据进行 增、删、改、查。功能的实现&#xff0c;同时实时动态的渲染刷新页面内容 根据功能模块分为四个业务模块&#xff0c;下面有各个业务的实现步骤 01_ 渲染图书列表业务 * 目标1&#xff1a;渲染图书列表 * 1.1 获…...

对于爬虫代码的优化,多个方向

对于优化爬虫&#xff0c;有许多可能的方法&#xff0c;这取决于你的具体需求和目标。以下是一些常见的优化策略&#xff1a; 1. **并发请求**&#xff1a;你可以使用多线程或异步IO来同时发送多个请求&#xff0c;这可以显著提高爬虫的速度。Python的concurrent.futures库或a…...

ffmpeg推流卡顿修复

1、使用命令如下&#xff1a; $"ffmpeg -i {this.IpAddress} -f flv {PushAddress}" 2、参考文章&#xff1a; ffmpeg 编码如何做带宽控制输出_ffmpeg bufsize_qianbo_insist的博客-CSDN博客...

Java02-迭代器,数据结构,List,Set ,TreeSet集合,Collections工具类

目录 什么是遍历&#xff1f; 一、Collection集合的遍历方式 1.迭代器遍历 方法 流程 案例 2. foreach&#xff08;增强for循环&#xff09;遍历 案例 3.Lamdba表达式遍历 案例 二、数据结构 数据结构介绍 常见数据结构 栈&#xff08;Stack&#xff09; 队列&a…...

离散 Hopfield 神经网络的分类与matlab实现

1 案例背景 1.1离散 Hopfield 神经网络学习规则 离散型 Hopfield神经网络的结构、工作方式,稳定性等问题在第9章中已经进行了详细的介绍,此处不再赘述。本节将详细介绍离散Hopfield神经网络权系数矩阵的设计方法。设计权系数矩阵的目的是: ①保证系统在异步工作时的稳…...

opencv 30 -图像平滑处理01-均值滤波 cv2.blur()

什么是图像平滑处理? 图像平滑处理&#xff08;Image Smoothing&#xff09;是一种图像处理技术&#xff0c;旨在减少图像中的噪声、去除细节并平滑图像的过渡部分。这种处理常用于预处理图像&#xff0c;以便在后续图像处理任务中获得更好的结果。 常用的图像平滑处理方法包括…...

中小企业的数字化营销应该如何着手?数字化营销到底要怎么做?

从侠义角度讲&#xff0c;数字化营销就是在数字化的媒体上做营销。传播本质上是一种营销的形式 从广义角度讲&#xff0c;我们不仅可以将营销数字化&#xff0c;也可以数字化很多事物&#xff0c;甚至行业&#xff0c;比如数字化制造业、数字化工厂、数字化商会等等 ​而这个…...

实数信号的傅里叶级数研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

oracle数据库巡检脚本

用于Oracle数据库巡检的示例脚本: #!/bin/bash# 设置数据库连接信息 DB_USER="your_db_username" DB_PASSWORD="your_db_password" DB_HOST="your_db_host" DB_PORT="your_db_port" DB_SID="your_db_sid" OUTPUT_FILE=&q…...

服务注册中心consul的服务健康监控及告警

一、背景 consul既可以作为服务注册中心&#xff0c;也可以作为分布式配置中心。当它作为服务注册中心的时候&#xff0c;java微服务之间的调用&#xff0c;会定期查询服务的实例列表&#xff0c;并且实例的状态是健康可用。 如果发现被调用的服务&#xff0c;注册到consul的…...

【算法第十四天7.28】二叉树的最大深度,二叉树的最小深度 ,完全二叉树的节点个数

链接力扣104-二叉树的最大深度 思路 class Solution {public int maxDepth(TreeNode root) {if(root null) return 0;if(root.left null) return maxDepth(root.right) 1;if(root.right null) return maxDepth(root.left) 1;int max Math.max(maxDepth(root.left),maxD…...

网络安全设备-等保一体机

本文为作者学习文章&#xff0c;按作者习惯写成&#xff0c;如有错误或需要追加内容请留言&#xff08;不喜勿喷&#xff09; 本文为追加文章&#xff0c;后期慢慢追加 等保一体机的功能 等保一体机产品主要依赖于其丰富的安全网元&#xff08;安全网元包括&#xff1a;防火…...

Kafka的配置和使用

目录 1.服务器用docker安装kafka 2.springboot集成kafka实现生产者和消费者 1.服务器用docker安装kafka ①、安装docker&#xff08;docker类似于linux的软件商店&#xff0c;下载所有应用都能从docker去下载&#xff09; a、自动安装 curl -fsSL https://get.docker.com | b…...

【C++】unordered_map在Windows和Linux上的不同行为

我目前手头上的项目&#xff0c;需要编译在板端Linux上运行&#xff0c;但是日常daily调试多在Windows上开发。这就涉及到同一份代码在多平台上的编译个运行。有一次遇到了一个奇怪的现象&#xff1a;跑同样的一份代码&#xff0c;Windows和Linux出来的结果是不一致的。最终确定…...

Apipost三方消息通知,接口变更不用愁

Apipost致力于为开发者提供更全面的API管理功能。而最近&#xff0c;Apipost又新增了一个非常实用的功能&#xff1a;第三方消息推送。这个功能可以帮助开发人员及时了解API的变更情况&#xff0c;从而更好地管理和优化自己的API。 具体来说&#xff0c;Apipost的第三方消息推…...

C语言 用数组名作函数参数

当用数组名作函数参数时&#xff0c;如果形参数组中各元素的值发生变化&#xff0c;实参数组元素的值随之变化。 1.数组元素做实参的情况&#xff1a; 如果已经定义一个函数&#xff0c;其原型为 void swap(int x,int y);假设函数的作用是将两个形参&#xff08;x,y&#xf…...

每日一题(980. 不同路径 III)-回溯

题目 980. 不同路径 III 题解思路 表格中值为1的为起始点值为0 的是可以经过的点&#xff0c;但是只能经过一次值为2 的是终点&#xff0c;计算从起点到终点一共有多少种路径 计算出值为0的方格个数&#xff0c;同时找到起点位置当位于终点时候且经过所有的方格为0的点 即为…...

【Python:json常用函数,用于加载和保存json文件】load(), loads(), dump(), dumps()

文章目录 1、load()2、loads()3、dump()4、dumps() json文件为javascript object Notation文件&#xff0c;属于轻量级的数据交换格式&#xff0c;可以用于存储和交换数据。json文件是由类似{ }的key-value映射组成。 1、load() 把json文件加载为Python的数据格式&#xff0c…...

Flink State 和 Fault Tolerance详解

有状态操作或者操作算子在处理DataStream的元素或者事件的时候需要存储计算的中间状态&#xff0c;这就使得状态在整个Flink的精细化计算中有着非常重要的地位&#xff1a; 记录数据从某一个过去时间点到当前时间的状态信息。以每分钟/小时/天汇总事件时&#xff0c;状态将保留…...

小红书2023“家生活”趋势白皮书

关于报告的所有内容&#xff0c;公众【营销人星球】获取下载查看 核心观点 近年来&#xff0c;年轻人与家的关系愈发紧密。 在小红书上&#xff0c;我们观察到了家居家装内容的蓬勃生长&#xff0c;3 年来相关内容的笔记规模增长了6倍&#xff0c;相关品类的搜索量增加的 3.…...

OpCore Simplify终极指南:如何30分钟完成黑苹果EFI智能配置

OpCore Simplify终极指南&#xff1a;如何30分钟完成黑苹果EFI智能配置 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 你是否也曾被黑苹果复杂的EFI配…...

【2026奇点大会语音合成终极指南】:大模型TTS技术跃迁的5大拐点与企业落地避坑清单

第一章&#xff1a;2026奇点智能技术大会&#xff1a;大模型语音合成 2026奇点智能技术大会(https://ml-summit.org) 语音合成技术的范式跃迁 在2026奇点智能技术大会上&#xff0c;大模型驱动的语音合成&#xff08;TTS&#xff09;已突破传统拼接与参数建模的边界&#xff…...

大模型版本控制失效、权重污染、环境不一致——这8类CI/CD反模式正在 silently 毁掉你的AI产品力

第一章&#xff1a;大模型工程化CI/CD流水线设计的范式演进 2026奇点智能技术大会(https://ml-summit.org) 传统软件CI/CD关注代码编译、单元测试与服务部署&#xff0c;而大模型工程化流水线需协同处理数据版本、模型权重、推理服务、评估指标与合规性检查等多维资产。范式演…...

2026论文写作工具清单|全流程+分学科+免费版

核心聚焦&#xff1a;毕业之家 PaperRed 深度解析 &#x1f4cc; 清单速览 工具名称核心定位价格适合人群毕业之家全流程毕业管家1.2元/千字起本科/硕士毕业论文PaperRed查重降重之王基础免费降重刚需用户DeepSeek Scholar理工科神器完全免费理工科硕博豆包学术版免费中文助手…...

【CW32实战】从零到一:MDK环境配置与固件库点亮LED

1. 开发环境准备&#xff1a;MDK安装与固件库获取 第一次接触CW32系列单片机时&#xff0c;环境搭建往往是最让人头疼的环节。我刚开始用CW32F030的时候&#xff0c;光是安装软件就折腾了大半天。下面就把我踩过的坑和验证过的正确方法分享给大家。 首先需要下载MDK开发环境&am…...

YOLO12惊艳效果:复杂背景(如商场、街道)下多尺度目标同步检测

YOLO12惊艳效果&#xff1a;复杂背景&#xff08;如商场、街道&#xff09;下多尺度目标同步检测 1. 引言&#xff1a;当AI遇见复杂世界 想象一下这样的场景&#xff1a;熙熙攘攘的商场里&#xff0c;人来人往的街道上&#xff0c;摄像头需要同时识别远处的小目标和近处的大物…...

QQ音乐解码神器qmcdump:5分钟快速解锁加密音乐文件的完整指南

QQ音乐解码神器qmcdump&#xff1a;5分钟快速解锁加密音乐文件的完整指南 【免费下载链接】qmcdump 一个简单的QQ音乐解码&#xff08;qmcflac/qmc0/qmc3 转 flac/mp3&#xff09;&#xff0c;仅为个人学习参考用。 项目地址: https://gitcode.com/gh_mirrors/qm/qmcdump …...

IP5385:一颗芯片实现30W-100W全协议兼容的移动电源革命

1. 一颗芯片如何颠覆移动电源行业&#xff1f; 还记得五年前出门必带的"充电宝三件套"吗&#xff1f;充电宝本体、专用充电线、还有那个永远找不到的充电头。现在我的背包里只需要一根C to C线&#xff0c;就能给手机、笔记本甚至无人机快速回血——这背后正是IP5385…...

8大网盘直链下载助手技术解析:JavaScript驱动的下载体验革新

8大网盘直链下载助手技术解析&#xff1a;JavaScript驱动的下载体验革新 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里云盘 / 中国移动云盘 …...

ClearerVoice-Studio惊艳效果展示:同一段嘈杂录音三模型增强对比

ClearerVoice-Studio惊艳效果展示&#xff1a;同一段嘈杂录音三模型增强对比 1. 语音增强技术的新标杆 在音频处理领域&#xff0c;嘈杂环境下的语音清晰度提升一直是个技术难题。无论是线上会议的背景噪音&#xff0c;还是街头采访的环境杂音&#xff0c;都会严重影响语音的…...