本节完成内容：
1. 个人中心页面⭐
2.个人信息的修改⭐
3.SpringBoot文件上传和浏览⭐
1.完成后的效果
字段不多，难点在于图片的上传。
2.后台逻辑
2.1 Controller控制器
@RestController @RequestMapping("/user") public class UserController { @Autowired UserService userService; @Autowired RedisServiceImpl redisServiceImpl; String salt = "diary188"; ...... @RequestMapping("update") public Result update(@RequestBody User user){ userService.update(user); return Result.success(); } @RequestMapping("get") public User get(){ return userService.getByUserId(StpUtil.getLoginIdAsLong()); } }
update方法用于更新用户对象，get方法用来获取当前登录对象的信息。
2.2 Service服务类
@Service public class UserServiceImpl implements UserService { @Autowired UserMapper userMapper; @Autowired RedisServiceImpl redisServiceImpl; /** * 根据用户名获取用户 * @param userName * @return */ @Override public User getByUserName(String userName) { List<User> users = userMapper.selectList(new QueryWrapper<User>().eq("user_name", userName)); if(users.size() > 0){ return users.get(0); } return null; } /** * 保存用户 * @param user */ @Override public void save(User user) { userMapper.insert(user); } @Override public User getByUserId(long loginIdAsLong) { return userMapper.selectById(loginIdAsLong); } @Override public void update(User user) { LambdaUpdateWrapper<User> lambdaUpdateWrapper = new LambdaUpdateWrapper<>(); lambdaUpdateWrapper = lambdaUpdateWrapper.set(User::getNickName, user.getNickName()) .set(User::getBirthday, user.getBirthday()) .set(User::getGender, user.getGender()) .set(User::getSignature, user.getSignature()) .set(User::getUpdateTime, DateUtil.now()); if(StrUtil.isNotEmpty(user.getFace())){ lambdaUpdateWrapper = lambdaUpdateWrapper.set(User::getFace,user.getFace()); } lambdaUpdateWrapper.eq(User::getUid, StpUtil.getLoginIdAsLong()); userMapper.update(null,lambdaUpdateWrapper); } }
3.前台页面
前台页面主要用的就是layUI的form组件和文件上传组件。
主要代码如下：
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <c:set var="basePath" value="${pageContext.request.contextPath}"></c:set> <html> <head> <title>个人中心</title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <script src="${basePath}/layui/layui.all.js" charset="utf-8"></script> <script src="${basePath}/js/axios.min.js"></script> <script src="${basePath}/js/vue.js"></script> <link rel="stylesheet" href="${basePath}/layui/css/layui.css" media="all"> <style> </style> </head> <body> <div class="layui-container"> <div class="layui-row layui-col-space10"> <div class="layui-row"> <div class="layui-col-md12"> <jsp:include page="../common/header.jsp"></jsp:include> </div> <div class="layui-col-md9"> <div class="layui-card dbox" style="border-right: 2px solid #eaeaea;height: 90%;padding: 16px;"> <form class="layui-form layui-form-pane" style="padding-top: 20px;" lay-filter="userInfo"> <div class="layui-form-item"> <label class="layui-form-label">我的昵称</label> <div class="layui-input-block"> <input type="text" name="nickName" lay-verify="nickName" autocomplete="off" placeholder="请输入昵称" class="layui-input"> </div> </div> <div class="layui-upload"> <div style="margin-left: 0px;margin-bottom: 20px"> <div class="layui-upload-list" style="float: left;"> <!-- 图片预览 --> <img style="width: 150px; height: 150px;" class="layui-upload-img" id="uploaderShow"> <p id="errorText"></p> </div> <div style="width: 150px;margin-top:100px;margin-left:20px;float: left"> <button type="button" style="margin-bottom: 10px;" class="layui-btn" id="uploader">上传图片</button> </div> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">性别</label> <div class="layui-input-block"> <input type="radio" name="gender" value="0" title="男" checked> <input type="radio" name="gender" value="1" title="女" > <input type="radio" name="gender" value="2" title="保密" > </div> </div> <div class="layui-form-item"> <label class="layui-form-label">出生日期</label> <div class="layui-input-block"> <input id="birthday" name="birthday" lay-verify="birthday" type="text" class="layui-input" id="test1" placeholder="yyyyMMdd"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">个性签名</label> <div class="layui-input-block"> <input type="text" name="signature" lay-verify="signature" autocomplete="off" placeholder="请输入个性签名" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block" style="text-align: right;"> <button type="reset" class="layui-btn layui-btn-primary">重置</button> <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即更新</button> </div> </div> </form> </div> </div> <div class="layui-col-md3" style=""> <jsp:include page="../common/sider.jsp"></jsp:include> </div> </div> </div> <jsp:include page="../common/footer.jsp"></jsp:include> </div> <script> layui.use(['form', 'layedit', 'laydate','upload','element','jquery'], function(){ var form = layui.form ,layer = layui.layer ,layedit = layui.layedit ,upload = layui.upload ,element = layui.element ,$ = layui.jquery ,laydate = layui.laydate; //日期 laydate.render({ elem: '#birthday' }); //常规使用 - 普通图片上传 var uploadInst = upload.render({ elem: '#uploader' //,url: 'https://httpbin.org/post' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。 ,url: '${basePath}/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。 ,before: function(obj){ //预读本地文件示例，不支持ie8 obj.preview(function(index, file, result){ $('#uploaderShow').attr('src', result); //图片链接（base64） }); console.log('before') element.progress('progressBar', '0%'); //进度条复位 layer.msg('上传中', {icon: 16, time: 1000}); } ,done: function(res){ console.log(res) //如果上传失败 if(res.code > 0){ return layer.msg('上传失败'); } //上传成功的一些操作 //记录上传的图片地址 window.face = res.data.file; $('#errorText').html(''); //置空上传失败的状态 } ,error: function(){ console.log('error') //演示失败状态，并实现重传 var errorText = $('#errorText'); errorText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'); errorText.find('.demo-reload').on('click', function(){ uploadInst.upload(); }); } }); //监听提交 form.on('submit(demo1)', function(data){ data = {...data.field } if(window.face){ data.face = window.face; } var index = layer.load(1); //添加laoding,0-2两种方式 axios.post('${basePath}/user/update',data).then(r =>{ layer.close(index); //返回数据关闭loading if(r.data.code != '0000'){ layer.msg(r.data.message,{icon:2}); return; } layer.msg('个人信息更新成功!',{icon:1}); setTimeout(()=>{location.href="/diary/user.html"},500) }); return false; }); form.verify({ nickName: function(value){ if(value.length < 5){ return '昵称至少得5个字符啊！'; } } ,birthday: function(value){ if(value.length < 1){ return '请选择出生日期！'; } } ,signature: function(value){ if(value.length < 10){ return '请填写个性签名，至少10个字符！'; } } }); form.render(); form.val('userInfo', { nickName: "${user.nickName}", gender:"${user.gender}", birthday:"${user.birthday}", signature:"${user.signature}" }); $('#uploaderShow').attr('src', "${basePath}/upload/${user.face}"); }); </script> </body> </html>
4.文件上传后台逻辑
配置一下文件上传的路径和预览URL：
@Configuration public class MvcConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(new String[] { "/upload/**" }).addResourceLocations(new String[] { "file:C:/upload/" }); } }
配置文件也要改
system: filepath: c:\upload urlpath: http://localhost/upload/
最后是文件上传的代码：
@RestController public class UploadController { @Autowired AppConfig appConfig; @RequestMapping({"/upload"}) public Map upload(@RequestParam("file") MultipartFile file) { String fileName = ""; if (!file.isEmpty()){ /** * 获取文件后缀名 */ String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")); if(suffix.equals(".PNG") || suffix.equals(".png") || suffix.equals(".jpg") || suffix.equals(".JPG") ) { }else{ throw new BizException(ExceptionCodeEnum.ERROR.setDesc("非法文件格式！")); } /** * 文件名 */ fileName = System.currentTimeMillis() + suffix; /** * 返回的文件路径 */ String fileNameForReturn = "/"+ StpUtil.getLoginIdAsLong() + "/" + fileName; /** * 文件的保存路径 */ String saveFilePath = this.appConfig.getFilepath() + "/"+StpUtil.getLoginIdAsLong(); /** * 父级目录若不存在就创建 */ if(!new File(saveFilePath).exists()) { new File(saveFilePath).mkdir(); } String saveFileName = saveFilePath + "/" + fileName; File dest = new File(saveFileName); try { /** * 拷贝文件 */ file.transferTo(dest); return new HashMap(){{ put("file",fileNameForReturn); }} ; } catch (IOException e) { e.printStackTrace(); throw new BizException(ExceptionCodeEnum.ERROR.setDesc("系统异常！")); } } return null; } }
