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

十念 · 2025-4-7 14:48:17

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

目录

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>
<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 或 1
RadioList[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. 适用场景

个人信息设置页面：用户可以检察和修改本身的信息，如邮箱、昵称、性别等。
用户资料展示：适用于展示用户信息并答应编辑的场景，如社交网站、论坛等。
后台管理系统：管理员可以通过类似的方法展示并更新用户资料。

通过这个简朴的代码示例，你可以轻松实现一个功能完备的个人资料管理页面，提升用户体验。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

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

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块