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

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

news 2026/5/16 12:18:37

目录

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

终极指南：如何为yt-dlp-gui扩展新的视频平台支持

终极指南&#xff1a;如何为yt-dlp-gui扩展新的视频平台支持 【免费下载链接】yt-dlp-gui Windows GUI for yt-dlp 项目地址: https://gitcode.com/gh_mirrors/yt/yt-dlp-gui 你是否曾遇到过想要下载某个小众视频平台的视频&#xff0c;却发现yt-dlp-gui无法识别链接&am…...

编程新知 2026/5/16 10:42:48

如何3步搞定LaTeX中文排版？告别字体缺失烦恼的终极方案

如何3步搞定LaTeX中文排版&#xff1f;告别字体缺失烦恼的终极方案 【免费下载链接】latex-chinese-fonts Simplified Chinese fonts for the LaTeX typesetting. 项目地址: https://gitcode.com/gh_mirrors/la/latex-chinese-fonts 还在为LaTeX中文排版头疼吗&#xff…...

编程新知 2026/5/16 8:41:02

基于RAG的Obsidian智能知识库：本地部署与优化实战

1. 项目概述&#xff1a;当知识管理遇上大语言模型 如果你和我一样&#xff0c;是 Obsidian 的深度用户&#xff0c;同时又对大语言模型&#xff08;LLM&#xff09;的智能涌现能力感到着迷&#xff0c;那么你肯定也想过一个问题&#xff1a;能不能让我的知识库“活”起来&…...

编程新知 2026/5/16 8:12:36

AI技能工程框架解析：从模块化设计到智能体构建实战

1. 项目概述&#xff1a;一个面向技能复现与创造的AI工具集最近在GitHub上看到一个挺有意思的项目&#xff0c;叫“skill-creator-pro”。光看这个名字&#xff0c;你可能会有点摸不着头脑&#xff0c;这到底是做什么的&#xff1f;是教人学技能的&#xff0c;还是生成技能的&a…...

编程新知 2026/5/16 8:12:33

基于SSE的轻量级实时通信库Hermes：Web应用实时消息推送实践

1. 项目概述&#xff1a;一个为Web应用量身打造的“信使”最近在折腾一个前后端分离的项目&#xff0c;后端服务部署在云端&#xff0c;前端应用则直接跑在用户的浏览器里。一个老生常谈的问题又摆在了面前&#xff1a;如何让前端能实时、可靠地获取后端的数据变更通知&#xf…...

编程新知 2026/5/16 8:04:11

可编程投币器集成指南：从硬件连接到游戏积分映射

1. 项目概述&#xff1a;从“投币”到“积分”的硬件魔法“Insert Coin”——对于任何一个经历过街机黄金年代的玩家来说&#xff0c;这三个字背后所承载的&#xff0c;远不止是启动游戏的指令&#xff0c;更是一种充满仪式感的期待。如今&#xff0c;我们大多通过模拟器上的一…...

编程新知 2026/5/16 7:33:53

Wonder3D完整解决方案：从单张图片到高质量3D模型的5步实施路径

Wonder3D完整解决方案&#xff1a;从单张图片到高质量3D模型的5步实施路径 【免费下载链接】Wonder3D Single Image to 3D using Cross-Domain Diffusion for 3D Generation 项目地址: https://gitcode.com/gh_mirrors/wo/Wonder3D 面对传统3D建模复杂耗时、学习曲线陡峭…...

编程新知 2026/5/16 7:25:35

前端开发者如何构建个人工具箱：从工具函数到配置片段的效率实践

1. 项目概述&#xff1a;一个前端开发者的“百宝箱”仓库在多年的前端开发生涯中&#xff0c;我养成了一个习惯&#xff1a;每当遇到一个精巧的解决方案、一个高频使用的工具函数&#xff0c;或者一个值得反复琢磨的配置片段&#xff0c;我都会把它们收集起来。久而久之&#x…...

编程新知 2026/5/16 6:09:20

不只是安装：在龙芯2k1000LA上为Loongnix配置WiFi、蓝牙与触摸屏驱动的完整流程

龙芯2k1000LA开发板外设驱动深度配置指南&#xff1a;从WiFi到触摸屏的全栈解决方案 在国产化硬件开发领域&#xff0c;龙芯2k1000LA开发板凭借其完全自主的LoongArch架构&#xff0c;正成为物联网和嵌入式设备开发者的重要选择平台。不同于x86架构的"开箱即用"体验&…...

编程新知 2026/5/16 5:07:25

NoFences：你的Windows桌面整理革命，告别杂乱无章的终极方案

NoFences&#xff1a;你的Windows桌面整理革命&#xff0c;告别杂乱无章的终极方案 【免费下载链接】NoFences &#x1f6a7; Open Source Stardock Fences alternative 项目地址: https://gitcode.com/gh_mirrors/no/NoFences 你是否每天都要在几十个图标中寻找需要的应…...

编程新知 2026/5/16 3:53:39