从零用java实现小红书 springboot vue uniapp （8）个人资料修改消息页优化

前言

移动端演示 http://8.146.211.120:8081/#/

前面的文章我们主要完成了点赞关注 im 聊天功能下面我们将完善个人资料修改和消息页优化向产品迈进
个人资料修改

自定义头像背景图以及网名等等修改之后个人资料卡片也会随之改变
个人名片修改
这样看起来就美观多了
修改文字资料的话很简单调用orm的update方法即可
主要难点是修改头像和背景图我们服务器的带宽很有限
这里我们就需要压缩图片上传

<dependency><groupId>net.coobird</groupId><artifactId>thumbnailator</artifactId><version>0.4.20</version></dependency>

添加依赖

            java.io.File newFile = null;try {// 先尝试压缩并保存图片Thumbnails.of(file.getInputStream()).scale(1).outputQuality(0.25f).toFile(sysUploadPath + newFileSavePath + finalName);newFile = new java.io.File(sysUploadPath + newFileSavePath + finalName);} catch (IOException e) {//保存文件到指定目录newFile = new java.io.File(sysUploadPath + newFileSavePath + finalName);file.transferTo(newFile);}

修改上传代码 outputQuality 是压缩比例我们设置了0.25 经对比没有明显变糊
但是体积原来的2m优化到了600k 不会卡到半天都是白屏
贴一下完整的修改头像方法由于上传时已经进行修改所以不用和前台进行过多交互

    @ApiOperation(value = "修改头像")@ApiOperationSupport(order = 1)@PostMapping("/api/auth/updateAuthorAvatar")@OperLog(operModule = "修改头像",operType = OperType.EDIT,operDesc = "修改头像")public ResultBean<Author> updateAuthorAvatar(String fileId) {String followId = String.valueOf(request.getAttribute("authorId"));Author author = authorService.getById(followId);author.setAuthorId(followId);author.setAvatarId(fileId);File file = fileService.selectFileByFileId(fileId);String serverName = request.getServerName();author.setAvatarUrl("http://" + serverName + ":" + port + file.getFilePath());authorService.updateById(author);return ResultBean.success(author);};

消息页优化

消息页我们前民实现了未读消息列表
还有三个大功能没有实现

1.收到的赞和收藏

因为在前期我们在数据库设计上已经做好基础
有作者和关注人且点赞和收藏表的字段一致

  SELECTn.note_id,n.note_title,n.follow_id,n.follow_name,a.AVATAR_URL,n.create_time,b.FIRST_PICTURE, CASEWHEN n.AUTHOR_ID IN (SELECTAUTHOR_IDFROMbusiness_up_notes) THEN1WHEN n.AUTHOR_ID IN (SELECTAUTHOR_IDFROMbusiness_star_notes) THEN2END AS `type`FROM(SELECT*, 'business_up_notes' AS source_tableFROMbusiness_up_notesWHEREAUTHOR_ID = #{authorId}UNION ALLSELECT*, 'business_star_notes' AS source_tableFROMbusiness_star_notesWHEREAUTHOR_ID = #{authorId}) AS nLEFT JOIN business_author a ON n.follow_id = a.AUTHOR_IDLEFT JOIN business_note b ON n.note_id = b.note_idwhere n.follow_id != #{authorId}ORDER BYn.create_time DESC

我们还是一条sql搞定因为页面需要关注人的头像和笔记的图片
我们进行一下连表查询最后过滤我们自己给自己点赞的记录即可
点击再次进去文章详情

2.新增关注

在这里插入图片描述
我们直接可以复用前面文章的粉丝列表页即可

3.评论和回复

在这里插入图片描述
这个模块有两种展现形式
1.对我笔记的评论
2.对我评论的回复
这里我们前面的评论表没有完善所以导致查询有问题

        //如果上级pid不为空 设置 上级作者名和idif(StringUtil.isNotEmpty(replyDto.getParentId())){Reply parentReply = replyService.getById(replyDto.getParentId());replyDto.setParentAuthorName(parentReply.getAuthorName());replyDto.setParentAuthorId(parentReply.getAuthorId());//如果top不为空 设置第二级回复的 上级作者名和id}else if(StringUtil.isNotEmpty(replyDto.getTopParentId())){Reply parentReply = replyService.getById(replyDto.getTopParentId());replyDto.setParentAuthorName(parentReply.getAuthorName());replyDto.setParentAuthorId(parentReply.getAuthorId());//如果评论没有上级id和顶级id则回复的是笔记的作者}else if(StringUtil.isEmpty(replyDto.getParentId())&&StringUtil.isEmpty(replyDto.getTopParentId())){replyDto.setParentAuthorName(note.getAuthorName());replyDto.setParentAuthorId(note.getAuthorId());}

分析一下代码首先我们设置没有parentId和topid这种情况下评论的是笔记本身
所以我们设置他的上级作者是笔记的作何
在判断有没有topid有的话回复的是第一级评论
最后判断有没有parentId有的话是第二级评论
在这里插入图片描述
我们用012 分别表示这三种情况
有了上级parentId就比较好查询了

  SELECTr.reply_id,r.note_id,b.note_title,a.author_id,a.author_name,a.AVATAR_URL,r.create_time,r.REPLAY_CONTENT,b.FIRST_PICTURE,CASEWHEN r.TOP_PARENT_ID IS NULL THEN 1WHEN r.TOP_PARENT_ID IS NOT NULL THEN 2END AS type,r.PARENT_ID,(SELECTREPLAY_CONTENTFROMbusiness_replyWHEREREPLY_ID = r.PARENT_IDLIMIT 1) AS parentReplayContentFROMbusiness_reply rLEFT JOIN business_author a ON r.author_id = a.AUTHOR_IDLEFT JOIN business_note b ON r.note_id = b.note_idwhere PARENT_AUTHOR_ID = #{authorId} and r.author_id != #{authorId}ORDER BYr.create_time DESC

分析sql
首选我们查询所有给我们评论的如果是笔记回复设置类型1
如果是评论回复设置类型2 如果是评论回复还需要查询你引用的回复
最后过滤自己的
在这里插入图片描述
这里我们实现了一个细节
当点击引用的回复时我们希望进入到评论页面的相应位置
实现方法
1.进入笔记详情页传入回复的id；