以往记录一、运行环境二、实现头像修改三、用户个人信息修改四、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 = false
var check_name = false
var 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")
@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： 在设计用户信息修改模块时，无法正确显示用户的生日信息
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("/", "")
