Web项目实战 | 购物系统v2.0 | 开发记录（五）使用base64编码实现头像修改 | 用户个人信息修改

本文链接：https://blog.csdn.net/Unirithe/article/details/122787974

文章目录

以往记录
一、运行环境
二、实现头像修改
三、用户个人信息修改
四、Bug & DeBug

以往记录

一、运行环境

windows10
IDEA 2021.1 专业版
JDK8
SpringBoot2
Druid 1.2.5
Bootstrap 4.6.0
MySQL 8
Navicat 11

二、实现头像修改

JS头像修改部分可参考点击查看

笔者使用现成的JQuery插件实现图片修改，该插件将可裁剪图片，并将裁剪的图片转化为base64编码进行显示，故可将字符串形式的base64编码直接保存的数据库，节省空间
在这里插入图片描述

JS代码：

//裁剪后的处理
$("#sureCut").on("click",function () {
   
    if ($("#tailoringImg").attr("src") == null ){
   
        return false;
    }else{
   
        var cas = $('#tailoringImg').cropper('getCroppedCanvas');//获取被裁剪后的canvas
        var base64url = cas.toDataURL('image/png'); //转换为base64地址形式
        $("#finalImg").prop("src",base64url);//显示为图片的形式
        $.ajax({
   
            url: '/user/info.html',
            type: 'PUT',
            data: {
   base64url:base64url},
            error: (err) =>{
    alert('修改头像请求失败.'); console.error(err.responseText);},
            success: (data) => {
   alert(data); location.reload()}
        })
        //关闭裁剪框
        closeTailor();
    }
});

控制层代码

 @PutMapping("/user/info.html")
 @ResponseBody
 public String modifyUserImg(String base64url, HttpSession session){
   
     int length = base64url.length();
     // 限制图片文件的大小.
     if(length / 4 / 1024 / 1024 * 3 > 2 || length > 16777215) return "文件过大";
     User user = (User) session.getAttribute("userInfo");
     user.setUserImgSrc(base64url);
     return userService.autoModifyUserById(user) == 1 ? "修改成功!" : "修改失败.";
 }

三、用户个人信息修改

在这里插入图片描述
在提交表单的时候需要注意，有的信息是没有在表单里的（密码修改暂时不写在这里）比如最关键的就是用户ID，当前也可以从session里获取当前的用户信息，不过这里直接写到表单里，方便之后实现批量用户管理。

除了这一点之外，还有其他的字段需要特殊处理的，比如 birthday生日字段，在MySQL数据表里存储的为Date格式，为了更好的显示生日信息，笔者在实体类里添加了birthday_format变量，专门用户前端的显示，同时也用于在保存信息时，转化为Date格式的一个依据。

故在后端进行保存信息时，还需要对这种字段特殊处理。

前端页面：

<form id="form-user-modify" method="post">
<ul>
    <input name="id" th:value="${session.userInfo.id}" hidden>
    <input name="userCode" th:value="${session.userInfo.userCode}" hidden>
    <input name="userPassword" th:value="${session.userInfo.userPassword}" hidden>
    <input name="userRole" th:value="${session.userInfo.userRole}" hidden>
    <li>
        <div class