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

AJAX 02 案例、Bootstrap框架

news 2025/11/16 3:54:43

AJAX 学习

  • AJAX 2 综合案例
    • 黑马 API
    • 01 图书管理
      • Bootstrap 官网
      • Bootstrap 弹框
      • 图书管理-渲染列表
      • 图书管理-添加图书
      • 图书管理-删除图书
      • 图书管理 - 编辑图书
    • 02 图片上传
    • 03 更换图片
    • 04 个人信息设置
      • 信息渲染
      • 头像修改
        • 补充知识点：label扩大表单的范围

AJAX 2 综合案例

黑马 API

传送门 https://apifox.com/apidoc/shared-1b0dd84f-faa8-435d-b355-5a8a329e34a8

01 图书管理

在这里插入图片描述

Bootstrap 官网

中文网：https://www.bootcss.com/
Bootstrap引入：https://getbootstrap.com/

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

Bootstrap 弹框

功能： 不离开当前页面，显示单独内容，供用户操作

  1. 通过属性控制，弹框显示或隐藏 => 使用场景：单纯显示/隐藏
  2. 通过 JS 控制，弹框显示或隐藏 => 额外逻辑代码

步骤：

  1. 引入 bootstrap.css 和 bootstrap.js
  2. 准备弹框标签，确认结构
  3. 通过自定义属性，控制弹框的显示和隐藏

Bootstrap引入有两种方法，① 是本地方式引入Bootstrap（在官网下载之后 在HTML文件中引入）

② 通过CDN引用Bootstrap。

黑马程序员这个视频是使用 jsdelivr 这个CDN进行引入。JSDelivr是一款开源的免费公共CDN。它是目前第二受欢迎的公共CDN。2020年10月14日，JSDelivr成为Bootstrap的官方CDN。

https://getbootstrap.com/

在这里插入图片描述

在这里插入图片描述

图书管理-渲染列表

自己的图书数据：给自己起个外号，并告诉服务器（每个人的图书数据都不一样），默认会有三本书，基于这三本书做数据的增删改查
在这里插入图片描述

图书管理-添加图书

点击添加按钮=>弹框=>添加/取消=>渲染页面

图书管理-删除图书

绑定点击事件（获取图书ID）=>调用删除接口=>刷新-图书列表

图书管理 - 编辑图书

编辑图书-弹框（显示&隐藏）=>表单（数据回显）=>保存修改&刷新列表

要从服务器中获取，不能直接从表单里拿

02 图片上传

1、获取图片文件对象

2、使用 FormData 携带图片文件

const fd = new FormData()
fd.append(参数名，值)
这里的参数名与接口文档中定义的 img 保持一致
参数名字一定要写单引号fd.append('avatar', e.target.files[0])fd.append('creator', creator)

在这里插入图片描述

3、提交表单数据到服务器，使用图片 url 网址

<body><!-- 文件选择元素 --><input type="file" class="upload"><img src="" alt="" class="myImg"><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*** 目标：图片上传，显示到网页上*  1. 获取图片文件*  2. 使用 FormData 携带图片文件*  3. 提交到服务器，获取图片url网址使用*/// 文件选择元素=>change改变事件document.querySelector('.upload').addEventListener('change',e => {// 获取图片文件console.log(e.target);console.log(e.target.files);console.log(e.target.files[0]);// 使用 FormData 携带图片文件const fd = new FormData()fd.append('img', e.target.files[0])axios({url: 'http://hmajax.itheima.net/api/uploadimg',method: 'POST',data: fd}).then(result => {console.log(result);const imgURL = result.data.data.urldocument.querySelector('.myImg').src = imgURL})})</script>
</body>

03 更换图片

表单关联，label和input的值关联，这样点击label 就能触发表单

在这里插入图片描述

04 个人信息设置

步骤：

  1. 信息渲染
  2. 头像修改
  3. 信息修改 提交表单
  4. 结果提示

怎么分析步骤？网址一打开，首先肯定要渲染页面，然后再分析修改功能

信息渲染

自己的用户信息：给自己起个外号，并告诉服务器，获取对应的用户信息

获取数据=>渲染信息

头像修改

获取到用户选择的头像文件=>提交到服务器=>返回服务器上 图片的URL网址=> 渲染

补充知识点：label扩大表单的范围

label 扩大表单的范围，用 label 中for属性的值，关联了 input 表单里面 ID的值，所以点在 label 上就等于点在了文件选择表单上

在这里插入图片描述

相关文章：

AJAX 02 案例、Bootstrap框架

AJAX 学习 AJAX 2 综合案例黑马 API01 图书管理Bootstrap 官网Bootstrap 弹框图书管理-渲染列表图书管理-添加图书图书管理-删除图书图书管理 - 编辑图书 02 图片上传03 更换图片04 个人信息设置信息渲染头像修改补充知识点&#xff1a;label扩大表单的范围 AJAX 2 综合案例 黑…...

