springboot + Vue3 + uni-app 打造仿小红书社区

原创已于 2026-07-18 20:29:07 修改 · 270 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

java仿写小红书

于 2026-07-18 20:22:01 首次发布

深度剖析：基于芋道（RuoYi-Vue-Pro）+ Vue3 + uni-app 打造仿小红书社区与市集

在内容社交与本地生活持续升温的今天，「笔记社区 + 电商市集」已经成为很多产品的标准形态。本文基于我们已落地运行的开源项目，介绍如何使用 Spring Boot（芋道 / RuoYi-Vue-Pro）、Vue3 管理端、uni-app 移动端，从零到可演示，完成一套仿小红书风格的多端应用。

项目已从早期 springboot_vue_xhs（Vue2 + ElementUI + graceUI + lemon-imui）整体升级为芋道体系，不再依赖旧版 web 目录与 dist.rar 解压步骤。

一、线上预览

移动端 H5：http://8.146.211.120:8081/
管理后台：http://8.146.211.120:8088/
多端适配：H5 / 小程序 / App

建议用手机浏览器，或电脑浏览器打开开发者工具切换到移动端模式预览 H5。

二、技术选型（最新架构）

（一）移动端：uni-app + Vue3

一套代码编译到 H5、微信小程序、App。仓库内提供：

目录	说明
`front/yudao-mall-uniapp-lite`	演示版（已基本满足浏览、市集、消息、发布、个人中心等演示能力）
（完整工程）`yudao-mall-uniapp`	完整能力工程，按需获取

（二）管理端：Vue3 + Element Plus（完整开放）

目录：front/yudao-ui-admin-vue3
覆盖会员、笔记 / 频道 / 话题、商城装修 DIY、订单与运营配置等后台能力。

（三）后端：芋道 RuoYi-Vue-Pro

Spring Boot 2.7（JDK 8）
MyBatis-Plus、Redis、多租户
业务聚焦：system / infra / member（笔记、私信、群聊）/ pay / mall（商品、交易、促销）

相对旧方案的变化：

管理端：Vue2 + ElementUI → Vue3 + Element Plus
移动端：graceUI 强依赖 → 商城 uni-app 体系 + 自研社区页面
IM：lemon-imui / tio → 会员模块私信 / 群聊 + WebSocket
工程结构：单体旧包 → 芋道多模块，前端统一放在 front/

三、核心功能一览

（一）社区 / 笔记

发现首页：双列瀑布流、频道切换、下拉刷新
搜索：历史、热搜、笔记 / 用户检索
图文详情：点赞、收藏、评论、回复
视频笔记：全屏播放、进度条、点赞动效
发布与编辑：图文 / 视频、封面、话题、公开 / 私密
作者主页、关注 / 粉丝、草稿箱

（二）消息 / 社交

消息中心：赞藏、新增关注、评论、系统通知
私信：文字、图片、笔记卡片分享
群聊：建群、邀请、群设置
点点助手（AI 对话入口）

（三）市集 / 商城

DIY 可装修首页
分类 / 列表 / 详情、购物车、下单、订单
地址、钱包与充值、优惠券
秒杀、拼团等营销能力

（四）管理后台

笔记 / 频道 / 话题管理（含下架、降权等）
会员与权限、商城与 DIY 装修
登录日志、操作日志、文件与基础设施配置

四、仓库目录结构（前端）

ruoyi-vue-pro /
├── front/
│   ├── yudao-ui-admin-vue3/      # 管理端（完整开放）
│   └── yudao-mall-uniapp-lite/   # 移动端演示版
├── yudao-server/                 # 启动入口
├── yudao-module-member/          # 笔记 / 私信 / 群聊等
├── yudao-module-mall/            # 商城
├── yudao-module-pay/             # 支付
├── yudao-module-system/
├── yudao-module-infra/
└── sql/mysql/yudao-full.sql

标签

#spring boot #uni-app #后端