『博客开发日记』之修复标签无法在文章详情页和文章列表中显示的问题

本文最后更新于 2026年3月22日 下午

修复标签无法在文章详情页和文章列表中显示的问题

起因

在测试的时候发现在首页文章详情页和文章详情页中不能显示文章所属标签

经过测试查出是后端在文章列表和文章详情接口的实现方法中没有关于标签列表传递到前端

而且由于一篇文章可以拥有多个标签，在数据库中是通过文章标签表来进行查询的

这就意味着将标签添加到文章列表和文章详情里不能像分类那样简单直接获取再添加

解决办法

分别在文章列表和文章详情的Vo类中加上标签列表字段

在ArticleServiceImpl类中引入TagMapper

然后在ArticleServiceImpl中写两个私有方法(fillArticleListTags,fillArticleDetailTags)来将标签添加到文章列表和文章详情中

两个方法各司其职

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
/**
 * 为文章列表添加标签数据
 * @param articleListVos 文章列表VO
 */
private void fillArticleListTags(List<ArticleListVo> articleListVos)
{
    if (articleListVos == null || articleListVos.isEmpty()) {
        return;
    }

    //收集所有文章ID
    List<Long> articleIds = articleListVos.stream()
            .map(ArticleListVo::getId)
            .collect(Collectors.toList());

    //查询这些文章的标签关联
    LambdaQueryWrapper<ArticleTag> articleTagWrapper = new LambdaQueryWrapper<>();
    articleTagWrapper.in(ArticleTag::getArticleId, articleIds);
    List<ArticleTag> articleTagList = articleTagMapper.selectList(articleTagWrapper);

    //如果没有标签关联，直接返回
    if (articleTagList.isEmpty()) {
        return;
    }

    //收集所有标签ID
    List<Long> tagIds = articleTagList.stream()
            .map(ArticleTag::getTagId)
            .distinct()
            .collect(Collectors.toList());

    //查询标签详情
    LambdaQueryWrapper<Tag> tagWrapper = new LambdaQueryWrapper<>();
    tagWrapper.in(Tag::getId, tagIds)
            .eq(Tag::getDelFlag, SystemConstants.NOT_DELETED);
    List<Tag> tags = tagMapper.selectList(tagWrapper);

    //转换为TagVo的Map，key为tagId
    Map<Long, TagVo> tagVoMap = tags.stream()
            .collect(Collectors.toMap(
                    Tag::getId,
                    tag -> BeanCopyUtils.copyBean(tag, TagVo.class)
            ));

    //构建文章ID到标签列表的映射
    Map<Long, List<TagVo>> articleTagMap = articleTagList.stream()
            .filter(at -> tagVoMap.containsKey(at.getTagId()))
            .collect(Collectors.groupingBy(
                    ArticleTag::getArticleId,
                    Collectors.mapping(
                            at -> tagVoMap.get(at.getTagId()),
                            Collectors.toList()
                    )
            ));

    //为每篇文章设置标签列表
    articleListVos.forEach(article ->
            article.setTags(articleTagMap.getOrDefault(article.getId(), List.of()))
    );
}

/**
 * 为文章详情添加标签数据
 * @param articleDetailVo 文章详情VO
 */
private void fillArticleDetailTags(ArticleDetailVo articleDetailVo)
{
    if (articleDetailVo == null || articleDetailVo.getId() == null) {
        return;
    }

    //查询该文章的标签关联
    LambdaQueryWrapper<ArticleTag> articleTagWrapper = new LambdaQueryWrapper<>();
    articleTagWrapper.eq(ArticleTag::getArticleId, articleDetailVo.getId());
    List<ArticleTag> articleTagList = articleTagMapper.selectList(articleTagWrapper);

    //如果没有标签关联，设置空列表
    if (articleTagList.isEmpty()) {
        articleDetailVo.setTags(List.of());
        return;
    }

    //收集标签ID
    List<Long> tagIds = articleTagList.stream()
            .map(ArticleTag::getTagId)
            .collect(Collectors.toList());

    //查询标签详情
    LambdaQueryWrapper<Tag> tagWrapper = new LambdaQueryWrapper<>();
    tagWrapper.in(Tag::getId, tagIds)
            .eq(Tag::getDelFlag, SystemConstants.NOT_DELETED);
    List<Tag> tags = tagMapper.selectList(tagWrapper);

    //转换为TagVo列表
    List<TagVo> tagVos = BeanCopyUtils.copyBeanList(tags, TagVo.class);
    articleDetailVo.setTags(tagVos);
}

然后在两个方法分别在articleList和getArticleDetail中调用

这样即可实现在文章列表和文章详情页中展示文章所属标签的功能

至此博客系统的前台所包含的前端和后端基本开发完整

PS:该系列只做为作者学习开发项目做的笔记用

不一定符合读者来学习，仅供参考

预告

后续会记录博客的开发过程

每次学习会做一份笔记来进行发表

“一花一世界，一叶一菩提”

版权所有 © 2025 云梦泽
欢迎访问我的个人网站：https://hgt12.github.io/

博客开发
#技术向 #个人博客 #前端 #后端
『博客开发日记』之修复标签无法在文章详情页和文章列表中显示的问题
http://example.com/2026/03/22/『博客开发日记』之修复标签无法在文章详情页和文章列表中显示的问题/
作者
云梦泽
发布于
2026年3月22日
更新于
2026年3月22日
许可协议