使用 Axios ——个人信息修改与提示框实现

详细介绍：个人信息设置与修改页面实现

[1. HTML 结构](#1. HTML 结构)

[2. CSS 样式](#2. CSS 样式)

[3. JavaScript 核心逻辑](#3. JavaScript 核心逻辑)

[a. 信息渲染与表单提交](#a. 信息渲染与表单提交)

[b. 头像上传与预览](#b. 头像上传与预览)

[4. 功能详解](#4. 功能详解)

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

提示：

这段代码展示了如何创建一个简单的个人信息设置页面，包含用户个人资料编辑、头像上传和信息提交功能。通过使用HTML、CSS、JavaScript与Axios库，用户能够在页面上修改自己的基本信息，并通过发送HTTP请求更新后端数据。

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>
  <div class="toast my-toast" data-bs-delay="2000">
    <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. CSS 样式

在这段代码中，CSS样式文件./css/index.css控制页面布局、样式和视觉效果，确保页面的美观和响应式设计。你可以根据需要进一步修改该样式。

3. JavaScript 核心逻辑

a. 信息渲染与表单提交

页面加载时，会根据用户数据渲染表单字段，允许用户进行编辑。通过Axios请求后台接口，并将修改的数据通过PUT请求提交到服务器。

javascript 复制代码

document.querySelector(".submit").addEventListener("click", () => {
  const userFrom = document.querySelector(".user-form");
  const userObj = serialize(userFrom, { hash: true, empty: true });

  userObj.gender = +userObj.gender; // 确保性别数据是数字
  userObj.creator = "小宁"; // 设置请求的创建者信息

  axios({
    url: "http://hmajax.itheima.net/api/settings", // 后台接口地址
    method: "put",
    data: userObj, // 提交的表单数据
  }).then(result => {
    console.log(result);

    // 显示操作成功的提示框
    const toastDom = document.querySelector(".my-toast");
    const toast = new bootstrap.Toast(toastDom);
    toast.show();
  });
});

b. 头像上传与预览

用户可以通过文件输入框上传头像，头像将上传到后台并且实时更新页面上的预览图。这里使用了FormData来处理文件上传。

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', // 上传头像的API
    method: 'put',
    data: fd, // 上传数据
  }).then(result => {
    console.log(result);
    
    // 获取返回的头像地址并更新页面上的预览
    const imgUrl = result.data.data.avatar;
    document.querySelector('.prew').src = imgUrl; 
  });
});

4. 功能详解

表单字段：页面有邮箱、昵称、性别、个人简介等字段。用户可以编辑这些信息并点击提交按钮提交表单。
头像上传：用户可以选择上传一个头像，页面将显示上传的头像并通过后台接口更新。
信息更新提示：当用户提交表单或者更新头像后，页面会显示一个成功的提示框（Toast），确保用户知道操作成功。
数据提交 ：所有表单数据通过Axios发送到指定的后台接口，更新用户的个人信息。

5. 总结

本代码实现了一个简易的个人信息管理页面，包含了表单数据的编辑、头像上传、数据提交、用户提示等功能。你可以将这些代码复制到自己的项目中，并根据需求修改后端接口或者样式。这种类型的页面适用于许多需要个人信息管理的应用，如社交平台、个人网站等。

提示：

HTML部分：负责页面结构，包括表单字段、头像上传、按钮等。
CSS部分 ：控制页面布局和样式（如字体、间距、按钮样式等），位于./css/index.css。
JavaScript部分 ：实现了表单数据的序列化、头像上传和成功提示框的显示，主要使用了Axios库来进行数据的发送和接收。

希望你能通过这段代码更好地理解如何处理用户信息和头像上传等常见功能。