binyou_web
介绍
聚友园前端。使用了vite,vue3,typescript,pinia,websocket,vant等技术。该项目实现了用户登录,用户注册,创建队伍,加入队伍,更新队伍,删除队伍,加好友,验证好友,好友聊天,伙伴查找匹配,伙伴推荐等功能。
界面展示
用户登录/注册
好友列表/好友申请
好友聊天
伙伴推荐
根据标签搜索用户
队伍页
个人中心页/查看用户
项目描述
- 一个帮助大家找到志同道合的伙伴的h5网站,主要有用户登录注册、更新个人信息、按标签搜索用户、关键词搜索用户、组队、加入队伍,更新队伍、退出队伍、好友聊天、好友申请等功能。
技术选型
前端
-
Vue 3
-
Vant UI 组件库(移动端)
-
Vite 脚手架
-
TypeScript
-
Axios 请求库
-
Pinia状态管理库
后端
- Java SpringBoot 2.7.x 框架
- MySQL 数据库
- minio
- MyBatis-Plus
- MyBatis X 自动生成
- Redis 缓存(Spring Data Redis 等多种实现方式)
- Redisson 分布式锁
- Swagger + Knife4j 接口文档
- Gson:JSON 序列化库
前后端交互
项目亮点
- 使用WebSocket实现好友聊天功能,实时进行交流
- 用户登录:使用 Redis 实现分布式 Session,解决集群间登录态同步问题;并使用 Hash 代替 String 来存储用户信息,节约了 5%
的内存并便于单字段的修改。
- 使用minio实现头像的上传,并在服务器上进行备份
- 使用 Easy Excel 读取收集来的基础用户信息,并通过自定义线程池 + CompletableFuture 并发编程提高批量导入数据库的性能。实测导入
- 使用 Redis 缓存首页高频访问的用户信息列表,将接口响应时长从 800ms缩短至 120ms 。且通过自定义 Redis 序列化器来解决数据乱码、空间浪费的问题。
100 万行的时间从 20秒缩短至 7秒。(需要自己实际测试对比数据)
- 对于项目中复杂的集合处理(比如为队伍列表关联已加入队伍的用户),使用 Java 8 Stream API 和 Lambda 表达式来简化编码。
- 为解决首次访问系统的用户主页加载过慢的问题,使用 Spring Scheduler 定时任务来实现缓存预热,并通过分布式锁保证多机部署时定时任务不会重复执行。
- 为解决同一用户重复加入队伍、入队人数超限的问题,使用 Redisson 分布式锁来实现操作互斥,保证了接口幂等性。
- 使用 Knife4j + Swagger 自动生成后端接口文档
- 前端使用 Vant UI 组件库,并封装了全局通用的 Layout 组件,使主页、搜索页、组队页布局一致、并减少重复代码。
快速启动
后端
- 运行 sql 目录下的 create_table.sql 建表
- 修改 application.yml 中的数据库地址为自己的
- 安装完 Maven 依赖后,直接运行即可
前端
安装依赖:
运行:
打包: