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

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

news 2025/12/30 4:46:56

目录

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

智慧医疗能源事业线深度画像分析（上）

引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2025/12/29 18:24:19

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/12/23 17:14:55

P3 QT项目----记事本（3.8）

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2025/12/28 0:07:12

Springcloud：Eureka 高可用集群搭建实战（服务注册与发现的底层原理与避坑指南）

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

编程新知 2025/12/23 23:07:51

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

编程新知 2025/10/15 0:25:46

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

编程新知 2025/12/28 4:55:09

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

编程新知 2025/12/27 21:16:11

uniapp 开发ios， xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

编程新知 2025/12/27 13:10:15

适应性Java用于现代 API：REST、GraphQL 和事件驱动

在快速发展的软件开发领域&#xff0c;REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名&#xff0c;不断适应这些现代范式的需求。随着不断发展的生态系统&#xff0c;Java 在现代 API 方…...

编程新知 2025/11/10 19:07:59