移動端演示 http://8.146.211.120:8081/#/
管理端演示 http://8.146.211.120:8088/#/
項目整體介紹及演示
前言
在前面的系列文章中，我們已經基本完成了小紅書項目的核心框架搭建和圖文筆記的發布、展示流程。為了豐富App的功能和用戶體驗，今天我們將在此基礎上進行兩大核心升級：一、為筆記增加分類，并在首頁實現篩選功能；二、支持用戶發布視頻筆記。
一、首頁分類篩選
首先，我們參考主流內容App的設計，在首頁的“發現”模塊頂部增加一個分類導航欄，讓用戶可以快速篩選自己感興趣的內容。
最終效果如下：
1. 后端實現
要實現分類，必須先有分類的存儲。我們需要創建一張 business_category 表來管理所有分類。
CREATE TABLE `business_category` (`CATEGORY_ID` varchar(32) NOT NULL COMMENT '分類id',`CATEGORY_NAME` varchar(255) DEFAULT NULL COMMENT '分類名稱',`SORT` int(11) DEFAULT '0' COMMENT '排序',`DELETED` tinyint(2) DEFAULT '0' COMMENT '0正常 1刪除',`CREATE_TIME` datetime DEFAULT NULL,`UPDATE_TIME` datetime DEFAULT NULL,PRIMARY KEY (`CATEGORY_ID`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='筆記分類表';
我們增加了 SORT 字段，方便后臺進行排序管理。
接著，在后端的 NoteController.java 中，我們對查詢筆記的接口進行改造，使其支持按 noteCategory 參數進行過濾。
// Mybatis-Plus Wrapper
QueryWrapper<Note> queryWrapper = new QueryWrapper<>();
// ...其他查詢條件
// 如果分類ID不為空，則增加分類篩選條件
if (StringUtils.isNotBlank(noteCategory)) {queryWrapper.eq("NOTE_CATEGORY", noteCategory);
}
// ...執行查詢
同時，提供一個 /api/getCategories 接口，用于讓App端獲取所有已排序的分類列表。
2. 前端實現
后臺管理：
我們在后臺管理系統中，創建了對應的分類管理頁面，實現了對筆記分類的增、刪、改、查以及拖拽排序功能。
App端 (index.vue)：
在首頁 onLoad 時，調用接口獲取分類數據。
onLoad() {this.getCategories();// ...
},
methods:{getCategories() {uni.app.get('/getCategories', {}, (res) => {if (res.code === 200) {// 將后臺返回的分類列表處理成導航組件需要的數據格式const categories = res.data.map(item => ({id: item.categoryId,name: item.categoryName}));// 在最前面加上“推薦”this.navItems = [{ id: '', name: '推薦' }, ...categories];}});},// ...
}
然后使用 gui-switch-navigation-shopping 組件來渲染這個可橫向滾動的導航欄。當用戶點擊不同分類時，觸發 @change 事件，調用查詢筆記的接口并傳入當前分類的ID。
<gui-switch-navigation-shopping :data="navItems" :currentIndex="navCurrentIndex"@change="navchange">
</gui-switch-navigation-shopping>// methods
navchange: function(index) {this.navCurrentIndex = index;// this.navItems[index].id 就是分類IDthis.noteCategory = this.navItems[index].id;// 清空現有列表，重新加載數據this.notes = [];this.page = 1;this.getNotes();
}
至此，首頁的分類篩選功能就完成了。
二、支持視頻筆記
圖文內容已經無法滿足所有創作場景，接下來我們為項目增加發布視頻筆記的功能。
創建頁效果：
1. 數據庫與后端修改
首先，我們需要在筆記表 business_note 中增加一個字段來存儲視頻的地址。
ALTER TABLE `business_note`
ADD COLUMN `VIDEO_URL` varchar(500) NULL COMMENT '視頻地址' AFTER `FIRST_PICTURE`;
然后在對應的實體類 Note.java, NoteDto.java, NoteVo.java 中都加上 videoUrl 屬性。
最后，修改發布筆記的接口 addNote，使其能夠接收并保存 videoUrl 字段。
2. 前端實現 (create.vue)
我們對發布頁 create.vue 進行了改造。
筆記類型選擇：
將原來的Tab切換改為了點擊后從底部彈出的ActionSheet，交互更友好。
文件上傳：
當用戶選擇發布“視頻筆記”時，界面會展示兩個上傳入口：一個用于上傳視頻，一個用于上傳封面。
<!-- v-if="note.noteType === 2" -->
<view><view class="gui-h6">上傳視頻</view><!-- 視頻上傳組件 -->...
</view>
<view style="margin-top:20rpx;"><view class="gui-h6">上傳封面</view><!-- 封面上傳組件 -->...
</view>
提交邏輯：
在 submit 方法中，我們對視頻筆記的提交流程進行了重構。使用 Promise.all 來并發上傳視頻文件和封面圖片，可以有效提升上傳效率。
async submit() {// ...表單校驗...uni.showLoading({ title: '發布中...' });if (this.note.noteType === 2) { // 視頻筆記if (!this.videoTempPath || !this.coverTempPath) {// ...提示用戶選擇文件...return;}try {// 并發上傳封面和視頻const [coverRes, videoRes] = await Promise.all([this.uploadFile(this.coverTempPath, 'avatar'),this.uploadFile(this.videoTempPath, 'video')]);// 從返回結果中獲取完整URL和文件IDthis.note.firstPicture = coverRes.data; // 封面URLthis.note.videoUrl = videoRes.data; // 視頻URLthis.note.imgs = [coverRes.result.fileId]; // 封面ID// 調用接口，將數據提交到后端this.postNoteData();} catch (error) {uni.hideLoading();uni.showToast({ title: `上傳失敗: ${error}`, icon: "none" });}} else { // 圖文筆記// ...執行原來的圖文上傳邏輯...}
}
通過以上改造，我們就完整地實現了視頻筆記的發布功能。在首頁信息流和筆記詳情頁，只需要將 note.videoUrl 綁定到 <video> 組件的 src 屬性上即可播放。
后面我們計劃實現商城功能，敬請期待。
代碼地址
https://gitee.com/ddeatrr/springboot_vue_xhs
)
