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

以往记录

• Web项目实战 | 购物系统v2.0 | 开发记录（一）需求分析 | 技术选型 | 系统设计 | 数据表设计 | SpringBoot、SSM、Thymeleaf、Bootstrap…

• Web项目实战 | 购物系统v2.0 | 开发记录（二）搭建SpringBoot+SSM框架环境 | 配置Druid+MyBatis | 基于Bootstrap实现登陆页面| 图片验证码接口

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

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

一、运行环境

---

• 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="container-fluid row">
            <div class="col-md-5">
                <p><img id="finalImg" style="width: 100px;height: 100px;border-radius: 50%;"
                        th:src="${session.userInfo.userImgSrc}" th:data-src="${session.userInfo.userImgSrc}">
                p>
                <button id="replaceImg" type="button" class="btn btn-danger u-btn-modify-img">编辑头像button>
            div>

            <div class="col-md-7">
                <nav>
                    <label>身份:label>
                    <span class="text-danger" th:text="${session.userRole.roleName}"/>
                nav>
                <nav>
                    <label>
                        性别:
                    label>
                    <input name="gender" id="form-gender-man"  type="radio" value="2" th:data-gender="${session.userInfo.gender}">
                    <label class="p-0" for="form-gender-man" style="background: none">
                        男
                    label>
                    <input name="gender" id="form-gender-woman" type="radio" value="1" th:data-gender="${session.userInfo.gender}">
                    <label class="p-0" for="form-gender-woman" style="background: none">
                        女
                    label>
                nav>
                <nav>
                    <label for="form-birthday">生日:label>
                    <input name="birthday_format" type="date" id="form-birthday" th:value="${session.userInfo.birthday_format}">
                nav>
            div>
        div>
    li>
    <li>
        <label>名称:label>
        <input id="form-name" name="userName" type="text" th:value="${session.userInfo.userName}" th:data-name="${session.userInfo.userName}">
        <span style="color: gray; font-size: 10px">* 目前只支持中文，最大长度5span>
    li>
    <li>
        <label for="form-phone">联系电话:label>
        <input name="phone" id="form-phone" type="text" th:value="${session.userInfo.phone}"/>
        <span style="color: gray; font-size: 10px">* 暂时只支持11位电话span>
    li>
    <li>
        <label for="form-province">地区:label>
        <select name="userProvince" id="form-province" th:data-addr="${userProvince}" style="font-size: 10px">select>
        <select name="userCity" th:data-addr="${userCity}" style="font-size: 10px">select>
        <select name="userArea" th:data-addr="${userArea}" style="font-size: 10px">select>
    li>
    <li>
        <label for="form-address">详细地址:label>
        <input name="userAddress" id="form-address" th:data-addr="${userAddress}" type="text" placeholder="详细地址">
        <span style="color: gray; font-size: 10px">* 限制在128个字符以内span>

    li>
ul>
form>
<nav class="text-center">
    <button id="u-btn-modify-save" class="btn btn-primary">保存信息button>
nav>

JS代码：

// 检验
var check_phone = false
var check_name = false
var check_address = false
$('#form-phone').bind('input propertychange blur', function (){
    let reg = /^1\d{10}$/
    if(reg.test($(this).val())){
        check_phone = true
        $(this).next().css('color', 'green')
        $(this).next().text("√")

    } else{
        check_phone = false
        $(this).next().css('color', 'red')
        $(this).next().text("* 请输入规范的联系电话")
    }
});
$('#form-name').bind('input propertychange blur', function (){
    let reg = /^[\u4E00-\u9FA5]+$/
    if(reg.test($(this).val()) && $(this).val().length <= 5){
        check_name = true
        $(this).next().css('color', 'green')
        $(this).next().text("√")

    } else{
        check_name = false
        $(this).next().css('color', 'red')
        $(this).next().text("* 请输入规范的中文名称")
    }
})
$('#form-address').bind('input propertychange blur', function (){
    if($(this).val().length <= 128){
        check_address = true
        $(this).next().css('color', 'green')
        $(this).next().text("目前长度: "+ $(this).val().length + " √")

    } else{
        check_address = false
        $(this).next().css('color', 'red')
        $(this).next().text("* 请输入指定范围内的详细地址")
    }
})
// 保存信息
$('#u-btn-modify-save').click(function (){

    $('#form-name').blur();
    $('#form-phone').blur();
    $('#form-address').blur();

    if(check_name && check_phone && check_address){
        $.ajax({
            url: '/user/info.html',
            data: $('#form-user-modify').serialize(),
            type: 'POST',
            error: (err) => {
                alert('保存信息请求失败.');
                console.error(err.responseText)
            },
            success: (data) =>{
                alert(data)
                location.reload()
            }
        })
    } else alert('请按提示输入规范的信息.')
})

控制层代码：

@PostMapping("/user/info.html")
@ResponseBody
public String modifyUserInfo(User user,
                              @RequestParam("userProvince") String userProvince,
                              @RequestParam("userCity") String userCity,
                              @RequestParam("userArea") String userArea,
                              @RequestParam("userAddress") String userAddress,
                              HttpSession session) {
    // 有些信息没有存在于表单，先获取原先的用户信息
    User userInfo = (User) session.getAttribute("userInfo");
    user.setUserImgSrc(userInfo.getUserImgSrc());
    // 特殊处理的字段
    try {
        user.setBirthday(new Date(String.valueOf(new SimpleDateFormat("yyyy-MM-dd").parse(user.getBirthday_format()))));
    } catch (ParseException e) {
        e.printStackTrace();
    }
    user.setAddress(String.join("-", userProvince, userCity, userArea, userAddress));
    user.setModifyBy(userInfo.getId());
    user.setModifyDate(new Date());
    int i = userService.autoModifyUserById(user);
    if(i == 1) {
        session.setAttribute("userInfo", user);
    }
    return  i == 1 ? "修改成功!" : "修改失败.";
}

四、Bug & DeBug

---

问题1： 在设计用户信息修改模块时，无法正确显示用户的生日信息

<input name="birthday" type="date" id="form-birthday" th:value="${session.userInfo.birthday}">

SQL表中birthday字段的类型 date

pojo类bitrhday变量的类型为 java.util.Date;
serializeArray

解决1： 在User实体类中添加一个变量birthday_format ，表示规格化后的日期，类型为String专门用于输出，然后添加相应的get、set方法，接着修改原先birthday变量的set方法，在里面添加对bitrhday_format变量的赋值。

public void setBirthday(Date birthday) {
    this.birthday = birthday;
    setBirthday_format(new SimpleDateFormat("yyyy-MM-dd").format(birthday));
}

修改后，前端的birthday改成birthday_format即可

问题2： 在保存头像图片时，找不到正确的路径

解决2： transferTo方法执行时，会默认在前面添加一个web的路径，则需先获取工件的类路径作为保存位置的前缀，但直接保存图片文件会比较耗空间，之后修改为base64编码字符串的形式存储图片，将编码直接存储到数据库就行了，不用保存到服务端的工件。

this.getClass().getResource("/").getPath().replaceFirst("/", "")