当前位置：首页 > article >正文

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

article 2025/2/6 21:58:27

功能介绍

完整源码

1. HTML 代码

2. JavaScript 代码

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

（2）头像上传

如何使用？

总结

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

功能介绍

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

完整源码

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

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>

2. JavaScript 代码

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

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

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）头像上传

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; // 更新头像
    });
});