1. 技术栈选择
前端
- 框架:Vue.js
- 跨平台开发:UniApp
- UI组件库:Vant Weapp 或 uView UI
- 状态管理:Vuex
- 路由管理:Vue Router
- 构建工具:Webpack 或 Vite
后端
- 编程语言:Java
- 框架:Spring Boot
- 数据库:MySQL
- ORM框架:MyBatis 或 Hibernate
- 实时通信:WebSocket(使用Spring WebSocket或集成第三方服务如Socket.IO)
- 缓存:Redis(可选,用于提升性能)
- 安全框架:Spring Security
其他
- 版本控制:Git
- API 文档:Swagger
- 开发工具:IntelliJ IDEA(后端)、VS Code(前端)
- 持续集成/持续部署(CI/CD):Jenkins 或 GitHub Actions
- 云服务:阿里云或腾讯云(服务器、数据库托管等)
2. 系统架构
2.1 总体架构
采用前后端分离的架构模式,前端通过HTTP/HTTPS协议与后端进行通信。系统整体采用微服务或单体应用架构,根据项目复杂度和后续扩展性需求进行选择。对于预算有限的初期阶段,推荐使用单体应用架构,以简化开发和部署。
2.2 架构图
+-------------------+
| 前端 (UniApp) |
+---------+---------+
|
| HTTP/HTTPS
|
+---------v---------+
| 后端 (Java) |
| Spring Boot 应用 |
+---------+---------+
|
| JDBC
|
+---------v---------+
| 数据库 (MySQL) |
+-------------------+
3. 数据库设计
3.1 数据库选择
选择MySQL作为关系型数据库,因其成熟稳定,支持复杂查询,适合处理结构化数据。
3.2 数据库架构
主要包含以下几张核心表:
- 用户表(users)
-
id
(INT, PK, AUTO_INCREMENT)username
(VARCHAR, UNIQUE)password
(VARCHAR) // 存储加密后的密码email
(VARCHAR, UNIQUE)phone
(VARCHAR, UNIQUE)level
(ENUM: '初学者', '进阶玩家', '随便挥拍')preferences
(JSON) // 存储用户兴趣标签等偏好created_at
(DATETIME)updated_at
(DATETIME)
- 球友匹配表(matches)
-
id
(INT, PK, AUTO_INCREMENT)user_id
(INT, FK -> users.id)matched_user_id
(INT, FK -> users.id)match_type
(ENUM: '条件匹配', '随机匹配')status
(ENUM: '待确认', '已确认', '已取消')created_at
(DATETIME)updated_at
(DATETIME)
- 评分表(ratings)
-
id
(INT, PK, AUTO_INCREMENT)match_id
(INT, FK -> matches.id)rater_id
(INT, FK -> users.id)ratee_id
(INT, FK -> users.id)score
(INT) // 1-5分comment
(TEXT)created_at
(DATETIME)
- 优惠券表(coupons)
-
id
(INT, PK, AUTO_INCREMENT)user_id
(INT, FK -> users.id)code
(VARCHAR, UNIQUE)type
(ENUM: '首匹配优惠', '累计匹配优惠')discount
(DECIMAL) // 折扣金额is_used
(BOOLEAN)created_at
(DATETIME)expires_at
(DATETIME)
- 聊天消息表(messages)
-
id
(INT, PK, AUTO_INCREMENT)match_id
(INT, FK -> matches.id)sender_id
(INT, FK -> users.id)receiver_id
(INT, FK -> users.id)message
(TEXT)timestamp
(DATETIME)
- 积分表(points)
-
id
(INT, PK, AUTO_INCREMENT)user_id
(INT, FK -> users.id)points
(INT)source
(VARCHAR) // 积分来源描述created_at
(DATETIME)
3.3 数据库关系图
users (1) ----- (M) matches (M) ----- (1) users
users (1) ----- (M) ratings (M) ----- (1) users
matches (1) ----- (M) messages (M) ----- (1) users
users (1) ----- (M) coupons
users (1) ----- (M) points
4. 前后端模块划分
4.1 前端模块
- 用户认证模块
-
- 注册、登录、密码重置
- 用户信息管理
- 匹配模块
-
- 区域定位与匹配条件设置
- 匹配结果展示(动态卡片、盲盒等)
- 聊天模块
-
- 实时聊天界面
- 消息通知与历史记录
- 社交化元素模块
-
- 优惠券展示与领取
- 成就徽章展示
- 积分展示与兑换
- 用户互动模块
-
- 快速组队发布与响应
- 匹配日活动参与
- 管理模块(后台管理系统,可选)
-
- 用户管理
- 数据统计与分析
4.2 后端模块
- 用户管理
-
- 用户注册、登录、信息更新
- 用户认证与授权
- 匹配服务
-
- 基础匹配算法
- 智能匹配算法(基于兴趣标签、评分等)
- 聊天服务
-
- 消息发送与接收
- 聊天记录管理
- 评分与评价
-
- 用户打分接口
- 评分数据处理
- 优惠券与奖励
-
- 优惠券生成与分发
- 积分管理与兑换
- 活动管理
-
- 匹配日活动组织与管理
- 区域PK赛管理
- 通知与推送
-
- 消息推送服务(如匹配成功通知、优惠券到期提醒等)
- 统计与分析
-
- 用户行为数据收集
- 数据分析与报表生成
5. API 设计
5.1 API 总览
采用RESTful API风格,所有API均以/api/v1/
为前缀,使用JSON作为数据交换格式。
5.2 核心API 列表
5.2.1 用户认证与管理
- 注册
-
- URL:
/api/v1/auth/register
- Method:
POST
- Request Body:
- URL:
{
"username": "string",
"password": "string",
"email": "string",
"phone": "string",
"level": "初学者" | "进阶玩家" | "随便挥拍",
"preferences": ["喜欢双打", "热爱竞技"]
}
-
- Response:
{
"message": "注册成功",
"user_id": 1
}
- 登录
-
- URL:
/api/v1/auth/login
- Method:
POST
- Request Body:
- URL:
{
"username": "string",
"password": "string"
}
-
- Response:
{
"token": "JWT_TOKEN",
"user": {
"id": 1,
"username": "string",
"level": "初学者",
"preferences": ["喜欢双打", "热爱竞技"]
}
}
- 获取用户信息
-
- URL:
/api/v1/users/{id}
- Method:
GET
- Headers:
Authorization: Bearer JWT_TOKEN
- Response:
- URL:
{
"id": 1,
"username": "string",
"email": "string",
"phone": "string",
"level": "初学者",
"preferences": ["喜欢双打", "热爱竞技"],
"created_at": "2024-01-01T00:00:00Z",
"updated_at": "2024-01-02T00:00:00Z"
}
- 更新用户信息
-
- URL:
/api/v1/users/{id}
- Method:
PUT
- Headers:
Authorization: Bearer JWT_TOKEN
- Request Body:
- URL:
{
"email": "new_email@example.com",
"phone": "1234567890",
"level": "进阶玩家",
"preferences": ["喜欢单打", "喜欢户外"]
}
-
- Response:
{
"message": "用户信息更新成功"
}
5.2.2 匹配服务
- 获取匹配球友
-
- URL:
/api/v1/matches
- Method:
GET
- Headers:
Authorization: Bearer JWT_TOKEN
- Query Parameters:
- URL:
-
-
distance
(optional, default: 5) // 区域范围,单位公里level
(optional) // 打球水平筛选time_preference
(optional) // 时间段偏好random
(optional, boolean) // 是否随机匹配
-
-
- Response:
{
"matches": [
{
"matched_user": {
"id": 2,
"username": "player2",
"level": "进阶玩家",
"preferences": ["喜欢双打", "热爱竞技"],
"location": {
"latitude": 31.2304,
"longitude": 121.4737
}
},
"match_type": "条件匹配",
"matched_at": "2024-04-01T12:00:00Z"
},
// 更多匹配结果
]
}
- 创建匹配记录
-
- URL:
/api/v1/matches
- Method:
POST
- Headers:
Authorization: Bearer JWT_TOKEN
- Request Body:
- URL:
{
"matched_user_id": 2,
"match_type": "条件匹配"
}
-
- Response:
{
"message": "匹配成功",
"match_id": 1001
}
- 获取匹配详情
-
- URL:
/api/v1/matches/{match_id}
- Method:
GET
- Headers:
Authorization: Bearer JWT_TOKEN
- Response:
- URL:
{
"match": {
"id": 1001,
"user": { /* 用户信息 */ },
"matched_user": { /* 匹配球友信息 */ },
"match_type": "条件匹配",
"status": "已确认",
"created_at": "2024-04-01T12:00:00Z",
"updated_at": "2024-04-01T13:00:00Z"
}
}
5.2.3 聊天服务
- 发送消息
-
- URL:
/api/v1/messages
- Method:
POST
- Headers:
Authorization: Bearer JWT_TOKEN
- Request Body:
- URL:
{
"match_id": 1001,
"receiver_id": 2,
"message": "你好,约个时间打球吧!"
}
-
- Response:
{
"message": "消息发送成功",
"timestamp": "2024-04-01T12:05:00Z"
}
- 获取聊天记录
-
- URL:
/api/v1/messages/{match_id}
- Method:
GET
- Headers:
Authorization: Bearer JWT_TOKEN
- Response:
- URL:
{
"messages": [
{
"sender_id": 1,
"receiver_id": 2,
"message": "你好,约个时间打球吧!",
"timestamp": "2024-04-01T12:05:00Z"
},
{
"sender_id": 2,
"receiver_id": 1,
"message": "好的,周末如何?",
"timestamp": "2024-04-01T12:10:00Z"
}
// 更多消息
]
}
5.2.4 评分与评价
- 提交评分
-
- URL:
/api/v1/ratings
- Method:
POST
- Headers:
Authorization: Bearer JWT_TOKEN
- Request Body:
- URL:
{
"match_id": 1001,
"ratee_id": 2,
"score": 5,
"comment": "打球非常愉快,技术不错!"
}
-
- Response:
{
"message": "评分提交成功"
}
- 获取评分详情
-
- URL:
/api/v1/ratings/{match_id}
- Method:
GET
- Headers:
Authorization: Bearer JWT_TOKEN
- Response:
- URL:
{
"ratings": [
{
"rater_id": 1,
"ratee_id": 2,
"score": 5,
"comment": "打球非常愉快,技术不错!",
"created_at": "2024-04-01T13:00:00Z"
}
// 更多评分
]
}
5.2.5 优惠券与奖励
- 获取用户优惠券
-
- URL:
/api/v1/coupons
- Method:
GET
- Headers:
Authorization: Bearer JWT_TOKEN
- Response:
- URL:
{
"coupons": [
{
"id": 5001,
"code": "WELCOME2024",
"type": "首匹配优惠",
"discount": 20.00,
"is_used": false,
"expires_at": "2024-12-31T23:59:59Z"
}
// 更多优惠券
]
}
- 领取优惠券
-
- URL:
/api/v1/coupons/claim
- Method:
POST
- Headers:
Authorization: Bearer JWT_TOKEN
- Request Body:
- URL:
{
"coupon_id": 5001
}
-
- Response:
{
"message": "优惠券领取成功",
"coupon_code": "WELCOME2024"
}
5.2.6 积分管理
- 获取用户积分
-
- URL:
/api/v1/points
- Method:
GET
- Headers:
Authorization: Bearer JWT_TOKEN
- Response:
- URL:
{
"points": 150,
"history": [
{
"points": 50,
"source": "首次匹配",
"created_at": "2024-04-01T12:00:00Z"
},
{
"points": 100,
"source": "累计匹配10次",
"created_at": "2024-05-01T12:00:00Z"
}
// 更多积分记录
]
}
5.2.7 管理后台(可选)
- 获取所有用户
-
- URL:
/api/v1/admin/users
- Method:
GET
- Headers:
Authorization: Bearer ADMIN_JWT_TOKEN
- Response:
- URL:
{
"users": [
{
"id": 1,
"username": "player1",
"email": "player1@example.com",
"phone": "1234567890",
"level": "初学者",
"created_at": "2024-01-01T00:00:00Z"
}
// 更多用户
]
}
- 统计报表
-
- URL:
/api/v1/admin/statistics
- Method:
GET
- Headers:
Authorization: Bearer ADMIN_JWT_TOKEN
- Response:
- URL:
{
"total_users": 1000,
"total_matches": 5000,
"active_users": 800,
"average_rating": 4.5
// 更多统计数据
}
5.3 API 安全性
- 认证:使用**JWT(JSON Web Token)**进行用户认证和授权。所有受保护的API需在请求头中包含
Authorization: Bearer <token>
。 - 权限控制:基于用户角色(普通用户、管理员)进行权限控制,确保不同角色访问不同资源。
- 输入验证:对所有API的输入参数进行严格验证,防止SQL注入、XSS等攻击。
- 加密传输:所有通信通过HTTPS协议进行,确保数据传输的安全性。
- 密码存储:使用强哈希算法(如bcrypt)加密存储用户密码。
6. 前端设计与实现
6.1 页面结构
- 登录/注册页面
- 首页
-
- 匹配按钮
- 匹配历史
- 匹配页面
-
- 匹配条件设置
- 匹配结果展示(动态卡片/盲盒)
- 用户资料页面
-
- 查看和编辑个人信息
- 聊天页面
-
- 实时聊天界面
- 优惠券与奖励页面
- 积分与成就页面
- 活动页面
-
- 匹配日、区域PK赛等
- 管理后台(可选)
-
- 用户管理
- 数据统计
6.2 组件设计
- 导航栏组件
-
- 底部导航栏(首页、匹配、消息、个人中心)
- 匹配卡片组件
-
- 显示匹配球友信息
- 接受/拒绝按钮
- 聊天消息组件
-
- 展示聊天消息列表
- 输入消息框
- 优惠券卡片组件
-
- 显示优惠券信息
- 领取按钮
- 积分与成就组件
-
- 展示用户积分和徽章
6.3 状态管理
使用Vuex进行全局状态管理,主要管理以下状态:
- 用户状态:登录状态、用户信息
- 匹配状态:当前匹配信息、匹配历史
- 聊天状态:当前聊天对象、消息列表
- 优惠券状态:可用优惠券、已领取优惠券
- 积分状态:当前积分、积分历史
6.4 跨平台适配
采用UniApp进行跨平台开发,确保应用可以在微信小程序、H5端、以及移动端(iOS/Android)上顺利运行。利用响应式设计和条件渲染,适配不同设备和平台的特性。
7. 后端设计与实现
7.1 架构设计
后端采用Spring Boot框架,采用分层架构模式,包括Controller层、Service层、Repository层和Model层。
7.2 模块划分
- 认证模块
-
- 登录、注册、JWT生成与校验
- 用户管理模块
-
- 用户信息的增删改查
- 匹配模块
-
- 匹配算法实现
- 匹配记录管理
- 聊天模块
-
- 实时消息处理
- 消息存储与检索
- 评分模块
-
- 用户评分管理
- 优惠券与奖励模块
-
- 优惠券生成、发放与使用
- 积分管理
- 活动模块
-
- 匹配日、区域PK赛等活动管理
- 统计与分析模块
-
- 用户行为数据收集与分析
7.3 匹配算法设计
- 基础匹配条件
-
- 区域定位:根据用户的地理位置(经纬度),筛选3-5公里范围内的用户。
- 打球水平:根据用户选择的打球水平(初学者、进阶玩家、随便挥拍)进行匹配。
- 时间段偏好:根据用户的时间偏好进行匹配。
- 智能匹配增强
-
- 兴趣标签匹配:基于用户填写的兴趣标签,优先匹配兴趣相似的球友。
- 动态分数匹配:根据用户的评分记录,匹配评分较高且互评良好的球友。
7.4 实时聊天实现
采用WebSocket技术实现实时通信,具体步骤如下:
- 后端配置
-
- 使用Spring WebSocket配置消息代理(如STOMP)
- 定义消息发送和接收的端点
- 前端连接
-
- 使用SockJS和Stomp.js在前端建立WebSocket连接
- 订阅消息主题,接收实时消息
- 消息处理
-
- 后端接收消息后,存储到messages表中
- 通过WebSocket广播消息给对应的接收者
7.5 API 实现细节
7.5.1 用户认证与管理
- 注册
-
- 接收用户注册信息,进行数据校验
- 密码加密(使用bcrypt)
- 存储用户信息到数据库
- 返回注册成功信息
- 登录
-
- 验证用户凭证
- 生成JWT Token
- 返回用户信息及Token
- 获取与更新用户信息
-
- 通过Token验证用户身份
- 查询或更新用户信息
7.5.2 匹配服务
- 获取匹配球友
-
- 根据请求参数筛选符合条件的用户
- 结合兴趣标签和评分进行智能匹配
- 返回匹配结果
- 创建匹配记录
-
- 存储匹配关系到matches表
- 更新用户的匹配历史
7.5.3 聊天服务
- 发送消息
-
- 接收前端发送的消息
- 存储消息到messages表
- 通过WebSocket发送给接收者
- 获取聊天记录
-
- 查询messages表,根据match_id获取历史消息
7.5.4 评分与评价
- 提交评分
-
- 接收用户评分信息
- 存储到ratings表
- 更新被评分用户的整体评分
- 获取评分详情
-
- 查询ratings表,根据match_id获取评分详情
7.5.5 优惠券与奖励
- 获取用户优惠券
-
- 查询coupons表,获取用户可用优惠券
- 领取优惠券
-
- 更新coupons表,标记优惠券为已领取
- 生成优惠券码并返回给用户
7.5.6 积分管理
- 获取用户积分
-
- 查询points表,汇总用户当前积分及积分历史
- 积分记录
-
- 增加或减少用户积分,记录积分变动原因