Skip to content

一个最真实的仿小红书web端的vue3项目,支持七牛云和本地图片上传,私信聊天,es内容搜索,点赞收藏,评论等其他功能。

License

Notifications You must be signed in to change notification settings

xiaozhaoCcz/xiaohongshu-Web1.0

Repository files navigation

仿小红书web 1.0

仿小红书设计的一个基于微服务架构的前后端分离项目

项目介绍

此项目基于微服务架构的前后端分离系统Web 端使用 Vue3 +ts+ElementUi 。后端使用 SpringBoot + Mybatis-plus进行开发,使用 ElasticSearch 作为全文检索服务,使用webSocket做聊天和消息推送。

数据库文件在doc/yanhuo-test.sql

这个项目尽量做得简单,所以没有考虑接口的性能,所有功能都是直接对数据库进行操作

目前git上面是1.0版本,基本功能都完成,2.0版本花费时间更多,因为之前项目白嫖太多2.0版本决定收费(演示的项目也是2.0版本,2.0版本包括移动端和web端源代码),维护服务器的费用,后续bug也会在2.0版本上修改

全套2.0版本可以直接拿来做毕业设计包含论文和开题报告...!!!

image text image text
image text image text

[qq群] 879599115,需要2.0版本源码加微信18572755162(定价400元,单买web端或移动端各200元,推荐web端,如果需要全套包含毕业论文请往下看)

项目地址

演示地址:https://www.bilibili.com/video/BV1kN4y1n7gz/?spm_id_from=333.1007.top_right_bar_window_history.content.click

测试帐号:

  • 帐号: xiaozhao2 密码: xiaozhao2
  • 帐号: xiaozhao3 密码: xiaozhao3

部署教程

http://175.178.249.190/blog/post/310

重点

  • 这个项目不适合初学者,可以帮忙运行,但必须此项目所需的运行环境要配置好!!!买了以后不支持退款,请考虑好再买!!!
  • 支持七牛云存储,腾讯云存储,minio存储,需要自己配置
  • 后台系统是直接在若依框架上进行修改,做了几个表的增删改查,为什么要卖这么贵是因为有人拿我这个项目卖毕业设计,如果你是学习代码推荐只买web端!!!,如果是要做毕业设计可以选择购买!!!

项目价格

2.0web端 2.0移动端 (2.0web或2.0移动)+后台管理系统 2.0web+2.0移动+后台管理系统 2.0web+2.0移动+后台管理系统+开题报告+毕业论文
200¥ 200¥ 600¥ 800¥ 1500¥

仿小红书项目1.0版本功能介绍

  • 瀑布流展示笔记,懒加载笔记图片
  • 笔记分类查询,使用elastcsearch做关键词搜索查询笔记
  • 关键词使用elastcsearch做高亮查询
  • 动态展示,展示个人和好友动态
  • 支持私信聊天,关注用户,评论笔记,点赞笔记和点赞图片功能,收藏笔记功能
  • 使用websocket消息通知,用户发送的消息会实时通知,消息页面会实时收到当前用户未读消息数量
  • 双token登陆
  • 发布和修改笔记功能,使用七牛云oss对象存储图片
  • 个人信息展示,展示当前用户发布的笔记和点赞收藏的笔记

仿小红书项目2.0版本优势

  • (使用springboot3+jdk17+vue3重构项目!!!)(这个版本改成单服务+saToken,可以说是3.0web端版本,只支持web端!,如果需要可以购买2.0版以后选择发这一版)
  • 使用协同过滤算法做推荐功能
  • 修改成单模块启动,启动framework模块即可,多模块的代码也会保留
  • 优化ui页面和前后端代码
  • 2.0版本支持多数据源
  • 2.0新增功能:
    • web端新增发送视频笔记,支持视频笔记修改
    • 支持笔记好友分享
    • 新增注册功能
    • 新增个人信息修改功能,可更换头像,设置标签
    • 查看用户关注,粉丝功能
    • 首页支持搜索用户
    • elasticsearch做聚合查询,支持多条件搜索笔记,
    • “评论和@”页面支持直接回复用户信息
    • 私聊消息支持发送图片
    • 新增minio对象存储功能和腾讯云存储
    • 多线程+aop记录用户的登陆信息(ip,城市,浏览器类型)和操作信息
  • 使用aop+redis+注解方式防止用户重复发布笔记和修改笔记
  • 修复main页面打开,滚动评论,主页面也会滚动bug
  • 修复main页面评论显示异常bug,评论数量显示异常bug
  • 使用多线程进行消息通知,解决用户退出main页面卡顿bug
  • 使用mq优化发布笔记和修改笔记功能,提升响应速度(单模块移除,多模块代码保留)
  • 使用mq+redis优化点赞,收藏,评论功能,测试qps提升2倍多(单模块移除,多模块代码保留)
  • other模块有自己学习的一些技术代码

