springboot vue uniapp 仿小红书 1:1 还原 (含源码演示)

线上预览:

移动端 http://8.146.211.120:8081/

管理端 http://8.146.211.120:8088/

小红书凭借优秀的产品体验 和超高人气 目前成为笔记类产品佼佼者

此项目将详细介绍如何使用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问题解决

language 复制代码
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

相关推荐
opbr6 分钟前
🚫🔨 不用重构!教你用 Vue3 + TSX 🧹优雅收纳后台页面一堆操作按钮
前端·vue.js
小小霸王龙!11 分钟前
互联网大厂Java面试实录:Spring Boot与微服务在电商场景中的应用
java·spring boot·redis·微服务·电商
西瓜树枝16 分钟前
antd vue全局自定义样式前缀实践
前端·vue.js
大只鹅2 小时前
Springboot3.3.4使用spring-data-elasticsearch整合Elasticsearch7.12.1
spring boot·elasticsearch
1.01^10002 小时前
[6-02-01].第05节:配置文件 - YAML配置文件语法
spring boot
sunbyte3 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
浏览器API调用工程师_Taylor3 小时前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
一个水瓶座程序猿.3 小时前
Vue3 中使用 Vueuse
前端·javascript·vue.js
网络点点滴4 小时前
Vue如何处理数据、v-HTML的使用及总结
前端·vue.js·html
Little_Code4 小时前
uniapp 使用ffmpeg播放rtsp
ffmpeg·uni-app·rtsp