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

使用 Axios ——个人信息修改与提示框实现

article 2026/4/29 2:29:51

目录

详细介绍：个人信息设置与修改页面实现

1. HTML 结构

2. CSS 样式

3. JavaScript 核心逻辑

a. 信息渲染与表单提交

b. 头像上传与预览

4. 功能详解

5. 总结

提示：

这段代码展示了如何创建一个简单的个人信息设置页面，包含用户个人资料编辑、头像上传和信息提交功能。通过使用HTML、CSS、JavaScript与Axios库，用户能够在页面上修改自己的基本信息，并通过发送HTTP请求更新后端数据。

1. HTML 结构

首先是HTML部分，用于构建用户界面和基本表单。包括了用户信息输入的字段、头像预览、文件上传控件以及导航栏。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"><link rel="stylesheet" href="./css/index.css"><title>个人信息设置</title>
</head>
<body><div class="toast my-toast" data-bs-delay="2000"><div class="toast-body"><div class="alert alert-success info-box">操作成功</div></div></div><div class="container"><ul class="my-nav"><li class="active">基本设置</li><li>安全设置</li><li>账号绑定</li><li>新消息通知</li></ul><div class="content"><div class="info-wrap"><h3 class="title">基本设置</h3><form class="user-form" action="javascript:;"><div class="form-item"><label for="email">邮箱</label><input id="email" name="email" class="email" type="text" placeholder="请输入邮箱" autocomplete="off"></div><div class="form-item"><label for="nickname">昵称</label><input id="nickname" name="nickname" class="nickname" type="text" placeholder="请输入昵称" autocomplete="off"></div><div class="form-item"><label>性别</label><label class="male-label"><input type="radio" name="gender" class="gender" value="0">男</label><label class="male-label"><input type="radio" name="gender" class="gender" value="1">女</label></div><div class="form-item"><label for="desc">个人简介</label><textarea id="desc" name="desc" class="desc" placeholder="请输入个人简介" cols="20" rows="10" autocomplete="off"></textarea></div><button class="submit">提交</button></form></div><div class="avatar-box"><h4 class="avatar-title">头像</h4><img class="prew" src="./img/头像.png" alt=""><label for="upload">更换头像</label><input id="upload" type="file" class="upload"></div></div></div><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script><script src="./lib/form-serialize.js"></script><script src="./js/index.js"></script>
</body>
</html>
2. CSS 样式

在这段代码中，CSS样式文件./css/index.css控制页面布局、样式和视觉效果，确保页面的美观和响应式设计。你可以根据需要进一步修改该样式。

3. JavaScript 核心逻辑
a. 信息渲染与表单提交

页面加载时，会根据用户数据渲染表单字段，允许用户进行编辑。通过Axios请求后台接口，并将修改的数据通过PUT请求提交到服务器。

document.querySelector(".submit").addEventListener("click", () => {const userFrom = document.querySelector(".user-form");const userObj = serialize(userFrom, { hash: true, empty: true });userObj.gender = +userObj.gender; // 确保性别数据是数字userObj.creator = "小宁"; // 设置请求的创建者信息axios({url: "http://hmajax.itheima.net/api/settings", // 后台接口地址method: "put",data: userObj, // 提交的表单数据}).then(result => {console.log(result);// 显示操作成功的提示框const toastDom = document.querySelector(".my-toast");const toast = new bootstrap.Toast(toastDom);toast.show();});
});
b. 头像上传与预览

用户可以通过文件输入框上传头像，头像将上传到后台并且实时更新页面上的预览图。这里使用了FormData来处理文件上传。

document.querySelector('.upload').addEventListener('change', e => {const fd = new FormData();fd.append('avatar', e.target.files[0]); // 获取用户选择的头像文件fd.append('creator', "小宁"); // 创建者信息axios({url: 'http://hmajax.itheima.net/api/avatar', // 上传头像的APImethod: 'put',data: fd, // 上传数据}).then(result => {console.log(result);// 获取返回的头像地址并更新页面上的预览const imgUrl = result.data.data.avatar;document.querySelector('.prew').src = imgUrl; });
});
4. 功能详解
  • 表单字段：页面有邮箱、昵称、性别、个人简介等字段。用户可以编辑这些信息并点击提交按钮提交表单。
  • 头像上传：用户可以选择上传一个头像，页面将显示上传的头像并通过后台接口更新。
  • 信息更新提示：当用户提交表单或者更新头像后，页面会显示一个成功的提示框（Toast），确保用户知道操作成功。
  • 数据提交：所有表单数据通过Axios发送到指定的后台接口，更新用户的个人信息。
