# 同行者-协力同行

**Repository Path**: zhytomatoafu/fellow-together-frontend

## Basic Information

- **Project Name**: 同行者-协力同行
- **Description**: 一款寻找志同道合的朋友的移动端网页，有组队，新建队伍，添加标签，匹配用户等功能。
- **Primary Language**: 其他
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 2
- **Created**: 2023-04-26
- **Last Updated**: 2024-04-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, TypeScript

## README



## 大家找到志同道合的朋友的移动端网站
##### 本站地址：域名备案下来补充
##### 前端地址：[同行者-协力同行 (gitee.com)](https://gitee.com/zhytomatoafu/fellow-together-frontend)
##### 后端地址：[同行者: 同行者后端 (gitee.com)](https://gitee.com/zhytomatoafu/fellow-together-backend)
## 快速启动
### 后端

1. 运行 sql 目录下的 create_table.sql 建表
2. 修改 application.yml 中的数据库地址为自己的
3. 安装 Maven 依赖
4. 修改 ServerConstant 文件的跨域IP信息
5. 七牛云ak，sk等修改为自己的



### 前端

**安装依赖：**
```
npm run install
```
**运行：**
```
npm run dev
```
**打包：**
```
npm run build
```



## 部署

**修改**

- 前端 plugins 配置文件
- 后端 ServerConstant，application-prod.yml 修改线上配置



## 界面展示

### 用户登录注册
[![p9KLxv6.png](https://s1.ax1x.com/2023/04/26/p9KLxv6.png)](https://imgse.com/i/p9KLxv6)
[![p9KLL59.png](https://s1.ax1x.com/2023/04/26/p9KLL59.png)](https://imgse.com/i/p9KLL59)
### 首页-匹配模式
[![p9KOF5d.png](https://s1.ax1x.com/2023/04/26/p9KOF5d.png)](https://imgse.com/i/p9KOF5d)
[![p9KLXCR.png](https://s1.ax1x.com/2023/04/26/p9KLXCR.png)](https://imgse.com/i/p9KLXCR)
[![p9KLj81.png](https://s1.ax1x.com/2023/04/26/p9KLj81.png)](https://imgse.com/i/p9KLj81)
### 队伍页
[![p9KOPVe.png](https://s1.ax1x.com/2023/04/26/p9KOPVe.png)](https://imgse.com/i/p9KOPVe)
[![p9KLvgx.png](https://s1.ax1x.com/2023/04/26/p9KLvgx.png)](https://imgse.com/i/p9KLvgx)

### 个人页
[![p9KX4mT.png](https://s1.ax1x.com/2023/04/26/p9KX4mT.png)](https://imgse.com/i/p9KX4mT)
[![p9KOAPA.png](https://s1.ax1x.com/2023/04/26/p9KOAPA.png)](https://imgse.com/i/p9KOAPA)
[![p9KOiUH.png](https://s1.ax1x.com/2023/04/26/p9KOiUH.png)](https://imgse.com/i/p9KOiUH)
[![p9KOpDO.png](https://s1.ax1x.com/2023/04/26/p9KOpDO.png)](https://imgse.com/i/p9KOpDO)

## 项目描述

- 一个帮助大家找到志同道合的伙伴的移动端网站，主要有用户登录注册、更新个人信息、按标签搜索用户、组队等功能。
## 技术选型
### 前端

1. Vue 3
2. Vant UI 组件库（移动端）
3. Vite 脚手架
4. TypeScript
5. Axios 请求库
### 后端

1. Java SpringBoot 2.7.x 框架
2. MySQL 数据库
3. MyBatis-Plus
4. MyBatis X 自动生成
5. Redis 缓存（Spring Data Redis 等多种实现方式）
6. Redisson 分布式锁
7. Swagger + Knife4j 接口文档
8. Gson：JSON 序列化库
## 项目亮点

1. 用户登录：使用 Redis 实现分布式 Session，解决集群间登录态同步问题；并使用 Hash 代替 String 来存储用户信息，节约了 5% 的内存并便于单字段的修改。
2. 对于项目中复杂的集合处理（比如为队伍列表关联已加入队伍的用户），使用 Java 8 Stream API 和 Lambda 表达式来简化编码。
3. 使用 Easy Excel 读取收集来的基础用户信息，并通过自定义线程池 + CompletableFuture 并发编程提高批量导入数据库的性能。实测导入 100 万行的时间从 20秒缩短至 7秒。（需要自己实际测试对比数据）
4. 使用 Redis 缓存首页高频访问的用户信息列表，将接口响应时长从 800ms缩短至 120ms 。且通过自定义 Redis 序列化器来解决数据乱码、空间浪费的问题。
5. 为解决首次访问系统的用户主页加载过慢的问题，使用 Spring Scheduler 定时任务来实现缓存预热，并通过分布式锁保证多机部署时定时任务不会重复执行。
6. 为解决同一用户重复加入队伍、入队人数超限的问题，使用 Redisson 分布式锁来实现操作互斥，保证了接口幂等性。
7. 使用 Knife4j + Swagger 自动生成后端接口文档，并通过编写 ApiOperation 等注解补充接口注释，避免了人工编写维护文档的麻烦。
8. 前端使用 Vant UI 组件库，并封装了全局通用的 Layout 组件，使主页、搜索页、组队页布局一致、并减少重复代码。
9. 基于 Vue Router 全局路由守卫实现了根据不同页面来动态切换导航栏标题， 并通过在全局路由配置文件扩展 title 字段来减少无意义的 if else 代码。