以往记录
-
Web项目实战 | 购物系统v2.0 | 开发记录(一)需求分析 | 技术选型 | 系统设计 | 数据表设计 | SpringBoot、SSM、Thymeleaf、Bootstrap…
-
Web项目实战 | 购物系统v2.0 | 开发记录(二)搭建SpringBoot+SSM框架环境 | 配置Druid+MyBatis | 基于Bootstrap实现登陆页面| 图片验证码接口
-
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