前言

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

前面的文章我们主要完成了用户的登陆和笔记发布 今天我们讲解点赞收藏 留言功能
点赞、收藏

点赞本身的逻辑很简单

点赞流程

1. 前端：用户点击点赞按钮，收集笔记 ID、用户 ID 等信息，向后端点赞接口发 POST 请求。
2. 后端：
   • 接收请求，获取用户信息，查数据库确认用户合法性。
   • 查点赞记录，判断用户对该笔记是否已点赞。
   • 未点赞则创建点赞记录并存入数据库，标记点赞；已点赞则删除对应记录，标记取消点赞。
3. 后端：将点赞状态（点赞或取消点赞）返回给前端，前端据此更新界面显示。

     @ApiOperation(value = "点赞笔记")
    @ApiOperationSupport(order = 1)
    @PostMapping("/api/auth/upNote")
    @OperLog(operModule = "点赞笔记",operType = OperType.ADD,operDesc = "点赞笔记")
    public ResultBean upNote(@RequestBody NoteDto noteDto) {
        String followId = String.valueOf(request.getAttribute("authorId"));
        Author follow = authorService.getById(followId);
        Boolean isUp = Boolean.FALSE;
        //查看在不在点赞列表
        UpNotes upNotes = upNotesService.selectOneByFollowId(noteDto.getNoteId(),noteDto.getAuthorId(), followId);
        //不在证明是点赞
        if(upNotes==null){
            upNotes = new UpNotes();
            upNotes.setAuthorId(noteDto.getAuthorId());
            upNotes.setAuthorName(noteDto.getAuthorName());
            upNotes.setFollowId(follow.getAuthorId());
            upNotes.setFollowName(follow.getAuthorName());
            upNotes.setNoteId(noteDto.getNoteId());
            upNotes.setNoteTitle(noteDto.getNoteTitle());
            isUp = Boolean.TRUE;
            upNotesService.save(upNotes);
        }else{
          //在则表示取消赞删除数据
            upNotesService.removeById(upNotes);
        }
        return ResultBean.success(isUp);
    };

		//点赞笔记
		upNote(notes){
			app.post('/auth/upNote',notes,'json',"",(res=>{
				console.log(res.data)
				if(res.data){
					notes.isUp = true
					notes.upCount ++
				}else{
					notes.isUp = false
					notes.upCount --
				}
			}))
		},

后续的收藏 及评论点赞同理
主要的问题是点赞后列表显示的问题
首先需要展示每个笔记点赞的次数 还需要显示当前登录人是否点过赞
刚开始我用java代码实现 后来发现耦合过多 还是用sql进行实现

SELECT
	a.*, (
		SELECT
			COALESCE (COUNT(e.note_id), 0)
		FROM
			business_star_notes e
		WHERE
			e.note_id = a.note_id
		GROUP BY
			e.note_id
	) AS starCount,
	(
		SELECT
			COALESCE (COUNT(d.note_id), 0)
		FROM
			business_up_notes d
		WHERE
			d.note_id = a.note_id
		GROUP BY
			d.note_id
	) AS upCount,
	CASE
WHEN EXISTS (
	SELECT
		1
	FROM
		business_star_notes sub_b
	WHERE
		sub_b.note_id = a.note_id
	AND sub_b.follow_id = '42302ccef5fbf7126995217221973a9f'
) THEN
	TRUE
ELSE
	FALSE
END AS isStar,
 CASE
WHEN EXISTS (
	SELECT
		1
	FROM
		business_up_notes sub_c
	WHERE
		sub_c.note_id = a.note_id
	AND sub_c.follow_id = '42302ccef5fbf7126995217221973a9f'
) THEN
	TRUE
ELSE
	FALSE
END AS isUp
FROM
	business_note a
LEFT JOIN business_star_notes b ON a.note_id = b.note_id
LEFT JOIN business_up_notes c ON a.note_id = c.note_id
WHERE
	a.deleted = 0
AND c.follow_id = '42302ccef5fbf7126995217221973a9f'
GROUP BY
	a.note_id
ORDER BY
	a.create_time DESC

1. 首先先用两个子查询查询笔记在点赞和收藏表中的数量（不用子查询的话会导致结果和后面的查询条件混合 例如我查询点赞过的笔记上面的upCount就会变成1）
2. 传入followId（关注者id）如果点赞或收藏过则使用mysql case when 返回true
3. 后面则是正常的链接查询
   留言
   我们先找一个小红书的留言样式进行分析
   
   首先呢有一级回复 是回复帖子本身的
   二级回复是楼中楼的回复 我以为会出现这样的样式

• 一级回复
  • 2
    • 3

分析
一直往后排 发现只有两级 后面的无论有多少就直接放到二级了
按照这个规律我们创建了两个字段
top 一级评论没有 二级评论有这个top的字段
parent 后面不管有多少回复一级评论的我们都加上一级的id作为top字段
然后根据parent找到是谁回复的 这样就可以显示回复了谁
我们实现的效果

点赞收藏回复功能开发完毕 后面我们完成关注和im聊天功能

代码地址
https://gitee.com/ddeatrr/springboot_vue_xhs