编程日记 2024/3/22 2:11:17

SinoDB客户端工具dbaccess

类似Oracle的客户端工具sqlplus&#xff0c;Mysql的客户端工具mysql&#xff0c;SinoDB数据库也有自带的命令行客户端工具dbaccess。 dbaccess 识别用户输入&#xff0c;将用户输入的 SQL 语句打包发送给 SinoDB 数据库服务器执行&#xff0c;然后接收服务器的执行结果&#xf…...

编程日记 2024/3/22 2:09:16

postman学习

一、如何学习postman工具 1、下载和安装 Postman&#xff1a; 首先&#xff0c;从 Postman 官方网站&#xff08;https://www.postman.com&#xff09;下载并安装 Postman 应用程序。 2、了解基本概念&#xff1a; 在开始学习之前&#xff0c;了解一些基本概念&#xff0c;…...

编程日记 2024/3/22 2:07:14

【Linux】初识进程

目录 操作系统是什么 设计操作系统的目的 操作系统的定位 如何理解管理 管理的本质 管理的例子 计算机的管理概念图 操作系统管理逻辑的六字真言 系统调用和库函数的概念 进程 进程的概念 什么是PCB&#xff1f; PCB的主要内容 如何查看进程&#xff1f; 通过系统…...

编程日记 2024/3/22 2:04:11

有关Theano和PyTensor库

根据Github里面的介绍&#xff0c;PyTensor是源于Theano&#xff0c; Theano目前应该已经不再开发了&#xff0c;更新都是很多年前。 因此PyTensor在背景介绍中说 PyTensor is a fork of Aesara, which is a fork of Theano. Theano和PyTensor都是计算相关的库&#xff0c;可以…...

编程日记 2024/3/22 2:02:08

用 Open-Sora 高效创作视频，让创意触手可及

近年来&#xff0c;视频内容以爆炸式增长席卷了我们的生活。从短视频平台到直播带货&#xff0c;视频正成为人们获取信息和娱乐的主要方式。然而&#xff0c;传统视频制作流程往往耗时费力&#xff0c;对于普通用户来说门槛较高。 为了降低视频创作门槛&#xff0c;让更多人享…...

编程日记 2024/3/22 2:00:06

Git版本管理工具

前言&#xff1a; 本文记录学习使用 Git 版本管理工具的学习笔记&#xff0c;通过阅读参考链接中的博文和实际操作&#xff0c;快速的上手使用 Git 工具。 本文参考了引用链接博文里的内容。 引用: Git使用教程-配置管理 git reset详解-CSDN博客 3、Git使用不完全指南&am…...

编程日记 2024/3/22 1:51:58

微信小程序选择器picker的使用（省市区）

index.wxml picker中的 moderegion模式&#xff0c;这里同element中的select不同的是&#xff0c;不需要自己在绑定数据原&#xff0c;默认就包含了省市区的整体数据 <view class"section"><view class"section__title">省市区选择器</vie…...

编程日记 2024/3/22 1:49:56

std::shared_ptr与std::make_unique在类函数中的使用

在最近学习cartographer算法的时候&#xff0c;发现源码中大量的使用了std::shared_ptr与std::make_unique&#xff0c;对于这些东西之前不是很了解&#xff0c;为了更好的理解源代码&#xff0c;因此简单学习了一下这块内容的使用&#xff0c;在这里简单记个笔记。 std::shar…...

编程日记 2024/3/22 1:45:52

flutter 局部view更新，dialog更新进度，dialog更新

局部更新有好几种方法&#xff0c;本次使用的是 StatefulBuilder 定义 customState去更新对话框内容 import package:flutter/cupertino.dart; import package:flutter/material.dart;class ProgressDialog {final BuildContext context;BuildContext? dialogContext;double _…...

编程日记 2024/3/22 1:43:50

Lombok：@Delegate优化代码利器

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 一、Delegate介绍 二、示例 三、使用场景 四、使用注意事项 总结 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、Delegate介绍 Dele…...

编程日记 2024/3/22 1:42:48

【C语言】对称密码——栅栏的加密和解密

栅栏密码的原理&#xff1a; 栅栏层数n ①把将要传递的信息中的字母交替排成上下n行。 ②再将下面每一行字母排依次在上面一行的后边&#xff0c;从而形成一段密码。 ③例如&#xff1a;栅栏层数为2 明文&#xff1a;THE LONGEST DAY MUST HAVE AN END 加密&#xff1a; …...

编程日记 2024/3/22 1:40:46

一、rv1126开发之视频输入和视频编码