5. 总结

本代码实现了一个简易的个人信息管理页面，包含了表单数据的编辑、头像上传、数据提交、用户提示等功能。你可以将这些代码复制到自己的项目中，并根据需求修改后端接口或者样式。这种类型的页面适用于许多需要个人信息管理的应用，如社交平台、个人网站等。

提示：

  • HTML部分：负责页面结构，包括表单字段、头像上传、按钮等。
  • CSS部分：控制页面布局和样式（如字体、间距、按钮样式等），位于./css/index.css。
  • JavaScript部分：实现了表单数据的序列化、头像上传和成功提示框的显示，主要使用了Axios库来进行数据的发送和接收。

希望你能通过这段代码更好地理解如何处理用户信息和头像上传等常见功能。

相关文章：

使用 Axios ——个人信息修改与提示框实现

目录 详细介绍&#xff1a;个人信息设置与修改页面实现 1. HTML 结构 2. CSS 样式 3. JavaScript 核心逻辑 a. 信息渲染与表单提交 b. 头像上传与预览 4. 功能详解 5. 总结 提示&#xff1a; 这段代码展示了如何创建一个简单的个人信息设置页面&#xff0c;包含用户个…...

编程日记 2025/9/19 8:56:09

群晖安装Gitea

安装Docker Docker运行Gitea 上传gitea包&#xff0c;下载地址&#xff1a;https://download.csdn.net/download/hmxm6/90360455 打开docker 点击印象&#xff0c;点击新增&#xff0c;从文件添加 点击启动 可根据情况&#xff0c;进行高级设置&#xff0c;没有就下一步 点击应…...

编程日记 2026/4/11 19:17:29

LabVIEW商业软件开发

在商业软件开发和仪器自动测试领域&#xff0c;LabVIEW以其图形化编程方式、高效的数据采集能力和强大的硬件集成优势&#xff0c;成为众多工程项目的核心开发工具。然而&#xff0c;商业软件的开发远不止编写代码和实现功能那么简单&#xff0c;尤其是在仪器自动测试领域&…...

编程日记 2026/4/25 9:26:58

内容中台赋能人工智能技术提升业务创新能力

内容概要 在当今快速变化的市场环境中&#xff0c;企业需要不断寻求创新以保持竞争力。内容中台作为一种新型的内容管理架构&#xff0c;能够极大地提升企业在内容创建、管理和分发方面的效率。通过与人工智能技术的深度融合&#xff0c;企业能够将海量的数据和信息转化为有价…...

编程日记 2026/4/7 16:06:27

spring 基于构造方法实例化对象

在 spring 中&#xff0c;对象的实例化创建都在 AbstractAutowireCapableBeanFactory#createBeanInstance 方法中完成&#xff0c;其中定义了不少实例化策略&#xff0c;如&#xff1a;Supplier、工厂方法、构造方法、无参构造。其中无参构造&#xff0c;即 AbstractAutowireCa…...

编程日记 2026/2/16 14:02:59

生成式聊天机器人 -- 基于Pytorch + Global Attention + 双向 GRU 实现的SeqToSeq模型 -- 下

生成式聊天机器人 -- 基于Pytorch Global Attention 双向 GRU 实现的SeqToSeq模型 -- 下 训练Masked 损失单次训练过程迭代训练过程 测试贪心解码(Greedy decoding)算法实现对话函数 训练和测试模型完整代码 生成式聊天机器人 – 基于Pytorch Global Attention 双向 GRU 实…...

编程日记 2026/4/27 3:38:55

Vue.js 与第三方插件的集成

Vue.js 与第三方插件的集成 今天我们来聊聊如何在 Vue 项目中集成第三方插件。随着项目功能不断增多&#xff0c;我们常常需要引入各种第三方库和插件&#xff0c;比如国际化、图表、日期处理等&#xff0c;来提升开发效率和用户体验。下面就跟大家分享一下集成第三方插件的常…...

编程日记 2025/5/25 3:11:56

Netty初学九 心跳与空闲检测

一、网络问题 1.连接假死&#xff1a; 连接假死的现象是&#xff1a;在某一端看来&#xff0c;底层的Tcp连接已经断开&#xff0c;但是应用程序没有捕获到&#xff0c;会认为这条连接仍然是存在的。从TCP层面来说&#xff0c;只有收到四次握手数据包或者一个RST数据包才可以表示…...

编程日记 2026/4/22 7:14:41

数据分析如何做EDA

