更新记录

0.03(2026-07-18) 下载此版本

演示地址

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


本版本功能一览

社区 / 笔记

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

消息 / 社交

  • 消息中心:赞与收藏、新增关注、评论、系统通知
  • 私信聊天:文字、图片、笔记卡片分享
  • 群聊:创建群、邀请、群设置
  • 点点助手(AI 对话入口)

市集 / 商城

  • 市集首页(DIY 可装修)
  • 商品分类、商品列表、商品详情
  • 购物车、下单确认、订单列表 / 详情
  • 收货地址管理
  • 我的钱包、充值 / 余额
  • 优惠券领取与使用
  • 秒杀活动、拼团活动

个人中心

  • 我的主页:笔记 / 收藏 / 赞过
  • 个人资料编辑
  • 设置、登录 / 注册

多端与技术

  • uni-app + Vue3
  • 一套代码支持 H5、微信小程序、App
  • 对接 Spring Boot 后端与 Vue3 管理端

启动方式(uni-app)

  1. 解压项目后,用 HBuilderX 打开项目根目录
  2. 执行依赖安装(首次):在终端进入项目目录执行 npm install
  3. 顶部菜单选择 运行 → 运行到浏览器 → Chrome(或运行到微信开发者工具 / 手机)
  4. 接口地址如需修改,编辑项目根目录 .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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

图片

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

用户登录信息 用于笔记发布 可以随意编辑

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT License

Copyright (c) 2022 lidongtony

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.