使用 Axios ——个人信息修改

[1. HTML 部分](#1. HTML 部分)

[2. JavaScript 部分](#2. JavaScript 部分)

[信息渲染与提交修改（通过 Axios 库）](#信息渲染与提交修改（通过 Axios 库）)

[3. 头像更换逻辑](#3. 头像更换逻辑)

[4. 总结](#4. 总结)

这段代码实现了一个用户个人信息管理页面，包含了获取、显示和修改用户信息的功能。页面通过前端框架 Bootstrap 和 Axios 库与后端 API 进行交互，展示和更新用户数据。接下来我将详细介绍代码的每个部分，并指出每个部分是如何工作的，以便读者更好地理解、学习和使用。

1. HTML 部分

首先是 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>
  <!-- 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">头像</h3>
          <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>

解释：

页面结构：该页面分为几个部分：1) 顶部的导航栏，2) 用户信息填写表单，3) 头像上传区域。表单中包含了用户的邮箱、昵称、性别和个人简介输入框。
头像上传 ：使用了 <input type="file"> 来允许用户上传头像。上传后，头像预览会显示在页面上。
Bootstrap ：使用了 Bootstrap 提供的样式，使页面更美观、响应式。

2. JavaScript 部分

信息渲染与提交修改（通过 `Axios` 库）

接下来是 JavaScript 部分，负责页面的核心交互逻辑，包括表单数据的渲染、修改和头像上传：

javascript 复制代码

// 个人信息修改
document.querySelector('.submit').addEventListener('click', () => {
    const userFrom = document.querySelector('.user-form');
    const userObj = serialize(userFrom, { hash: true, empty: true }); // 序列化表单数据
    // 将性别字段转换为数字
    userObj.gender = +userObj.gender;

    // 添加creator字段
    userObj.creator = "小宁";

    // 使用Axios发送PUT请求更新用户信息
    axios({
        url: 'http://hmajax.itheima.net/api/settings',
        method: 'put',
        data: userObj
    }).then(result => {
        console.log(result);
        // 你可以在这里展示成功信息
    });
});

解释：

获取和处理表单数据 ：通过 serialize 库将表单数据序列化成 userObj 对象。此对象会存储表单中的每个输入项，包括邮箱、昵称、性别和简介。
性别字段处理 ：性别字段是单选框，需要将其从字符串转为数字（0 或 1），所以使用 + 操作符进行转换。
发送 PUT 请求 ：使用 Axios 库发送 PUT 请求，传递用户修改后的数据到后端接口。后端接口的URL是 http://hmajax.itheima.net/api/settings，此处模拟了更新用户信息的操作。
表单提交 ：点击 提交 按钮后，表单数据会被发送到服务器，更新成功后，你可以根据实际需求显示提示消息。

3. 头像更换逻辑

javascript 复制代码

// 头像更换
document.querySelector('.upload').addEventListener('change', e => {
    const fd = new FormData();
    fd.append('avatar', e.target.files[0]); // 获取上传的文件
    fd.append('creator', "小宁");

    // 使用Axios发送PUT请求上传头像
    axios({
        url: 'http://hmajax.itheima.net/api/avatar',
        method: 'put',
        data: fd
    }).then(result => {
        const imgUrl = result.data.data.avatar; // 获取返回的头像URL
        // 更新页面中的头像
        document.querySelector('.prew').src = imgUrl;
    });
});

解释：

头像上传 ：监听文件上传 (input 元素的 change 事件)，当用户选择了新头像后，通过 FormData 对象上传文件。FormData 用于处理二进制数据（如文件上传）。
更新头像 ：上传成功后，接口返回新的头像 URL，代码将更新页面上头像的 src 属性，实现头像的即时更换。

4. 总结

这段代码展示了如何使用 HTML、JavaScript 和 Axios 进行用户信息管理的前端开发。它包括了表单数据的提交、性别的处理、头像的更换和数据的上传。前端通过 Axios 库与后端 API 进行交互，动态获取和更新用户信息，并且用户界面通过 Bootstrap 提供了响应式的布局和样式。

适用场景：这个例子适用于需要用户管理和修改个人资料的应用场景，如社交平台、个人信息设置页面等。
学习重点 ：
1. 表单数据的处理与提交
2. 文件上传和头像更换
3. Axios 的基本用法
4. 动态渲染和更新用户信息

你可以直接复制这些代码，修改后端接口 URL 或者根据自己的需求调整界面元素，以适应不同的项目需求。