以往记录一、运行环境二、实现头像修改三、用户个人信息修改四、Bug & DeBug 以往记录
Web项目实战 | 购物系统v2.0 | 开发记录（一）需求分析 | 技术选型 | 系统设计 | 数据表设计 | SpringBoot、SSM、Thymeleaf、Bootstrap…
Web项目实战 | 购物系统v2.0 | 开发记录（二）搭建SpringBoot+SSM框架环境 | 配置Druid+MyBatis | 基于Bootstrap实现登陆页面| 图片验证码接口
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格式的一个依据。
故在后端进行保存信息时，还需要对这种字段特殊处理。
前端页面：
JS代码：
// 检验var check_phone = falsevar check_name = falsevar check_address = false$('#form-phone').bind('input propertychange blur', function (){ let reg = /^1d{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")@ResponseBodypublic 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： 在设计用户信息修改模块时，无法正确显示用户的生日信息
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("/", "")