更新记录
0.03(2026-07-18) 下载此版本
演示地址
- H5 移动端:http://8.146.211.120:8081/
- 管理后台:http://8.146.211.120:8088/
- 已适配:H5 / 微信小程序 / App
建议使用手机浏览器,或电脑浏览器打开开发者工具 → 切换到移动端模式预览 H5。
本版本功能一览
社区 / 笔记
- 发现首页:双列瀑布流、频道切换、下拉刷新
- 搜索:历史记录、热搜、笔记 / 用户检索
- 图文笔记详情:点赞、收藏、评论、回复
- 视频笔记:全屏播放、进度条、点赞动效
- 发布笔记:选图 / 拍视频、编辑封面、话题、公开 / 私密
- 编辑笔记与权限设置
- 作者主页、关注 / 粉丝
- 笔记草稿箱
消息 / 社交
- 消息中心:赞与收藏、新增关注、评论、系统通知
- 私信聊天:文字、图片、笔记卡片分享
- 群聊:创建群、邀请、群设置
- 点点助手(AI 对话入口)
市集 / 商城
- 市集首页(DIY 可装修)
- 商品分类、商品列表、商品详情
- 购物车、下单确认、订单列表 / 详情
- 收货地址管理
- 我的钱包、充值 / 余额
- 优惠券领取与使用
- 秒杀活动、拼团活动
个人中心
- 我的主页:笔记 / 收藏 / 赞过
- 个人资料编辑
- 设置、登录 / 注册
多端与技术
- uni-app + Vue3
- 一套代码支持 H5、微信小程序、App
- 对接 Spring Boot 后端与 Vue3 管理端
启动方式(uni-app)
- 解压项目后,用 HBuilderX 打开项目根目录
- 执行依赖安装(首次):在终端进入项目目录执行
npm install - 顶部菜单选择 运行 → 运行到浏览器 → Chrome(或运行到微信开发者工具 / 手机)
- 接口地址如需修改,编辑项目根目录
.env中的SHOPRO_BASE_URL
也可直接打开在线演示:http://8.146.211.120:8081/
0.02(2026-07-18) 下载此版本
演示地址
- H5 移动端:http://8.146.211.120:8081/
- 管理后台:http://8.146.211.120:8088/
- 已适配:H5 / 微信小程序 / App
建议使用手机浏览器或浏览器开发者工具移动端模式打开 H5 预览。
本版本功能一览
社区 / 笔记
- 发现首页:双列瀑布流、频道切换、下拉刷新
- 搜索:历史记录、热搜、笔记/用户检索
- 图文笔记详情:点赞、收藏、评论、回复
- 视频笔记:全屏播放、进度条、点赞动效
- 发布笔记:选图/拍视频、编辑封面、话题、公开/私密
- 编辑笔记与权限设置
- 作者主页、关注 / 粉丝
- 笔记草稿箱
消息 / 社交
- 消息中心:赞与收藏、新增关注、评论、系统通知
- 私信聊天:文字、图片、笔记卡片分享
- 群聊:创建群、邀请、群设置
- 点点助手(AI 对话入口)
市集 / 商城
- 市集首页(DIY 可装修)
- 商品分类、商品列表、商品详情
- 购物车、下单确认、订单列表 / 详情
- 收货地址管理
- 我的钱包、充值 / 余额
- 优惠券领取与使用
- 秒杀活动、拼团活动
个人中心
- 我的主页:笔记 / 收藏 / 赞过
- 个人资料编辑
- 设置、登录 / 注册
多端与技术
- uni-app + Vue3
- 一套代码支持 H5、微信小程序、App
- 对接 Spring Boot 后端与管理端
0.01(2024-12-26) 下载此版本
1登录 2发布笔记 3查询笔记 4点赞收藏笔记 5留言(点赞)
查看更多平台兼容性
uni-app
| Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
|---|---|---|---|---|---|---|---|---|
| √ | √ | - | - | - | - | - | - | - |
| 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 小红书小程序 | 快应用-华为 | 快应用-联盟 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| - | - | - | - | - | - | - | - | - | - | - | - |
其他
| 多语言 | 暗黑模式 | 宽屏模式 |
|---|---|---|
| √ | × | √ |
线上预览:
移动端 http://8.146.211.120:8081/
管理端 http://8.146.211.120:8086/
小红书凭借优秀的产品体验 和超高人气 目前成为笔记类产品佼佼者
此项目将详细介绍如何使用Vue.js和Spring Boot 集合uniapp
开发一个仿小红书的城应用,凭借uniapp 可以在h5 小程序 app等多端使用

技术栈
移动端 uniapp graceui 管理端 vue element 后台 springboot springsecurity mybatisPlus tio-websocket
主要功能
- 笔记创建 编辑 发布
- 点赞笔记、评论
- 回复笔记、评论
- 私信、客服聊天
- 后台笔记编辑 下架
- 后台博主冻结
- 后台客服系统
- 系统消息维护
思维导图

项目展示

项目启动
后台运行环境
- jdk1.8
- mysql5.7
- redis
启动步骤 1.下载pom文件依赖 2.导入项目中的sql 3.修改yml参数(端口号 数据库名) 4.如果 mysql 报错 order by和group by 执行sql报错sql_mode=only_full_group_by问题解决
SELECT @@GLOBAL.sql_mode;
SELECT @@SESSION.sql_mode;
set @@GLOBAL.sql_mode='STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_ENGINE_SUBSTITUTION';
set @@SESSION.sql_mode='STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_ENGINE_SUBSTITUTION';
FLUSH PRIVILEGES;
5.打包 mvn clean package -Dmaven.test.skip=true 打包后jar文件可以正常运行
管理端前台运行环境
- node v14.21.3
- elementui 2.15.14
- vue 2.6.14
启动步骤 1.cd 根目录的web文件夹下 2.执行npm install下载依赖 3.执行npm run dev启动 4.修改.env.xx修改测试环境和正式环境端口 5.npm run build进行打包 6.如果出现lemon imui 依赖报错 解压根目录下dist.rar文件夹到lemon imui根目录下即可
移动端前台 hbudiler 3.99 vue 3 移动端前台使用了graceUi6.0 需授权后找我覆盖文件
包结构说名
后端

- 目前后端功能基本能满足我们需求
- 后续开发建立和system同级目录 进行功能开发即可

收藏人数:
https://gitee.com/ddeatrr/springboot_vue_xhs
下载插件并导入HBuilderX
下载插件ZIP
赞赏(0)
下载 228
赞赏 0
下载 12504573
赞赏 1941
赞赏
京公网安备:11010802035340号