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

前言

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

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

自定义头像背景图以及网名等等修改之后个人资料卡片也会随之改变

这样看起来就美观多了

修改文字资料的话很简单调用orm的update方法即可

主要难点是修改头像和背景图我们服务器的带宽很有限

这里我们就需要压缩图片上传

bash 复制代码

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

添加依赖

bash 复制代码

            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 不会卡到半天都是白屏

贴一下完整的修改头像方法由于上传时已经进行修改所以不用和前台进行过多交互

bash 复制代码

    @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.收到的赞和收藏

因为在前期我们在数据库设计上已经做好基础

有作者和关注人且点赞和收藏表的字段一致

bash 复制代码

  SELECT
                n.note_id,
                n.note_title,
                n.follow_id,
                n.follow_name,
                a.AVATAR_URL,
                n.create_time,
                b.FIRST_PICTURE, CASE
            WHEN n.AUTHOR_ID IN (
                SELECT
                    AUTHOR_ID
                FROM
                    business_up_notes
            ) THEN
                1
            WHEN n.AUTHOR_ID IN (
                SELECT
                    AUTHOR_ID
                FROM
                    business_star_notes
            ) THEN
                2
            END AS `type`
            FROM
                (
                    SELECT
                        *, 'business_up_notes' AS source_table
                    FROM
                        business_up_notes
                    WHERE
                        AUTHOR_ID = #{authorId}
                    UNION ALL
                        SELECT
                            *, 'business_star_notes' AS source_table
                        FROM
                            business_star_notes
                        WHERE
                            AUTHOR_ID = #{authorId}
                ) AS n
            LEFT JOIN business_author a ON n.follow_id = a.AUTHOR_ID
            LEFT JOIN business_note b ON n.note_id = b.note_id
            where n.follow_id != #{authorId}
            ORDER BY
                n.create_time DESC

我们还是一条sql搞定因为页面需要关注人的头像和笔记的图片

我们进行一下连表查询最后过滤我们自己给自己点赞的记录即可

点击再次进去文章详情

2.新增关注

我们直接可以复用前面文章的粉丝列表页即可

3.评论和回复

这个模块有两种展现形式

1.对我笔记的评论

2.对我评论的回复

这里我们前面的评论表没有完善所以导致查询有问题

bash 复制代码

        //如果上级pid不为空 设置 上级作者名和id
        if(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就比较好查询了

bash 复制代码

  SELECT
                r.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,
                CASE
                    WHEN r.TOP_PARENT_ID IS NULL THEN 1
                    WHEN r.TOP_PARENT_ID IS NOT NULL THEN 2
                END AS type,
                  r.PARENT_ID,
                  (
                        SELECT
                            REPLAY_CONTENT
                        FROM
                            business_reply
                        WHERE
                           REPLY_ID = r.PARENT_ID
                        LIMIT 1
                    ) AS parentReplayContent
            FROM
                business_reply r
            LEFT JOIN business_author a ON r.author_id = a.AUTHOR_ID
            LEFT JOIN business_note b ON r.note_id = b.note_id
            where PARENT_AUTHOR_ID = #{authorId} and r.author_id != #{authorId}
            ORDER BY
                r.create_time DESC