探索性数据分析&#xff08;EDA&#xff0c;Exploratory Data Analysis&#xff09;是数据分析过程中至关重要的一步&#xff0c;其目的是通过统计和可视化技术对数据进行初步分析&#xff0c;从而揭示数据的潜在模式、特征和异常值&#xff0c;并为后续的数据预处理、特征工程…...

编程日记 2026/4/15 23:24:07

AD域控粗略了解

一、前提 转眼大四&#xff0c;目前已入职上饶一公司从事运维工程师&#xff0c;这与我之前干的开发有着很大的差异&#xff0c;也学习到了许多新的知识。今天就写下我对于运维工作中常用的功能——域控的理解。 二、为什么要有域控&#xff0c;即域控的作用 首先我们必须要…...

编程日记 2026/4/8 15:42:34

【计算机网络】TCP/IP 网络模型有哪几层？

目录 应用层 传输层 网络层 网络接口层 总结 为什么要有 TCP/IP 网络模型&#xff1f; 对于同一台设备上的进程间通信&#xff0c;有很多种方式&#xff0c;比如有管道、消息队列、共享内存、信号等方式&#xff0c;而对于不同设备上的进程间通信&#xff0c;就需要网络通…...

编程日记 2026/4/21 14:39:46

使用 Typora 编写 MD 文档：从入门到精通（附赠百度网盘下载地址）

引言 Markdown&#xff08;简称 MD&#xff09;是一种轻量级标记语言&#xff0c;广泛应用于技术写作、博客撰写、文档管理等领域。Typora 是一款功能强大且易于使用的 Markdown 编辑器&#xff0c;支持实时预览、语法高亮、主题切换等功能&#xff0c;深受开发者和写作者的喜…...

编程日记 2026/4/7 3:53:32

Spring统一修改RequestBody

我们编写RestController时&#xff0c;有可能多个接口使用了相同的RequestBody&#xff0c;在一些场景下需求修改传入的RequestBody的值&#xff0c;如果是每个controller中都去修改&#xff0c;代码会比较繁琐&#xff0c;最好的方式是在一个地方统一修改&#xff0c;比如将he…...

编程日记 2026/3/9 4:46:08

【Flink实战】Flink -C实现类路径配置与实现UDF Jar

文章目录 1. 描述2. 使用语法3. -C 适用的 Flink 运行模式4. USING JAR 不可用 1. 描述 Flink 中的 -C 选项用于将 URL 添加到作业的类加载器中。URL可以指向本地、HTTP 服务器或 HDFS 等资源的Jar文件。 注意&#xff1a; 此处的classpath的url必须是一个能够在client&…...

编程日记 2026/4/12 6:54:19

DevOps的个人学习

一、DevOps介绍 软件开发最初是由两个团队组成&#xff1a; 开发团队&#xff1a;负责设计和构建系统。运维团队&#xff1a;负责测试代码后部署上线&#xff0c;确保系统稳定安全运行。 这两个看似目标不同的团队需要协同完成一个软件的开发。DevOps整合了开发与运维团队&a…...

编程日记 2026/3/23 0:43:16

【东莞常平】戴尔R710服务器不开机维修分享

1&#xff1a;2025-02-06一位老客户的朋友刚开工公司ERP服务器一台戴尔老服务器故障无法开机&#xff0c;于是经老客户介绍找到我们。 2&#xff1a;服务器型号是DELL PowerEdge R710 这个服务器至少也有15年以上的使用年限了。 3&#xff1a;客户反馈的故障问题为&#xff1a;…...

编程日记 2026/4/17 13:41:57

STM32自学记录（八）

STM32自学记录 文章目录 STM32自学记录前言一、ADC杂记二、实验1.学习视频2.复现代码 总结 前言 ADC 一、ADC杂记 ADC其实就是一个电压表&#xff0c;把引脚的电压值测出来&#xff0c;放在一个变量里。 ADC&#xff1a;模拟——数字转换器。 ADC可以将引脚上连续变化的模拟电…...

编程日记 2026/4/11 1:47:10

【Java八股】JVM

JVM 1. jvm内存区域分为哪些部分 线程私有的&#xff1a;程序计数器、虚拟机栈、本地方法栈 程序计数器&#xff1a;指示当前线程执行到的字节码文件的行号&#xff0c;是线程切换后保证线程能恢复到正确的执行位置的关键 虚拟机栈&#xff1a;用于存储方法调用的数据&…...

编程日记 2026/2/24 12:48:15

Citespace之关键词爆发检测分析（进阶分析）

在开始citespace进行关键词爆发检测分析之前&#xff0c;如果不会使用citespace的&#xff0c;可以参考我之前这一篇博客&#xff1a; https://blog.csdn.net/m0_56184997/article/details/145536095?spm1001.2014.3001.5501 一、创建工程后进行设置 在创建好工程后&#xf…...

