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

使用 Axios 获取用户数据并渲染——个人信息设置

news 2026/2/9 15:42:24

1. HTML 部分（前端页面结构）

HTML 结构解析：

2. JavaScript 部分（信息渲染逻辑）

JavaScript 解析：

3. 完整流程

4. 总结

5. 适用场景

本文将介绍如何通过 Axios 从服务器获取用户信息，并将这些信息动态渲染到个人信息设置页面。用户可以通过表单来查看和更新他们的资料，如邮箱、昵称、性别、个人简介等。为了更直观地理解，本文提供了完整的 HTML 和 JavaScript 示例代码，用户可以直接复制并使用。

1. 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><!-- toast 提示框 --><div class="toast my-toast" data-bs-delay="1500"><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>

HTML 结构解析：

页面头部：使用了 Bootstrap CSS 样式库和自定义样式，设置了页面的基本样式。
toast 提示框：用于在操作成功时显示提示消息。
个人信息表单：包括邮箱、昵称、性别（单选框）、个人简介等输入项，用户可以编辑这些信息。
头像更换部分：用户可以选择新头像并上传，通过 <input type="file"> 实现文件选择。
按钮与提示框：提交表单后，页面会弹出一个提示框，显示操作是否成功。

2. JavaScript 部分（信息渲染逻辑）

/*** 目标1：信息渲染*  1.1 获取用户的数据*  1.2 回显数据到标签上*/axios({url: 'http://hmajax.itheima.net/api/settings', // 确保 URL 是正确的method: 'get',  // GET 请求方法params: {creator: '小宁'  // 请求参数，假设是根据用户名获取设置}
}).then(result => {const userObj = result.data.data; // 假设返回的数据结构是 { data: { ... } }console.log(userObj);// 1. 遍历用户数据并渲染到页面Object.keys(userObj).forEach(key => {if (key === 'avatar') {// 设置头像document.querySelector('.prew').src = userObj[key];} else if (key === 'gender') {// 设置性别const RadioList = document.querySelectorAll('.gender');const gNum = userObj[key];  // 性别值是 0 或 1RadioList[gNum].checked = true;  // 根据性别值选择相应的单选框} else {// 对其他字段（如姓名、邮箱、简介等）设置值document.querySelector(`.${key}`).value = userObj[key];}});
}).catch(error => {console.error('请求失败:', error);  // 错误处理
});

JavaScript 解析：