image text image text

web端项目截图

image text image text
image text image text
image text image text
image text image text
image text image text
image text

移动端项目截图

image text image text
image text image text
image text image text
image text image text
image text image text

API接口文档

https://console-docs.apipost.cn/preview/43d05f344c62117e/63d199bf052ccf41

运行启动

前端启动

下载项目进入yanhuo-web

1.下载依赖

yarn install 

2.启动项目

npm run dev

3.启动成功后页面 image text

image text

后端启动

  • 首先需要把rediselasticsearchmysql 安装好启动。

  • 如果是本地上传,需要修改图片保存地址(目前本地保存有bug),不然上传图片会失败(默认使用七牛云存储) image text

  • 如果是使用七牛云存储图片,需要配置七牛云的oss地址(默认使用七牛云存储,因此可以也可以不用修改本地文件地址) image text

  • 修改每个项目下的数据库账号密码,如果有es账号密码需要修改 yanhuo-search下的配置文件 image text image text

  • 启动yanhuo-auth,yanhuo-gateway,yanhuo-im,yanhuo-platform,yanhuo-search,yanhuo-util即可运行项目。

  • 启动项目后会发现没有任何数据,这是因为es中还没有同步数据(这里有两种方式同步数据,一种是直接运行test方法,另一种是使用xxljob,想学习xxljob的同学可以看第二种方法)

    • 方法1,直接运行PlatformApplicationTests里面syncEsData方法 image text
    • 方法2,我们需要启动xxl-job(运行xxl-job这里就不展开了,去git上面搜索xxl-job然后下载下来更改数据库后就可以启动了)并配置数据
      • xxl-job添加执行器 image text
      • 添加定时任务 image text
      • 然后运行任务,观察日志运行情况,如果显示成功则数据同步成功 image text

成功运行

image text

联系我

如果有什么问题可以加群讨论,群号:879599115

image text

后期维护

这个项目尽量做得简单,所以没有考虑接口的性能,所有功能都是直接对数据库进行操作。后续会对接口慢慢优化。

项目特点及功能

  • 使用springboot+mybatis_plus+vue3+ts+websocket技术
  • 使用gateway做网关过滤,对发送的请求做过滤。(部分请求放行,比如登录请求,首页数据请求)
  • 支持本地图片存储,七牛云存储,腾讯云存储。
  • 使用ElasticSearch做内容搜索
  • 使用websocket做私信聊天和实时通知
  • 使用redis做对象缓存
  • 采用elementui完成页面搭建

项目目录

  • yanhuo-web 前段页面
  • yanhuo-auth 认证服务
  • yanhuo-common 公共模块,存放一些工具类或公用类
  • yanhuo-platform 烟火app主要功能模块
  • yanhuo-im 聊天模块
  • yanhuo-search 搜索模块
  • yanhuo-util 第三方服务模块,邮箱短信,oss对象存储服务
  • yanhuo-xo 对象存放模块

技术选型

后端技术

技术 版本
SpringBoot 2.3.2.RELEASE
openfeign -
MyBatis-Plus -
Elasticsearch 7.16.3
Redis 4.2.2
JWT 0.7.0
Lombok -
Nginx 1.12.2
Hutool -
websocket 2.3.2.RELEASE

前端技术

技术 版本
nodejs -
vue3 -
axios -
其他组件 -

视频演示

https://www.bilibili.com/video/BV1kN4y1n7gz/?spm_id_from=333.1007.top_right_bar_window_history.content.click

About

一个最真实的仿小红书web端的vue3项目,支持七牛云和本地图片上传,私信聊天,es内容搜索,点赞收藏,评论等其他功能。

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •