# ghost-partner_frontend
**Repository Path**: lzdghost/ghost-partner_frontend
## Basic Information
- **Project Name**: ghost-partner_frontend
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-30
- **Last Updated**: 2024-10-23
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 项目介绍
## 项目简介
FAST伴伴，是一个前后端分离的全栈项目，前端使用**Vite + Vue3 + Vant4**，后端使用**SpringBoot + Mybatis-Plus**，使用**WebSocket**实现实时通信，结合**阿里云OSS和短信服务**完成短信发送和图片上传。
### 前端地址
[https://gitee.com/lzdghost/ghost-partner_frontend.git](https://gitee.com/lzdghost/ghost-partner_frontend.git)
### 后端地址
[https://gitee.com/lzdghost/ghost-partner_backend.git](https://gitee.com/lzdghost/ghost-partner_backend.git)
## 在线体验
- 注册失败：如果使用的时测试签名，需要我绑定手机号才能使用注册使用。[https://dysms.console.aliyun.com/quickstart](https://dysms.console.aliyun.com/quickstart)
- 上线地址：[http://lighost.icu/](http://lighost.icu/)
- 账号可以自行使用手机号进行注册，一切聊天需遵守中华人民共和国有关法律规定。
- 仅支持中国大陆手机号，若没有符合要求的手机号或本网站短信功能无法使用，请使用以下账号直接登录：
- 账号：111111
- 密码：888888
## 项目背景
一些用户时常会感觉到孤独、无聊，希望找到志同道合的好友进行交流。除此之外，大部分用户常常在游戏开黑甚至是参加比赛、竞赛的时候面临没有队友的问题，这导致他们很难发挥自己的实力，也很难取得好成绩。同时，他们在寻找队友时也面临一些困难，比如无法找到合适的人选，或者无法与潜在的队友进行充分的交流和沟通。因此，我希望通过该网站，为这些用户提供一个交流平台，帮助他们找到理想的伙伴，找到适合自己的队伍。
## 核心功能
- 注册和登录：用户可以通过注册和登录来使用该网站。
- 标签匹配：用户可以给自己打上各种标签，然后根据标签匹配到适合自己的伙伴。
- 组队：用户可以和其他伙伴组建队伍，一起参加比赛。
- 实时聊天：用户之间可以进行实时聊天。
- 阿里云OSS和短信服务：用户可以使用短信服务进行注册，使用对象存储上传自己的头像。
## 项目亮点
- 用户登录：使用 Redis 实现分布式 Session，解决集群间登录态同步问题。
- 对于项目中复杂的集合处理（比如为队伍列表关联已加入队伍的用户），使用 Java 8 Stream API 和 Lambda 表达式来简化编码。
- 使用 Redis 缓存首页高频访问的用户信息列表。实测导入50万行数据，将接口响应时长从 12秒缩短至2s。且通过自定义 Redis 序列化器来解决数据乱码、空间浪费的问题。
- 为解决首次访问系统的用户主页加载过慢的问题，使用 Spring Scheduler定时任务来实现缓存预热，并通过分布式锁保证多机部署时定时任务不会重复执行。
- 为解决同一用户重复加入队伍、入队人数超限的问题，使用 Redisson 分布式锁来实现操作互斥，保证了接口幂等性。
- 使用编辑距离算法实现了根据标签匹配最相似用户的功能，并通过优先队列来减少 TOP N 运算过程中的内存占用。
- 使用 Knife4j + Swagger 自动生成后端接口文档，避免了人工编写维护文档的麻烦。
- 使用WebSocket在单个TCP连接上进行全双工通信，创建持久性的连接，实现用户实时聊天。
- 使用阿里云OSS实现图片上传，短信服务实现手机注册和用户密码修改。
- 前端使用 Vant UI 组件库，并封装了全局通用的 Layout 组件，使主页、搜索页、组队页布局一致、并减少重复代码。
- 基于 Vue Router 全局路由守卫实现了根据不同页面来动态切换导航栏标题， 并通过在全局路由配置文件扩展 title 字段来减少无意义的 if else 代码。
- 使用Vuex共享数据，解决用户申请好友，徽标提示问题。
- 对axios进行二次封装，并将使用到接口进行抽取，统一进行管理。
## 技术选型
### 前端
- Vue3
- Vite脚手架（快速初始化项目）
- Vuex（实现数据集中式状态管理）
- Vue Router（路由管理）
- Vant UI（组件库）
- Axios（前后端交互）
### 后端
- Java
- Spring（依赖注入框架，管理Java对象）
- Spring MVC（web框架，接口访问）
- Mybatis-Plus（Mybatis增强）
- Mybatis X
- Spring Boot（快速启动/快速集成项目）
- Spring Scheduler定时任务
- Mysql（数据库）
- Redis（缓存）
- Redisson 分布式锁
- Gson JSON序列化库
- 最短编辑距离算法
- WebSocket
- Junit（单元测试）
- Swagger（测试）
## 架构
### 系统架构
### 数据库架构
## 功能介绍和时序图
### 注册
- 没有账号的用户可以在登录页点击“注册”跳转到注册页。
- 填写手机号后，点击获取验证码后显示验证码输入框，并进入60秒倒计时，在此期间不可再次发送验证码。
- 很短事件后，将会有短信发送至手机号，短信中会显示注册的验证码，只有输入正确的验证码才能注册成功。
- 再输入账号、密码、确认密码来完成注册。
- 注册成功之后，系统自动跳转到登录页面。
### 登录
- 用户未登录时自动跳转到登录页。
- 拥有账号的用户输入账号和密码。
- 登录跳转到首页
### 退出
- 点击“我”进入个人信息页。
- 退出：点击退出按钮退出，页面跳转到登录页面。
### 忘记密码
- 忘记密码：用户可以点击登录页中“忘记密码”进入。
- 输入注册时使用的手机号，获取验证码进行校验。
- 验证通过后，输入新密码和校验密码后即可修改新密码。
### 个人主页
- 登陆后可以进入个人主页，用户可点击修改信息修改用户信息。
- 创建的队伍：显示用户创建的队伍。
- 加入的队伍：显示用户加入的队伍。
- 联系客服：用户遇到问题可联系客服。
### 修改用户信息
- 头像修改：用户点击后可上传自己的用户头像。
- 昵称修改：用户可以修改展示的昵称。
- 个性签名：用户可以简略地描述自己。
- 性别修改：用户可以修改性别。
- 电话修改：用户可以修改手机号。
- 邮箱修改：用户可以修改邮箱后。
- 密码修改：用户可以修改账号密码。
- 标签修改：用户可以更新自己的标签。
### 修改密码
- 修改密码：用户在知道旧密码的情况的下才可以修改密码。
- 用户输入旧密码、新密码、校验密码。
- 如果全部校验通过，则密码修改成功。
### 个人标签
- 个人标签：用户点击进入标签页，标签页显示用户已经添加的标签。
- 用户可以根据给出的级联查询表选择适合自己的标签。
- 如果给出的标签不能满足用户，用户可以自定义标签添加。
- 增删改查标签：可以增删改查个人标签。
### 标签搜索用户
- 标签搜索：用户可以点击右上角的搜索按钮，通过标签搜索用户。
- 对于重点用户，使用 Spring Scheduler定时任务来实现缓存预热，并通过分布式锁保证多机部署时定时任务不会重复执行，这样保证重点用户根据标签搜索用户的时候，不会有过长的等待。
### 主页
- 用户推荐：用户在第一次点击主页的时候，会随机查询一些伙伴推荐给用户。
- 用户匹配：用户登录后若用户填写了标签，则将根据标签的相似度进行匹配。
- 用户详情：用户点击任意用户列表的其他用户后可跳转至用户详情页。
### 好友
- 好友申请：当用户进入用户详情页的时候，如果该伙伴不是好友，用户可以点击“添加好友”向对方申请好友。
- 申请列表：那么好友tab栏和列表的右上角的徽标会提示申请好友人数，用户可以接受和拒绝好友申请。
- 好友列表：通过申请的好友会显示在好友列表中。
### 聊天
- 私聊：用户和用户之间可以私有聊天。
### 队伍
- 创建队伍：点击队伍页左下角的加号可以跳转至创建队伍页面。
- 队伍列表：队伍列表会显示公开的队伍和加密的队伍。
- 加入队伍：公开状态所有人可加入，加密状态其他用户输入正确的密码则可以加入。
- 退出队伍：用户可以选择退出队伍，如果要退出的用户是队伍的创建者，那么队伍会直接解散。
- 更新队伍：只有队伍创建者才可以更新队伍。
- 解散队伍：只有队伍创建者才可以解散队伍。