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

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

news 2025/6/8 15:57:53

目录

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

【区块链基础】区块链的 Fork（分叉）深度解析：原理、类型、历史案例及共识机制的影响

区块链的 Fork（分叉）全面解析：原理、类型、历史案例及共识机制的影响 在区块链技术的发展过程中，Fork（分叉）现象是不可避免且极具影响力的一个环节。理解区块链分叉的形成原因、具体表现以及共识机制对分叉的作用，对于深入把握区块链技术架构及其治理机制至关重要。 本…...

编程新知 2025/6/8 12:35:24

青少年编程与数学 01-011 系统软件简介 01 MS-DOS操作系统

青少年编程与数学 01-011 系统软件简介 01 MS-DOS操作系统 1. MS-DOS的历史背景1.1 诞生背景1.2 发展历程1.3 与Windows的关系 2. MS-DOS的技术细节2.1 系统架构2.2 启动过程2.3 内存管理2.4 设备驱动程序 3. MS-DOS的用户界面3.1 命令行界面3.2 配置文件 4. MS-DOS的应用程序与…...

编程新知 2025/6/8 10:10:32

【原神 × 二叉树】角色天赋树、任务分支和圣遗物强化路径的算法秘密！

【原神 二叉树】角色天赋树、任务分支和圣遗物强化路径的算法秘密！ 作者：星之辰 标签：#原神 #二叉树 #天赋树 #任务分支 #圣遗物强化 #算法科普 发布时间：2025年6月 总字数：6000+ 一、引子：提瓦特大陆的“树型奥秘” 你是否曾留意过《原神》角色面板的天赋树？ 升级技能…...

编程新知 2025/6/8 9:35:43

校招 java 面试基础题目及解析

我将结合常见的校招Java面试基础题目&#xff0c;从概念阐述、代码示例等角度展开&#xff0c;为你提供一份可用于学习的技术方案及应用实例。 校招Java面试基础题目解析与学习指南 在Java校招面试中&#xff0c;扎实掌握基础知识是成功的关键。本文将围绕常见的Java基础面试…...

编程新知 2025/6/8 9:12:54

基于Django开发的运动商城系统项目

运动商城系统项目描述 运动商城系统是一个基于现代Web技术构建的电子商务平台&#xff0c;专注于运动类商品的在线销售与管理。该系统采用前后端分离架构&#xff0c;前端使用Vue.js实现动态交互界面&#xff0c;后端基于Django框架提供RESTful API支持&#xff0c;数据库采用…...

编程新知 2025/6/8 2:57:43

PPT转图片拼贴工具 v1.0

软件介绍 这个软件的作用就是将单个PPT的每一页转换为单独的图片&#xff0c;然后将图片进行拼接起来。 但是我没有还没有解决一次性处理多个文件。 效果展示如下&#xff1a; 软件安装 软件源码 import os import re import win32com.client from PIL import Imagedef con…...

编程新知 2025/6/7 21:51:02

软件工程：如何做好软件产品

1、什么是产品 从项目到产品 产品&#xff1a;满足行业共性需求的标准产品。即要能够做到配置化的开发&#xff0c;用同一款产品最大限度地满足不同客户的需求&#xff0c;同时让产品具有可以快速响应客户需求变化的能力。 好的产品一定吸收了多个项目的共性&#xff0c;一定是…...

编程新知 2025/6/7 20:34:01

基于PSO粒子群优化的VMD-GRU时间序列预测算法matlab仿真

目录 1.前言 2.算法运行效果图预览 3.算法运行软件版本 4.部分核心程序 5.算法仿真参数 6.算法理论概述 6.1变分模态分解&#xff08;VMD&#xff09; 6.2 门控循环单元&#xff08;GRU&#xff09; 6.3 粒子群优化&#xff08;PSO&#xff09; 7.参考文献 8.算法完…...

编程新知 2025/6/7 18:12:16

Hubstudio浏览器如何使用Loongproxy？

1. 使用软件 1.1 Loongproxy 1. 顶级ISP资源&#xff1a;Loongproxy是神龙云旗下品牌&#xff0c;依托与全球领先ISP运营商的深度合作&#xff0c;Loongproxy 精选全球优质静态住宅IP资源。 2. IP池庞大&#xff1a;覆盖 100 国家/地区&#xff0c;构建庞大的 70 万 静态IP池…...

编程新知 2025/6/7 18:05:01

leetcode_206 反转链表

1. 题意 原地反转链表&#xff0c;非常经典的一道题。 2. 解决 2.1 非递归 非递归的比较好理解&#xff1b;链表需要维护前驱和后继两个信息&#xff0c;当我们要更改后继时&#xff0c;先要把原来的后继先存起来。 /*** Definition for singly-linked list.* struct List…...

编程新知 2025/6/7 13:42:25