发送 GET 请求：
- 使用 axios 发送 GET 请求，params 参数传递给服务器以获取用户设置数据。这里以 creator: '小宁' 为请求参数，表示获取小宁的用户设置。
遍历并渲染数据：
- Object.keys(userObj) 获取返回数据的所有字段名。
- 根据不同字段渲染到页面：
  - 头像：如果字段名为 avatar，则通过 document.querySelector('.prew') 获取头像图片元素，更新其 src 属性。
  - 性别：如果字段名为 gender，根据返回的性别值（0 或 1）更新相应的单选框。
  - 其他字段：通过 document.querySelector(\.${key}`)获取相应的输入框或文本区域，并设置其value` 为返回的数据值。
错误处理：
- 使用 .catch() 捕获请求中的任何错误，方便调试。

3. 完整流程

页面加载时，JavaScript 发送 GET 请求至服务器，获取小宁的用户数据。
服务器返回的数据后，JavaScript 将数据逐个渲染到页面上的输入框、单选框、头像等元素。
用户可以查看和编辑个人信息，修改内容后可以提交表单。

4. 总结

这个示例展示了如何使用 Axios 从服务器获取用户的个人设置，并将这些设置动态渲染到 HTML 页面中。使用这种方法，可以轻松实现用户资料显示和编辑功能，并通过简单的表单更新用户数据。

5. 适用场景

个人信息设置页面：用户可以查看和修改自己的信息，如邮箱、昵称、性别等。
用户资料展示：适用于展示用户信息并允许编辑的场景，如社交网站、论坛等。
后台管理系统：管理员可以通过类似的方法展示并更新用户资料。

通过这个简单的代码示例，你可以轻松实现一个功能完备的个人资料管理页面，提升用户体验。

使用 Axios 获取用户数据并渲染——个人信息设置

目录 1. HTML 部分（前端页面结构） HTML 结构解析： 2. JavaScript 部分（信息渲染逻辑） JavaScript 解析： 3. 完整流程 4. 总结 5. 适用场景本文将介绍如何通过 Axios 从服务器获取用户信息&#xff0…...

编程日记 2025/2/8 8:52:19

DeepSeek在FPGA/IC开发中的创新应用与未来潜力

随着人工智能技术的飞速发展，以DeepSeek为代表的大语言模型（LLM）正在逐步渗透到传统硬件开发领域。在FPGA（现场可编程门阵列）和IC（集成电路）开发这一技术密集型行业中，DeepSeek凭借其…...

编程日记 2025/2/8 8:51:16

【GitLab CI/CD 实践】从 0 到 1 搭建高效自动化部署流程

网罗开发 （小红书、快手、视频号同名） 大家好，我是展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、Harmony OS、Java、Python等…...

编程日记 2025/2/8 8:48:12

【DeepSeek-R1训练笔记】随手记录一些训练log

背景说明 DeepSeek系列解读请移步我的上一篇blog：【完整版】DeepSeek-R1大模型学习笔记（架构、训练、Infra）代码仓库【科大的大四老哥太太太太太值得倾佩了】：https://github.com/Unakar/Logic-RLDeepSeek-R1-Zero复现文档&#…...

编程日记 2025/2/8 8:46:10

【自开发工具介绍】SQLSERVER的ImpDp和ExpDp工具04

SQLSERVER的ImpDp和ExpDp工具演示 1、指定某些表作为导出对象外 (-exclude_table) 验证用：导出的表，导入到新的数据库 2、指定某些表作为导出对象外 (-exclude_table) 支持模糊检索，可以使用星号以s开头的表作为导出对象外，…...

编程日记 2025/2/8 8:40:04

「全网最细 + 实战源码案例」设计模式——策略模式

核心思想策略模式（Strategy Pattern）是一种行为型设计模式，用于定义一系列算法或策略，将它们封装成独立的类，并使它们可以相互替换，而不影响客户端的代码，提高代码的可维护性和扩展性。结构 …...

编程日记 2025/2/8 8:38:02

题目 <html> <title>Heres a secret. Can you find it?</title> <?phpif(isset($_GET[file])){$file $_GET[file];include($file); }else{highlight_file(__FILE__); } ?> </html> 读取flag /?filephp://filter/readconvert.base64-encode…...

编程日记 2025/2/8 8:37:01

【AI日记】25.02.07 探索开辟第二战场

【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】【AI日记】【读书与思考】【AI应用】探索探索如何做视频博主一边坚持主攻方向（ 找工作，包括 AI 学习和 kaggle比赛），一边尝试开辟第二战场（比如：视…...

编程日记 2025/2/8 8:33:58

path 路径模块

在开发基于 Node.js 的应用程序时，处理文件路径是一个常见的需求。为了简化这一过程并避免跨平台兼容性问题，Node.js 提供了 path 模块。该模块提供了一系列实用的方法来解析、格式化和操作文件路径。本文将详细介绍 path 模块的功能及其使用方法&#x…...

编程日记 2025/2/8 8:32:57

SpringBoot中的多环境配置管理

SpringBoot中的多环境配置管理文章目录 SpringBoot中的多环境配置管理SpringBoot中的多环境配置管理多环境配置的概述1. 为什么需要多环境配置？2. Spring Boot 中如何实现多环境配置？3. 多环境配置的应用场景4. 如何实现配置隔离？ Spring B…...

编程日记 2025/2/8 8:14:39

mac下生成.icns图标

笔记原因： 今日需要在mac下开发涉及图标文件的使用及icons文件的生成，所以记录一下。网络上都是一堆命令行需要打印太麻烦了，写一个一键脚本。步骤一将需要生成的png格式文件重命名为“pic.png” mv xxxx.png pic.png 步骤二下载我…...

编程日记 2025/2/8 8:09:33

关于JS继承的七种方式和理解

1.原型链继承 function Fun1() {this.name parentthis.play [1, 2, 3] } function Fun2() {this.type child }Fun2.prototype new Fun1()let s1 new Fun2() let s2 new Fun2() s1.play.push(4) console.log(s1.play, s2.play) // [1, 2, 3, 4] [1, 2, 3, 4]可以看到两个…...

编程日记 2025/2/8 8:08:32

储能系统-系统架构

已更新系列文章包括104、61850、modbus 、单片机等，欢迎关注 IEC61850实现方案和测试-1-CSDN博客快速了解104协议-CSDN博客 104调试工具2_104协议调试工具-CSDN博客 1 电池储能系统（BESS） 架构电池储能系统主要包括、电池、pcs、本地控制…...

编程日记 2025/2/8 8:07:31

AI智算-k8s部署DeepSeek Janus-Pro-7B 多模态大模型

文章目录简介环境依赖模型下载下载Janus库GPU环境镜像模型manifest调用Janus多模态文生图简介 DeepSeek Janus Pro 作为一款强大的多模态理解与生成框架，正在成为研究人员和开发者的热门选择。本文将详细介绍如何在云原生k8s环境中部署配置和使用 DeepSeek Janus…...

编程日记 2025/2/8 8:05:28

【截图】selenium自动通过浏览器截取指定元素div的图片

【截图】selenium自动通过浏览器截取指定元素div的图片思路截取完整网页截图通过元素的坐标截图到指定位置的图片前提是已经获取到 driver 了 # 定位目标divtarget_div driver.find_element(By.CLASS_NAME, headlines-right)# 获取div的位置和大小location target_div…...

编程日记 2025/2/8 8:02:25

如何导入第三方sdk | 引入第三方jar 包

0. 背景1. 上传私有仓库2. 使用本地文件系统 0. 背景对接一些第三方功能，会拿到第三方的sdk，也就是jar包，如何导入呢 1. 上传私有仓库最好的方式就是将第三方jar包，上传到私有的仓库，这样直接正常在pom引用即可如果只…...

编程日记 2025/2/8 8:01:24

HarmonyOS 5.0应用开发——ContentSlot的使用

【高心星出品】文章目录 ContentSlot的使用使用方法案例运行结果完整代码 ContentSlot的使用用于渲染并管理Native层使用C-API创建的组件同时也支持ArkTS创建的NodeContent对象。支持混合模式开发，当容器是ArkTS组件，子组件在Native侧创建时&#…...

编程日记 2025/2/8 7:55:18

C#常用集合优缺点对比

先上结论： 在C#中，链表、一维数组、字典、List<T>和ArrayList是常见的数据集合类型，它们各有优缺点，适用于不同的场景。以下是它们的比较： 1. 一维数组 (T[]) 优点： 性能高：数组在内存中…...

编程日记 2025/2/8 7:54:17

基于CLIP视觉语言大模型的行人重识别方法的简单框架设计

以下是一个基于CLIP视觉语言大模型的行人重识别方法的简单框架设计，用于数据集测试。我们将使用torch和clip库，假设数据集是一个包含行人图像的文件夹结构，每个子文件夹代表一个行人身份。步骤概述安装必要的库加载CLIP模型定义数据集类提…...

编程日记 2025/2/8 7:47:10

RabbitMQ 从入门到精通：从工作模式到集群部署实战（三）

文章目录使用CLI管理RabbitMQrabbitmqctlrabbitmq-queuesrabbitmq-diagnosticsrabbitmq-pluginsrabbitmq-streamsrabbitmq-upgraderabbitmqadmin 使用CLI管理RabbitMQ RabbitMQ CLI 工具需要安装兼容的 Erlang/OTP版本。这些工具假定系统区域设置为 UTF-8（例如en…...

编程日记 2025/2/8 7:46:09

vscode里如何用git

打开vs终端执行如下： 1 初始化 Git 仓库（如果尚未初始化） git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明在2011版本的gb28181协议中，拉取视频流只要求udp方式，从2016开始要求新增支持tcp被动和tcp主动两种方式，udp理论上会丢包的，所以实际使用过程可能会出现画面花屏的情况，而tcp肯定不丢包，起码…...

编程新知 2026/2/5 4:23:49

云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风，以**「云启出海，智联未来｜打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办，现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

编程新知 2026/1/30 0:00:28

2021-03-15 iview一些问题

1.iview 在使用tree组件时，发现没有set类的方法，只有get，那么要改变tree值，只能遍历treeData，递归修改treeData的checked，发现无法更改，原因在于check模式下，子元素的勾选状态跟父节…...

编程新知 2026/2/5 3:29:13

C++.OpenGL （10/64）基础光照（Basic Lighting）

基础光照（Basic Lighting）冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

编程新知 2026/1/20 2:37:04