使用 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;
} else if (key === 'gender') {
// 设置性别
const RadioList = document.querySelectorAll('.gender');
const gNum = userObj;// 性别值是 0 或 1
RadioList.checked = true;// 根据性别值选择相应的单选框
} else {
// 对其他字段（如姓名、邮箱、简介等）设置值
document.querySelector(`.${key}`).value = userObj;
}
});
}).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企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]