使用 Axios 获取用户数据并渲染——个人信息设置+头像修改

[1. HTML 代码](#1. HTML 代码)

[2. JavaScript 代码](#2. JavaScript 代码)

本项目是一个用户个人信息管理页面 ，用于获取、修改用户信息以及更换头像 。本教程详细介绍了如何使用 HTML + JavaScript (Axios) + Bootstrap 进行开发，让初学者可以轻松学习并直接使用源码。

功能介绍

获取用户信息
- 通过 Axios 发送 GET 请求，从服务器获取用户数据（邮箱、昵称、性别、个人简介、头像等）。
渲染信息到页面
- 将服务器返回的数据填充到表单中，让用户可以查看和修改个人资料。
更换头像
- 允许用户上传新头像，并通过 Axios 发送 PUT 请求，将头像更新到服务器。

完整源码

以下是完整的HTML 和 JavaScript 代码，其中：

HTML 负责页面结构和样式
JavaScript 负责数据请求、渲染和头像上传

1. HTML 代码

该部分代码用于构建个人信息管理页面 ，包括表单输入框、头像上传、提交按钮等。

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>

2. JavaScript 代码

该部分代码用于从服务器获取数据、渲染到页面、处理头像上传。

（1）获取用户信息并渲染

javascript 复制代码

axios({
    url: 'http://hmajax.itheima.net/api/settings', // API 地址
    method: 'get',
    params: {
        creator: '小宁'  // 传递参数
    }
}).then(result => {
    const userObj = result.data.data;  // 假设返回的数据结构为 { data: { ... } }
    console.log(userObj);

    // 遍历用户数据并渲染到页面
    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];
            RadioList[gNum].checked = true;
        } else {
            document.querySelector(`.${key}`).value = userObj[key];
        }
    });
});

（2）头像上传

javascript 复制代码

document.querySelector('.upload').addEventListener('change', e => {
    const fd = new FormData();
    fd.append('avatar', e.target.files[0]); // 添加文件
    fd.append('creator', "小宁");  // 传递创建者信息

    axios({
        url: 'http://hmajax.itheima.net/api/avatar',
        method: 'put',
        data: fd
    }).then(result => {
        console.log(result);
        const imgUrl = result.data.data.avatar;
        document.querySelector('.prew').src = imgUrl; // 更新头像
    });
});

如何使用？

下载源码，创建一个本地 HTML 文件，并复制粘贴 HTML 代码。
新建 index.js 文件，复制粘贴 JavaScript 代码，并确保正确引用它。
运行页面，打开浏览器查看效果。
可以在服务器上运行，或使用本地 HTTP 服务器（如 VSCode Live Server 插件）。

总结

使用 HTML 构建页面结构
通过 Axios 发送 HTTP 请求
获取并渲染用户信息
支持头像上传

本教程适用于前端开发初学者 和希望学习用户信息管理功能的开发者，希望对你有所帮助！🚀