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

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

news 2026/3/30 16:49:03

目录

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

3. 完整流程

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

4. 总结

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

5. 适用场景

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

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

相关文章：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[MoeCTF 2022]baby_file

题目 <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应用】 探索 探索如何做视频博主一边坚持主攻方向&#xff08; 找工作&#xff0c;包括 AI 学习和 kaggle比赛&#xff09;&#xff0c;一边尝试开辟第二战场&#xff08;比如&#xff1a;视…...

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

path 路径模块

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

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

SpringBoot中的多环境配置管理

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

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

mac下生成.icns图标

笔记原因&#xff1a; 今日需要在mac下开发涉及图标文件的使用及icons文件的生成&#xff0c;所以记录一下。 网络上都是一堆命令行需要打印太麻烦了&#xff0c;写一个一键脚本。 步骤一 将需要生成的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 、单片机等&#xff0c;欢迎关注 IEC61850实现方案和测试-1-CSDN博客 快速了解104协议-CSDN博客 104调试工具2_104协议调试工具-CSDN博客 1 电池储能系统&#xff08;BESS&#xff09; 架构 电池储能系统主要包括、电池、pcs、本地控制…...

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

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

文章目录 简介环境依赖模型下载下载Janus库GPU环境镜像模型manifest调用Janus多模态文生图 简介 DeepSeek Janus Pro 作为一款强大的多模态理解与生成框架&#xff0c;正在成为研究人员和开发者的热门选择。本文将详细介绍如何在云原生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. 背景 对接一些第三方功能&#xff0c;会拿到第三方的sdk&#xff0c;也就是jar包&#xff0c;如何导入呢 1. 上传私有仓库 最好的方式就是将第三方jar包&#xff0c;上传到私有的仓库&#xff0c;这样直接正常在pom引用即可如果只…...

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

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

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

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

C#常用集合优缺点对比

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

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

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

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

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

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

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

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

【2026唯一认证流式部署标准】：FastAPI 2.0 + Uvicorn 24.8 + ASGI 4.0协同流控协议详解（含OpenTelemetry追踪模板）

第一章&#xff1a;FastAPI 2.0 异步 AI 流式响应的范式演进与2026标准定位FastAPI 2.0 将原生支持全链路异步流式响应&#xff08;StreamingResponse&#xff09;与 Server-Sent Events&#xff08;SSE&#xff09;语义融合&#xff0c;标志着 AI 应用后端从“请求-响应”单次…...

编程新知 2026/3/30 16:09:06

ScintillaNET：打造专业级代码编辑器的终极Windows Forms解决方案

ScintillaNET&#xff1a;打造专业级代码编辑器的终极Windows Forms解决方案 【免费下载链接】ScintillaNET A Windows Forms control, wrapper, and bindings for the Scintilla text editor. 项目地址: https://gitcode.com/gh_mirrors/sc/ScintillaNET ScintillaNET是…...

编程新知 2026/3/30 15:50:54

小白也能玩转DeepSeek-R1：Ollama一键部署推理模型实战

小白也能玩转DeepSeek-R1&#xff1a;Ollama一键部署推理模型实战 还在为复杂的AI模型部署而烦恼吗&#xff1f;DeepSeek-R1-Distill-Llama-8B作为一款强大的文本生成模型&#xff0c;现在通过Ollama平台可以轻松实现一键部署。本文将带你从零开始&#xff0c;只需3个简单步骤…...

编程新知 2026/3/30 15:26:46

3步实现UMA模型吸附能预测：从数据准备到结果验证完整指南

3步实现UMA模型吸附能预测&#xff1a;从数据准备到结果验证完整指南 【免费下载链接】ocp Open Catalyst Projects library of machine learning methods for catalysis 项目地址: https://gitcode.com/GitHub_Trending/oc/ocp 在催化材料研究中&#xff0c;吸附能是评…...

编程新知 2026/3/30 14:34:17

美图靠AI一年收入38亿，不靠免费大模型API，靠的是什么？

财报数据显示&#xff0c;美图2025年全年实现营业收入38.6亿元&#xff0c;同比大幅增长28.8%&#xff0c;整体营收规模再创新高&#xff0c;展现出核心业务的强劲增长韧性。不过公司常规账面净利润为7亿元&#xff0c;同比下降12.7%&#xff0c;看似利润下滑的背后&#xff0c…...

编程新知 2026/3/30 13:22:52

告别手动维护！用DataX-Web搞定MySQL到ClickHouse的增量同步（含时间戳配置）

高效构建MySQL到ClickHouse的增量同步管道&#xff1a;DataX-Web实战指南 在数据驱动的商业环境中&#xff0c;企业每天都会产生海量的业务数据。这些数据通常存储在OLTP系统如MySQL中&#xff0c;但为了进行分析和报表生成&#xff0c;我们需要将这些数据同步到OLTP系统如Clic…...

编程新知 2026/3/30 13:10:30

万兆NAS成本大揭秘：用MicroServer Gen8+二手X520网卡搭建全流程（含读写性能实测）

万兆NAS成本大揭秘&#xff1a;用MicroServer Gen8二手X520网卡搭建全流程&#xff08;含读写性能实测&#xff09; 在追求高速网络存储的时代&#xff0c;万兆NAS已成为技术爱好者的新宠。本文将带你深入了解如何以最低成本搭建一套性能不俗的万兆NAS系统&#xff0c;核心硬件…...

编程新知 2026/3/30 12:52:21

AIGlasses OS Pro性能调优指南：跳帧、画面缩放设置，流畅运行低算力设备

AIGlasses OS Pro性能调优指南&#xff1a;跳帧、画面缩放设置&#xff0c;流畅运行低算力设备 智能眼镜作为穿戴设备&#xff0c;其计算资源往往有限。AIGlasses OS Pro作为一款本地运行的智能视觉系统&#xff0c;如何在有限的硬件资源下保持流畅运行&#xff0c;是许多开发…...

编程新知 2026/3/30 11:17:40

Matlab APP Designer避坑指南：字符进度条不更新的解决方案

Matlab APP Designer避坑指南&#xff1a;字符进度条不更新的解决方案 在Matlab APP Designer开发过程中&#xff0c;进度条是用户交互体验的重要组成部分。许多开发者都遇到过这样的困扰&#xff1a;精心设计的字符进度条在运行时却"卡住"不动&#xff0c;直到整个计…...

编程新知 2026/3/30 9:29:51

破解Swin Transformer部署困境：从环境适配到性能突围的全维度方案

破解Swin Transformer部署困境&#xff1a;从环境适配到性能突围的全维度方案 【免费下载链接】Swin-Transformer This is an official implementation for "Swin Transformer: Hierarchical Vision Transformer using Shifted Windows". 项目地址: https://gitcod…...

编程新知 2026/3/30 5:58:35