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

文章目录

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

以往记录

Web项目实战 | 购物系统v2.0 | 开发记录（三）分页显示 | 根据商品名称进行模糊查询

Web项目实战 | 购物系统v2.0 | 开发记录（四）单个页面单个请求解决根据商品类型进行分页查询 | 使用省市区三级联动 | 使用JQuery 插件实现图片上传

一、运行环境

windows10IDEA 2021.1 专业版JDK8SpringBoot2Druid 1.2.5Bootstrap 4.6.0MySQL 8Navicat 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格式的一个依据。

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

前端页面：



    
    
    
    
    
        
            
                
                
                					
										


					
						欢迎分享，转载请注明来源：内存溢出
原文地址: https://outofmemory.cn/zaji/5721799.html

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

发表评论

评论列表（0条）