## [移动端演示](http://8.146.211.120:8081/)
## [管理端演示](http://8.146.211.120:8088/)

**前言**
早期实现里，一篇笔记只挂一个 `topic_id`：运营在后台改话题、用户在发现页按话题筛，都够用。但真实社区里常见 **同一篇笔记同时出现在「穿搭」和「好物分享」** 两个话题池——单字段就卡住了。
在不破坏旧数据的前提下，增加关联表 `member_note_topic_rel`，主话题仍写 `member_note.topic_id`（取多选列表第一个），其余话题走关联表；管理端笔记表单支持 **多选话题**，发现流按关联表过滤。
![移动端：发现页](https://developer.qcloudimg.com/http-save/yehe-12101878/286e43f7a692fc2263cfa195454191e8.png)
![移动端：市集频道](https://developer.qcloudimg.com/http-save/yehe-12101878/e5dc07478f570c1581e2ac92eb013790.png)
![管理端：运营看板](https://developer.qcloudimg.com/http-save/yehe-12101878/b1db43f380cdad495ed9b9b70d2f0bf9.png)


----
### 单话题与多对多对比


|维度|单话题字段|多对多|
|:-:|:-:|:-:|
|数据模型|`member_note.topic_id`|`topic_id` + `member_note_topic_rel`|
|后台编辑|单选下拉|`el-select` 多选 `topicIds`|
|发现页筛选|`WHERE topic_id = ?`|`note_id IN (SELECT … FROM rel WHERE topic_id = ?)`|
|兼容历史|—|无 rel 时回退读 `topic_id`|


----
### 一、表结构（可重复执行）

脚本：`sql/mysql/member_note_topic_rel.sql`
- `note_id` + `topic_id` 唯一（含软删）
- `sort`：0 表示主话题，与 `member_note.topic_id` 对齐
- 初始化 `INSERT … SELECT`：把已有笔记的主话题灌进 rel，避免上线后旧笔记「消失」


----
### 二、后端：保存时先删后插

管理端保存、App 发布带话题时，统一走 `replaceNoteTopics`：
```
private void replaceNoteTopics(Long noteId, List<Long> topicIds) {
    memberNoteTopicRelMapper.deleteByNoteId(noteId);
    if (CollUtil.isEmpty(topicIds)) {
        return;
    }
    int sort = 0;
    for (Long topicId : topicIds) {
        memberNoteTopicRelMapper.insert(MemberNoteTopicRelDO.builder()
                .noteId(noteId)
                .topicId(topicId)
                .sort(sort++)
                .build());
    }
}
```
`resolveAdminTopicIds` 校验每个话题属于当前频道后，**第一个 topicId 写回 `member_note.topic_id`**，保证旧接口、旧报表仍有一个「主话题」字段可读。
读详情时 `getNoteTopicIds`：**优先 rel 列表**，没有 rel 再降级 `note.topicId`，H5 不必一次性全量洗数据。


----
### 三、发现流 SQL：关联表子查询

`MemberNoteMapper` 在按话题筛选时，条件从单表字段改为：
```
note_id IN (SELECT note_id FROM member_note_topic_rel
            WHERE deleted = 0 AND topic_id = #{topicId})
```
同一套逻辑用于关注频道、同城等多场景列表，避免「后台挂了 B 话题、前台只在 A 话题能看到」的割裂。


----
### 四、管理端表单：多选 + 校验

管理端 `views/member/note/NoteForm.vue`
- 表单项 `topicIds`：`el-select` `multiple`
- 提交：`topicId: topicIds[0]`，同时传 `topicIds` 数组
- 回显：`data.topicIds?.length ? data.topicIds : [data.topicId]`

运营同学一次勾选多个话题即可，不必复制笔记。
![管理端：笔记话题与站点配置](https://developer.qcloudimg.com/http-save/yehe-12101878/268394db07545a119337e52e5cadf14b.png)


----
### 五、App 侧

用户发布笔记时，正文 `#话题名` 解析仍会自动挂话题；多对多主要在 **运营纠偏、活动合集** 场景由后台补挂。C 端若只选一个话题，行为与旧版一致。


----
### 关键代码位置


|模块|路径|
|:-:|:-:|
|DO / Mapper|member 模块 `MemberNoteTopicRelDO`、`MemberNoteTopicRelMapper`|
|业务|`MemberNoteServiceImpl#replaceNoteTopics`、`getNoteTopicIds`|
|管理端 VO|`MemberNoteSaveReqVO.topicIds`、`MemberNoteRespVO.topicIds`|
|管理端 UI|`views/member/note/NoteForm.vue`|


----
### 总结

多对多不是「再加一个下拉」，而是 **关联表 + 主话题兼容 + 列表 SQL 统一走 rel**。这样一条爆款笔记可以同时进多个话题池，后台也不用复制内容。
>源码：https://gitee.com/ddeatrr/springboot_vue_xhs

前言早期实现里，一篇笔记只挂一个 topic_id：运营在后台改话题、用户在发现页按话题筛，都够用。但真实社区里常见 同一篇笔记同时出现在「穿搭」和「好物分享」 两个话题池——单字段就卡住了。在不破坏旧数据的前提下，增加关联表 member_note_topic_rel，主话题仍写 member_note.topic_id（取多选列表第一个），其余话题走关联表；管理端笔记表单支持 多选话题，发现流按关联表过滤。

从零用 Java 实现小红书 SpringBoot Vue UniApp（23）笔记话题多对多：一条笔记进多个话题池

前言早期实现里，一篇笔记只挂一个 topic_id：运营在后台改话题、用户在发现页按话题筛，都够用。但真实社区里常见 同一篇笔记同时出现在「穿搭」和「好物分享」 两个话题池——单字段就卡住了。在不破坏旧数据的前提下，增加关联表 member_note_topic_rel，主话题仍写 member_note.topic_id（取多选列表第一个），其余话题走关联表；管理端笔记表单支持 多选话题，发现流

后端

编程语言

数据库

将笔记与话题从单字段升级为多对多关联，通过新增关联表`member_note_topic_rel`，主话题仍存原字段兼容旧数据，列表筛选统一走关联表子查询，支持一条笔记同时进入多个话题池，管理端表单可多选话题，历史数据自动回填无需手动迁移。

代码解释

2026上云采购 | AI焕新·智启新局

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

从零用 Java 实现小红书 SpringBoot Vue UniApp（23）笔记话题多对多：一条笔记进多个话题池-腾讯云开发者社区-腾讯云

从零用 Java 实现小红书 SpringBoot Vue UniApp（23）笔记话题多对多：一条笔记进多个话题池

从零用 Java 实现小红书 SpringBoot Vue UniApp（23）笔记话题多对多：一条笔记进多个话题池

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