编程日记 2026/4/27 3:27:47

解锁 DeepSeek 模型高效部署密码：蓝耘平台深度剖析与实战应用

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…...

编程日记 2026/4/24 10:33:42

一周发生AI事件总结（02.08）

本周人工智能领域发生的所有事件&#xff1a; Ilya Sutskever的初创公司正洽谈以约200亿美元估值进行融资&#xff1a;据路透社报道&#xff0c;由前OpenAI首席科学家Ilya Sutskever创立的人工智能初创公司Safe Superintelligence正洽谈以“至少”200亿美元的估值进行融资。该…...

编程日记 2026/2/26 0:12:50

NIO——网络编程

文章目录 非阻塞 vs 阻塞阻塞非阻塞多路复用 Selector好处创建绑定 Channel 事件监听 Channel 事件select 何时不阻塞 &#x1f4a1;处理 accept 事件事件发生后能否不处理&#x1f4a1; 处理 read 事件为何要 iter.remove()&#x1f4a1;cancel 的作用&#x1f4a1;不处理边界…...

编程日记 2026/4/13 8:20:22

IDEA关联Tomcat，部署JavaWeb项目

将IDEA与Tomcat关联 创建JavaWeb项目 创建Demo项目 将Tomcat作为依赖引入到Demo中 添加 Web Application 编写前端和后端代码 配置Tomcat server&#xff0c;并运行...

编程日记 2026/4/13 4:43:49

12. k8s二进制集群之kubelet部署

什么是kubelet准备事项创建kubelet-bootstrap.kubeconfig文件创建kubelet配置文件创建kubelet服务配置文件（将kubelet配置成系统服务）分发CA证书及Kubelet-bootstrap.kubeconfig到所有工作节点最后启动工作节点的kubelet服务总结什么是kubelet Kubelet 是 Kubernetes 的核心…...

编程日记 2026/2/27 11:30:01

【5】阿里面试题整理

[1]. 介绍一下ZooKeeper ZooKeeper是一个开源的分布式协调服务&#xff0c;核心功能是通过树形数据模型&#xff08;ZNode&#xff09;和Watch机制&#xff0c;解决分布式系统的一致性问题。 它使用ZAB协议保障数据一致性&#xff0c;典型场景包括分布式锁、配置管理和服务注…...

编程日记 2026/3/13 20:46:46

android的DataBinding的使用

参考&#xff1a; Android基础入门&#xff1a;dataBinding的简单使用 Android DataBinding的使用...

编程日记 2026/2/27 15:32:18

ChatGPT搜索免费开放：AI搜索引擎挑战谷歌霸主地位全面分析

引言 2025年2月6日&#xff0c;OpenAI宣布ChatGPT搜索功能向所有用户免费开放&#xff0c;且无需注册登录。这一重大举措在搜索引擎行业引发巨大反响&#xff0c;有观点认为"谷歌搜索时代即将结束"。本文将深入分析ChatGPT生成式AI搜索对谷歌搜索业务及全球搜索市场…...

编程日记 2026/4/17 14:21:52

从0开始掌握Java开发框架：学习路线与系统指南

目录 1. Java 开发框架的分类1. Web 开发框架2. 持久层框架3. 依赖注入框架4. 微服务框架5. 测试框架 2. 主要框架的作用及关系&#xff08;1&#xff09;Spring Framework&#xff08;2&#xff09;Spring MVC&#xff08;3&#xff09;Spring Boot&#xff08;4&#xff09;M…...

编程日记 2026/4/23 21:01:53

边缘计算网关驱动智慧煤矿智能升级——实时预警、低延时决策与数字孪生护航矿山安全高效运营

迈向智能化煤矿管理新时代 工业物联网和边缘计算技术的迅猛发展&#xff0c;煤矿安全生产与高效运营正迎来全新变革。传统煤矿监控模式由于现场环境复杂、数据采集和传输延时较高&#xff0c;已难以满足当下高标准的安全管理要求。为此&#xff0c;借助边缘计算网关的实时数据…...

编程日记 2026/4/16 19:40:28

每日一题--数组中只出现一次的两个数字

数组中只出现一次的两个数字 题目描述数据范围提示 示例示例1示例2 题解解题思路位运算方法步骤&#xff1a; 代码实现代码解析时间与空间复杂度按位与操作获取最小位1的原理为什么选择最低有效的 1 位而不是其他位&#xff1f; 题目描述 一个整型数组里除了两个数字只出现一次…...

编程日记 2026/2/26 5:40:28