RV1126 H264/HEVC编码流程 一、RV1126编码的流程图&#xff1a; 二、每个代码模块详细讲解 2.1. VI模块的创建 VI模块的初始化&#xff1a;关键在于VI_CHN_ATTR_S结构体&#xff0c;这个结构体是VI设置的结构体。这个结构体的成员变量包括&#xff1a;pcVideoNode&#xff0…...

编程日记 2024/3/22 1:39:45

4.1 用源文件写汇编代码

汇编语言 1. 源程序 1.1 伪指令 汇编指令是有对应的机器码的指令&#xff0c;可以被编译为机器指令&#xff0c;最终为CPU所执行伪指令没有对应的机器指令&#xff0c;最终不被CPU所执行伪指令是由编译器来执行的指令&#xff0c;编译器根据伪指令来进行相关的编译工作 1.2…...

编程日记 2024/3/22 1:35:42

Linux TCP参数——tcp_abort_on_overflow

文章目录 tcp_abort_on_overflow全连接队列是什么&#xff1f;如何改变队列大小&#xff1f;内核源码流程命令查看总结 tcp_abort_on_overflow 英文翻译理解&#xff1a;溢出中止 所以&#xff0c;溢出指的是什么溢出&#xff1f; Linux中会维护socket全连接队列&#xff0c;所…...

编程日记 2024/3/22 1:34:41

jupyter notebook设置代码提示方法

在命令行运行以下代码&#xff1a; pip install jupyter_contrib_nbextensionsjupyter contrib nbextension install --userpip install jupyter_nbextensions_configuratorjupyter nbextensions_configurator enable --user &#xff08;有时安装第一行后会自动执行第二行&a…...

编程日记 2024/3/22 1:33:40

Linux 一点查询资料

Linux 一点查询资料 Linux101 Linux入门教程 鸟哥的Linux私房菜 Harley Hahn’s Guide to Unix and Linux 文件管理 - cd, pwd, mkdir, rmdir, ls, cp, rm, mv, tar 文件检索 - cat, more, less, head, tail, file, find 输入输出控制 - 重定向, 管道, tee, xargs 文本处理 -…...

编程日记 2024/3/22 1:31:38

如何快速搭建一个完整的vue2+element-ui的项目-二

技术细节-继续配置 提示&#xff1a;你以为这样就完了吗,其实还有很多东西需要我们自己手写的 例如&#xff1a; element-ui的配置样式重置配置src使用的配置elinst配置axios异步请求的二次封转配置语言国际化配置(这个看需求,我这里就不用配置了)vuex的配置mixins的配置开发环…...

编程日记 2024/3/22 1:30:37

多语言LLM的状态：超越英语

多语言大语言模型的发展现状&#xff1a;超越英语 引言 据微软研究院的数据显示&#xff0c;世界上大约88%的语言&#xff0c;即12亿人的母语&#xff0c;缺乏对大型语言模型&#xff08;LLM&#xff09;的访问。这是因为大多数LLM都是以英语为中心的&#xff0c;即它们大多是…...

编程日记 2024/3/22 1:29:36

kafka什么情况下会认为发送失败进而去重试

在Kafka中&#xff0c;发送消息的过程是异步的&#xff0c;即消息后不会立即得到发送结果。Kafka会将消息添加到发送缓冲区&#xff0c;并立即返回一个成功的响应。因此&#xff0c;Kafka并不会直接知道消息是否成功发送到了目标主题的分区。 Kafka在以下情况下会认为发送失败…...

编程日记 2024/3/22 1:26:33

网络编程（Modbus进阶）

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

编程新知 2025/11/15 22:38:13

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

编程新知 2025/11/11 22:18:17

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...

编程新知 2025/9/16 21:01:58

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/9/19 4:31:58

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/10/22 23:35:38

Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

编程新知 2025/11/12 19:49:31

linux 错误码总结

1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/9/24 3:38:34

Visual Studio Code 扩展

Visual Studio Code 扩展 change-case 大小写转换EmmyLua for VSCode 调试插件Bookmarks 书签 change-case 大小写转换 https://marketplace.visualstudio.com/items?itemNamewmaurer.change-case 选中单词后&#xff0c;命令 changeCase.commands 可预览转换效果 EmmyLua…...

编程新知 2025/11/15 14:32:27

[USACO23FEB] Bakery S

题目描述 Bessie 开了一家面包店! 在她的面包店里&#xff0c;Bessie 有一个烤箱&#xff0c;可以在 t C t_C tC​ 的时间内生产一块饼干或在 t M t_M tM​ 单位时间内生产一块松糕。 ( 1 ≤ t C , t M ≤ 10 9 ) (1 \le t_C,t_M \le 10^9) (1≤tC​,tM​≤109)。由于空间…...

编程新知 2025/7/7 14:36:50