使用 Axios 获取用户数据并渲染—

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

news2025/2/6 0:22:41

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 或 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() 捕获请求中的任何错误，方便调试。