使用 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 从服务器获取用户信息࿰…...
【hudi】基于hive2.1.1的编译hudi-1.0.0源码
hudi版本1.0.0 需要使用较低版本的hive,编译hudi只需要修改下类即可: org.apache.hudi.hadoop.hive.HoodieCombineHiveInputFormat 一、复制org.apache.hadoop.hive.common.StringInternUtils 找个hive2.3.9的源码包,创建包路径,…...
物联网领域的MQTT协议,优势和应用场景
MQTT(Message Queuing Telemetry Transport)作为轻量级发布/订阅协议,凭借其低带宽消耗、低功耗与高扩展性,已成为物联网通信的事实标准。其核心优势包括:基于TCP/IP的异步通信机制、支持QoS(服务质量&…...
MyBatis 调优指南:释放持久层性能潜力
MyBatis 作为一款优秀的持久层框架,以其灵活性和易用性深受开发者喜爱。然而,随着应用规模扩大和数据量增长,MyBatis 的性能问题也逐渐显现。本文将深入探讨 MyBatis 调优策略,帮助您释放持久层性能潜力。 一、 SQL 语句优化 避免…...
Unity扩展编辑器使用整理(一)
准备工作 在Unity工程中新建Editor文件夹存放编辑器脚本, Unity中其他的特殊文件夹可以参考官方文档链接,如下: Unity - 手册:保留文件夹名称参考 (unity3d.com) 一、菜单栏扩展 1.增加顶部菜单栏选项 使用MenuItemÿ…...
注册中心不知选哪个?Zookeeper、Eureka、Nacos、Consul和Etcd 5种全方位剖析对比
本文给大家讲解 5 种常用的注册中心,对比其流程和原理,无论是面试还是技术选型,都非常有帮助。 对于注册中心,在写这篇文章前,我其实只对 ETCD 有比较深入的了解,但是对于 Zookeeper 和其他的注册中心了解甚…...
Windows下怎么安装FFFmpeg呢?
在Windows下使用Open-webui报错,说Couldnt find ffmpeg or avconv,解决open-webui报错Couldn‘t find ffmpeg or avconv-CSDN博客于是尝试解决问题,那么Windows下怎么安装FFFmpeg呢? 尝试了两种方法。 第一种方法pip安装(失败&…...
CSS 基础:层叠、优先级与继承
CSS 基础:层叠、优先级与继承 一、层叠(Cascade)示例:层叠的顺序 二、优先级(Specificity)优先级规则示例:优先级的比较 三、继承(Inheritance)哪些属性会被继承…...
《翻转组件库之发布》
背景 继《翻转组件库之打包》_杨晓风-linda的博客-CSDN博客之后,组件库已经可以正常构建,那如何像elementUI等组件库那样,用npm安装,按照既定的用法使用即可呢?本篇便为你揭晓 资料相关 1、npm官方文档:…...
Spring Boot + Spring AI快速体验
Spring AI快速体验 1 什么是Spring AI 主要功能 2 快速开始 2.1 版本说明2.2 配置文件2.3 pom依赖 2.3.1 spring maven仓库2.3.2 核心依赖 2.4 定义ChatClient2.5 启动类2.6 测试 3 参考链接 1 什么是Spring AI Spring AI是Spring的一个子项目,是Spring专门面向于…...
windows linux常用基础命令
windows基础命令 cd …/ (访问D盘 直接D: 进入目录cd…\baidudu) color 2 改变颜色 dir 浏览当前目录中有什么内容 例如 dir windows可以浏览windows中有什么文件 cls 清屏 cd windows 可以跳转到c盘目录的下面 cd…/可以返回到上一级目录 ./当前目录 cd \ 直…...
ZooKeeper单节点详细部署流程
ZooKeeper单节点详细部署流程 文章目录 ZooKeeper单节点详细部署流程 一.下载稳定版本**ZooKeeper**二进制安装包二.安装并启动**ZooKeeper**1.安装**ZooKeeper**2.配置并启动**ZooKeeper** ZooKeeper 版本与 JDK 兼容性3.检查启动状态4.配置环境变量 三.可视化工具管理**Zooke…...
【AI日记】25.02.06
【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】【AI日记】【读书与思考】 AI kaggle 比赛:Backpack Prediction Challenge 读书 书名:理解公司:产权、激励与治理作者:张维迎下图感想:哲学家、思想家比如卢梭…...
税费学习之:附加税费
好的!我将从 **税收本质、历史沿革、用途逻辑、企业影响** 四个维度综合分析,用项目管理中的实际场景说明为什么需要缴纳附加税费。 --- ### **一、附加税费的本质与构成** #### **1. 定义** 附加税费是 **以增值税、消费税为基数征收的附加税**&…...
数据库开发常识(10.6)——SQL性能判断标准及索引误区(1)
10.6. 数据库开发常识 作为一名专业数据库开发人员,不但需要掌握数据库开发相关的语法和功能实现,还要掌握专业数据库开发的常识。这样,才能在保量完成工作任务的同时,也保质的完成工作任务,避免了为应用的日后维护埋下性能和稳定性方面的隐患。可遗憾的是,现实中,很大…...
网络原理一>数据链路层协议->以太网协议
目录 以太网协议的结构:类型:ARP请求应答报文:CRC:MTU: 为什么需要mac地址:mac地址和IP地址的区别: 以太网协议的结构: 以太网是数据链路层和物理层的主要协议 源IP,目的IP就不多说…...
Android 约束布局ConstraintLayout整体链式打包居中显示
Android 用约束布局ConstraintLayout实现将多个控件视作一个整体居中显示,使用 app:layout_constraintHorizontal_chainStyle"packed"实现 chain 除了链条方向有横向和竖向区分外, chain链条上的模式有 3种 spread - 元素将被展开&#…...
云计算行业分析
云计算作为数字经济的核心基础设施,未来十年将持续重塑全球科技格局,并渗透到几乎所有行业的数字化转型中。 一、云计算的发展潜力 1. 技术融合驱动爆发式创新 AI与云计算的深度耦合 - **智能云服务**:云厂商将提供预训练模型、自动化ML工…...
深入浅出DeepSeek LLM 以长远主义拓展开源语言模型
深入浅出地讲解DeepSeek LLM 以长远主义拓展开源语言模型 🌟 1. 什么是 DeepSeek LLM? 大家想象一下,你在游戏里要打造一个超级英雄角色,选择最强的装备、技能点和升级策略。那么,DeepSeek LLM 就是 AI 界的“超级英雄…...
用Python获取股票数据并实现未来收盘价的预测
获取数据 先用下面这段代码获取上证指数的历史数据,得到的csv文件数据,为后面训练模型用的 import akshare as ak import pandas as pd# 获取上证指数历史数据 df ak.stock_zh_index_daily(symbol"sh000001")# 将数据保存到本地CSV文件 df.…...
[openwrt]openwrt slaac only模式下部分终端无法获取到IPv6 DNS
问题描述 OpenWrt 中,如果启用了 RA 单播(ra_unicast),但部分终端无法获取到 DNS 信息 问题分析 RA 单播的局限性 并非所有终端都完全支持通过单播接收 RA 消息。部分终端可能无法正确解析单播 RA 中的 RDNSS(Recursive DNS Server)选项,从而导致无法获取 DNS 信息。终…...
【redis】数据类型之list
Redis的List数据类型是一个双向链表,支持在链表的头部(left)和尾部(right)进行元素的插入(push)和弹出(pop)操作。这使得List既可以用作栈(stack)…...
电脑连接wifi但是浏览器打开不了网页,使用手机热点能正常使用
电脑连接wifi但是浏览器打开不了网页,使用手机热点能正常使用 打开控制面板 打开网络和Internet(查看网络状态和任务) 点击更改适配器设置 双击WLAN 点击属性并双击打开Internet 协议版本4(TCP/IPv4) 将自动…...
el-table中的某个字段最多显示两行,超出部分显示“...详情”,怎么办
文章目录 背景需求需求分析 解决方案在线体验灵感来源我的实现方案 总结 背景 需求 比如,有如下一个表格,请你实现它: 要求: 最多显示两行超出部分显示为:“…详情”点击详情,展开全部内容 说明&#x…...
Vue el-input密码输入框 按住显示密码,松开显示*;阻止浏览器密码回填,自写密码输入框;校验输入非汉字内容;文本框聚焦到内容末尾;
输入框功能集合 <template><div style"padding: 10px"><!-- 密码输入框 --><el-input:type"inputType"v-model"password"placeholder"请输入密码"auto-complete"new-password"id"pwd"style…...
尚硅谷课程【笔记】——大数据之Shell【一】
课程视频:【【尚硅谷】Shell脚本从入门到实战】 一、Shell概述 为什么要学习Shell? 1)需要看懂运维人员的Shell程序 2)偶尔编写一些简单的Shell程序来管理集群、提高开发效率 什么是Shell? 1)Shell是一…...
4年测试|20-30K|金山办公|大模型测开3轮面经
一面时间:面试时长一小时左右 二面时间:面试时长基本满一小时 HR面时间:面试流程上全部结束了,内容如下: 前言: 岗位:自己想投递base珠海,金山办公的HR捞了下。why choose Zhuha…...
【负载均衡式在线OJ】实现负载均衡
目录 管理服务器 增加负载 && 减少负载 重置负载 && 获得负载 负载均衡 添加配置信息 什么是负载均衡 如何实现? 管理服务器 增加负载 && 减少负载 客户端访问一次服务器,负载就加1。客户端结束访问服务器,…...
网络安全-防御 第一次作业(由于防火墙只成功启动了一次未补截图)
防火墙安全策略课堂实验报告 一、拓扑 本实验拓扑包含预启动设备、DMZ区域(含OA Server和Web Server)、防火墙(FW1)、Trust区域(含办公区PC和生产区PC)等。具体IP地址及连接关系如给定拓扑图所示…...
大数据挖掘--两个角度理解相似度计算理论
文章目录 0 相似度计算可以转换成什么问题1 集合相似度的应用1.1 集合相似度1.1文档相似度1.2 协同过滤用户-用户协同过滤物品-物品协同过滤 1.2 文档的shingling--将文档表示成集合1.2.1 k-shingling1.2.2 基于停用词的 shingling 1.3 最小哈希签名1.4 局部敏感哈希算法&#…...
【Mybatis Plus】JSqlParser解析sql语句
【Mybatis Plus】JSqlParser解析sql语句 【一】JSqlParser 是什么【二】JSqlParser 的安装步骤【三】使用场景【1】sql语句解析【2】SQL 语句转换【3】SQL 语句生成【4】SQL 语句验证 【四】在使用 JSqlParser 时,如何处理 SQL 注入攻击?【1】使用预编译…...
vue3 + ElementPlus 封装列表表格组件包含分页
在前端开发中,封装组件是必不可少的。今天就来封装一个通用的列表表格组件,包含分页功能,可以提高代码的复用性和可维护性。 1. 组件设计 Props: tableData:表格数据。columns:表格列配置。totalÿ…...
springboot3整合knife4j详细版,包会!(不带swagger2玩)
1. 引入依赖 <dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-openapi3-jakarta-spring-boot-starter</artifactId><version>4.4.0</version> </dependency>2. 配置文件 简短必要版 # 配置springd…...
Vue2自定义指令实现优雅的前端埋点方案
背景介绍 在前端开发中,埋点是一个非常常见的需求。通常我们需要记录用户的操作行为,以便于后续的数据分析和问题排查。传统的埋点方式往往是在每个需要埋点的地方都写一段上报代码,这样不仅代码重复度高,而且维护起来也比较麻烦…...
1.攻防世界 题目名称-文件包含
进入题目页面如下 直接给出了源码进行代码审计 题目给出提示是文件包含的题 代码审计 <?php // 高亮显示当前 PHP 文件的源代码,方便查看和调试 highlight_file(__FILE__);// 包含名为 "check.php" 的文件,通常这个文件中可能包含一些用…...
Ruby Dir 类和方法详解
Ruby Dir 类和方法详解 引言 在Ruby编程语言中,Dir类是一个非常有用的工具,它允许我们与文件系统进行交互,如列出目录内容、检查文件是否存在等。Dir类提供了多种方法,使得文件系统的操作变得简单且高效。本文将详细介绍Ruby中的…...
axios 发起 post请求 json 需要传入数据格式
• 1. axios 发起 post请求 json 传入数据格式 • 2. axios get请求 1. axios 发起 post请求 json 传入数据格式 使用 axios 发起 POST 请求并以 JSON 格式传递数据是前端开发中常见的操作。 下面是一个简单的示例,展示如何使用 axios 向服务器发送包含 JSON 数…...
Windows编程:下载与安装 Visual Studio 2010
本节前言 在写作本节的时候,本来呢,我正在写的专栏,是 MFC 专栏。而 VS2010 和 VS2019,正是 MFC 学习与开发中,可以使用的两款软件。然而呢,如果你去学习 Windows API 知识的话,那么࿰…...
python学opencv|读取图像(五十七)使用cv2.bilateralFilter()函数实现图像像素双边滤波处理
【1】引言 前序学习过程中,已经掌握了对图像的基本滤波操作技巧,具体的图像滤波方式包括均值滤波、中值滤波和高斯滤波,相关文章链接有: python学opencv|读取图像(五十四)使用cv2.blur()函数实现图像像素…...
基于Typescript,使用Vite构建融合Vue.js的Babylon.js开发环境
一、创建Vite项目 使用Vite初始化一个VueTypeScript项目: npm create vitelatest my-babylon-app -- --template vue-ts cd my-babylon-app npm create vitelatest my-babylon-app -- --template vue-ts 命令用于快速创建一个基于 Vite 的 Vue TypeScript 项目。…...
DockerFile详细学习
目录 1.DockerFile介绍 2.DockerFile常用指令 3.指令详细讲解 4.实例 构建Node-Exporter 构建Alertmanager 构建Mariadb 1.DockerFile介绍 什么是 Dockerfile? Dockerfile 是一个文本文件,包含了构建 Docker 镜像的所有指令。 Dockerfile 是一…...
C++11详解(三) -- 可变参数模版和lambda
文章目录 1.可变模版参数1.1 基本语法及其原理1.2 包扩展1.3 empalce系列接口1.3.1 push_back和emplace_back1.3.2 emplace_back在list中的使用(模拟实现) 2. lambda2.1 lambda表达式语法2.2 lambda的捕捉列表2.3 lambda的原理 1.可变模版参数 1.1 基本…...
IDEA 中集成 Maven,配置环境、创建以及导入项目
目录 在 IntelliJ IDEA 中集成 Maven 并配置环境 1. 打开 IDEA 设置 2. 定位 Maven 配置选项 3. 配置 Maven 路径 4. 应用配置 创建 Maven 项目 1. 新建项目 2. 选择项目类型 3. 配置项目信息 4. 确认 Maven 设置 5. 完成项目创建 导入 Maven 项目 1. 打开导入窗口…...
讯飞智作 AI 配音技术浅析(三):自然语言处理
自然语言处理(NLP)是讯飞智作 AI 配音技术的重要组成部分,负责将输入的文本转换为机器可理解的格式,并提取出文本的语义和情感信息,以便生成自然、富有表现力的语音。 一、基本原理 讯飞智作 AI 配音的 NLP 技术主要包…...
html转PDF文件最完美的方案(wkhtmltopdf)
目录 需求 一、方案调研 二、wkhtmltopdf使用 如何使用 文档简要说明 三、后端服务 四、前端服务 往期回顾 需求 最近在做报表类的统计项目,其中有很多指标需要汇总,网页内容有大量的echart图表,做成一个网页去浏览,同时…...
漏洞挖掘 | 基于mssql数据库的sql注入
视频教程在我主页简介或专栏里 目录: 前记 0x1 判断网站数据库类型 0x2 了解mssql数据库的主要三大系统表 0x3 了解mssql的主要函数 0x4 判断注入点及其注入类型 0x5 联合查询之判断列数 0x6 联合查询之获取数据库相关信息 0x7 mssql之时间盲注 0x8 mssql之报错注…...
.Net Core笔记知识点(跨域、缓存)
设置前端跨域配置示例: builder.Services.AddCors(option > {option.AddDefaultPolicy(policy > {policy.WithOrigins(originUrls).AllowAnyMethod().AllowAnyHeader().AllowCredentials();});});var app builder.Build();app.UseCors(); 【客户端缓存】接…...
JS实现一个通用的循环填充数组的方法
function createFilledArray(length, pattern) {return Array.from({ length }, (_, i) > pattern[i % pattern.length]); }// 示例 const result createFilledArray(8, [1, 2, 3]);console.log(result); // [1, 2, 3, 1, 2, 3, 1, 2]解析: createFilledArray(…...
Java项目: 基于SpringBoot+mybatis+maven+mysql实现的智能学习平台管理系(含源码+数据库+毕业论文)
一、项目简介 本项目是一套基于SpringBootmybatismavenmysql实现的智能学习平台管理系统 包含:项目源码、数据库脚本等,该项目附带全部源码可作为毕设使用。 项目都经过严格调试,eclipse或者idea 确保可以运行! 该系统功能完善、…...
Rust HashMap :当储物袋遇上物品清单
开场白:哈希映射的魔法本质 在Rust的奇幻世界里,HashMap就像魔法师的储物袋: 键值对存储 → 每个物品都有专属咒语(键)和实体(值)快速查找 → 念咒瞬间召唤物品动态扩容 → 自动伸展的魔法空间…...