使用 Axios 获取用户数据并渲染——个人信息设置
目录
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 从服务器获取用户信息࿰…...
DeepSeek在FPGA/IC开发中的创新应用与未来潜力
随着人工智能技术的飞速发展,以DeepSeek为代表的大语言模型(LLM)正在逐步渗透到传统硬件开发领域。在FPGA(现场可编程门阵列)和IC(集成电路)开发这一技术密集型行业中,DeepSeek凭借其…...
【GitLab CI/CD 实践】从 0 到 1 搭建高效自动化部署流程
网罗开发 (小红书、快手、视频号同名) 大家好,我是 展菲,目前在上市企业从事人工智能项目研发管理工作,平时热衷于分享各种编程领域的软硬技能知识以及前沿技术,包括iOS、前端、Harmony OS、Java、Python等…...
【DeepSeek-R1训练笔记】随手记录一些训练log
背景说明 DeepSeek系列解读请移步我的上一篇blog:【完整版】DeepSeek-R1大模型学习笔记(架构、训练、Infra)代码仓库【科大的大四老哥太太太太太值得倾佩了】:https://github.com/Unakar/Logic-RLDeepSeek-R1-Zero复现文档&#…...
【自开发工具介绍】SQLSERVER的ImpDp和ExpDp工具04
SQLSERVER的ImpDp和ExpDp工具演示 1、指定某些表作为导出对象外 (-exclude_table) 验证用:导出的表,导入到新的数据库 2、指定某些表作为导出对象外 (-exclude_table) 支持模糊检索,可以使用星号 以s开头的表作为导出对象外,…...
「全网最细 + 实战源码案例」设计模式——策略模式
核心思想 策略模式(Strategy Pattern)是一种行为型设计模式,用于定义一系列算法或策略,将它们封装成独立的类,并使它们可以相互替换,而不影响客户端的代码,提高代码的可维护性和扩展性。 结构 …...
[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…...
【AI日记】25.02.07 探索开辟第二战场
【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】【AI日记】【读书与思考】【AI应用】 探索 探索如何做视频博主一边坚持主攻方向( 找工作,包括 AI 学习和 kaggle比赛),一边尝试开辟第二战场(比如:视…...
path 路径模块
在开发基于 Node.js 的应用程序时,处理文件路径是一个常见的需求。为了简化这一过程并避免跨平台兼容性问题,Node.js 提供了 path 模块。该模块提供了一系列实用的方法来解析、格式化和操作文件路径。本文将详细介绍 path 模块的功能及其使用方法&#x…...
SpringBoot中的多环境配置管理
SpringBoot中的多环境配置管理 文章目录 SpringBoot中的多环境配置管理SpringBoot中的多环境配置管理 多环境配置的概述1. 为什么需要多环境配置?2. Spring Boot 中如何实现多环境配置?3. 多环境配置的应用场景4. 如何实现配置隔离? Spring B…...
mac下生成.icns图标
笔记原因: 今日需要在mac下开发涉及图标文件的使用及icons文件的生成,所以记录一下。 网络上都是一堆命令行需要打印太麻烦了,写一个一键脚本。 步骤一 将需要生成的png格式文件重命名为“pic.png” mv xxxx.png pic.png 步骤二 下载我…...
关于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]可以看到两个…...
储能系统-系统架构
已更新系列文章包括104、61850、modbus 、单片机等,欢迎关注 IEC61850实现方案和测试-1-CSDN博客 快速了解104协议-CSDN博客 104调试工具2_104协议调试工具-CSDN博客 1 电池储能系统(BESS) 架构 电池储能系统主要包括、电池、pcs、本地控制…...
AI智算-k8s部署DeepSeek Janus-Pro-7B 多模态大模型
文章目录 简介环境依赖模型下载下载Janus库GPU环境镜像模型manifest调用Janus多模态文生图 简介 DeepSeek Janus Pro 作为一款强大的多模态理解与生成框架,正在成为研究人员和开发者的热门选择。本文将详细介绍如何在云原生k8s环境中部署配置和使用 DeepSeek Janus…...
【截图】selenium自动通过浏览器截取指定元素div的图片
【截图】selenium自动通过浏览器截取指定元素div的图片 思路 截取完整网页截图 通过元素的坐标 截图到指定位置的图片 前提是已经获取到 driver 了 # 定位目标divtarget_div driver.find_element(By.CLASS_NAME, headlines-right)# 获取div的位置和大小location target_div…...
如何导入第三方sdk | 引入第三方jar 包
0. 背景1. 上传私有仓库2. 使用本地文件系统 0. 背景 对接一些第三方功能,会拿到第三方的sdk,也就是jar包,如何导入呢 1. 上传私有仓库 最好的方式就是将第三方jar包,上传到私有的仓库,这样直接正常在pom引用即可如果只…...
HarmonyOS 5.0应用开发——ContentSlot的使用
【高心星出品】 文章目录 ContentSlot的使用使用方法案例运行结果 完整代码 ContentSlot的使用 用于渲染并管理Native层使用C-API创建的组件同时也支持ArkTS创建的NodeContent对象。 支持混合模式开发,当容器是ArkTS组件,子组件在Native侧创建时&#…...
C#常用集合优缺点对比
先上结论: 在C#中,链表、一维数组、字典、List<T>和ArrayList是常见的数据集合类型,它们各有优缺点,适用于不同的场景。以下是它们的比较: 1. 一维数组 (T[]) 优点: 性能高:数组在内存中…...
基于CLIP视觉语言大模型的行人重识别方法的简单框架设计
以下是一个基于CLIP视觉语言大模型的行人重识别方法的简单框架设计,用于数据集测试。我们将使用torch和clip库,假设数据集是一个包含行人图像的文件夹结构,每个子文件夹代表一个行人身份。 步骤概述 安装必要的库加载CLIP模型定义数据集类提…...
RabbitMQ 从入门到精通:从工作模式到集群部署实战(三)
文章目录 使用CLI管理RabbitMQrabbitmqctlrabbitmq-queuesrabbitmq-diagnosticsrabbitmq-pluginsrabbitmq-streamsrabbitmq-upgraderabbitmqadmin 使用CLI管理RabbitMQ RabbitMQ CLI 工具需要安装兼容的 Erlang/OTP版本。 这些工具假定系统区域设置为 UTF-8(例如en…...
智慧医疗能源事业线深度画像分析(上)
引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...
React hook之useRef
React useRef 详解 useRef 是 React 提供的一个 Hook,用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途,下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...
基于数字孪生的水厂可视化平台建设:架构与实践
分享大纲: 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年,数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段,基于数字孪生的水厂可视化平台的…...
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…...
Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
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": …...
Selenium常用函数介绍
目录 一,元素定位 1.1 cssSeector 1.2 xpath 二,操作测试对象 三,窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四,弹窗 五,等待 六,导航 七,文件上传 …...
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、结构体与…...
uniapp 开发ios, xcode 提交app store connect 和 testflight内测
uniapp 中配置 配置manifest 文档:manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号:4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...
适应性Java用于现代 API:REST、GraphQL 和事件驱动
在快速发展的软件开发领域,REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名,不断适应这些现代范式的需求。随着不断发展的生态系统,Java 在现代 API 方…...
