本文档详细说明前端实现的 API 接口及其使用方法。
所有 API 接口调用统一通过 src/api/request.js 封装,具有以下特性:
- 自动添加 JWT Token 认证(
Authorization: Bearer ${token}) - 统一错误处理
- 开发环境下详细的请求/响应日志
- 自动处理 401 错误(清除 token 并跳转登录)
请求配置:
- baseURL:
/api(通过 Vite 代理转发到后端) - timeout: 10000ms
- 认证方式: Bearer Token
接口: POST /user/register
实现位置: src/api/user.js - register()
请求参数:
{
username: string, // 用户名
nickname: string, // 昵称
email: string, // 邮箱
phone: string, // 手机号
password: string, // 密码(会自动转换为 passwordHash)
gender: string, // 性别(会自动转换为 male/female/other)
birthday: string // 生日
}使用示例:
import { register } from "@/api/user";
await register({
username: "user123",
nickname: "张三",
email: "user@example.com",
phone: "13800138000",
password: "password123",
gender: "男",
birthday: "1990-01-01",
});接口: POST /user/login
实现位置: src/api/user.js - login()
请求参数:
{
loginName: string, // 登录名(邮箱或手机号)
password: string // 密码
}接口: GET /user/{userId}/info
实现位置: src/api/user.js - getUserInfo()
接口: PUT /user/{userId}/info
实现位置: src/api/user.js - updateUserInfo()
接口:
POST /user/follow/{userId}- 关注用户DELETE /user/unfollow/{userId}- 取消关注GET /user/follow/{userId}/check- 检查关注状态
实现位置: src/api/user.js - followUser(), unfollowUser(), checkFollowing()
接口:
POST /user/block/{userId}- 屏蔽用户DELETE /user/unblock/{userId}- 取消屏蔽GET /user/block/{userId}/check- 检查屏蔽状态
实现位置: src/api/user.js - blockUser(), unblockUser(), checkBlocking()
接口: GET /user/list
实现位置: src/api/user.js - getUserList()
请求参数:
{
offset: number, // 偏移量,默认 0
limit: number // 限制数量,默认 100
}接口: GET /user/with-questionnaire
实现位置: src/api/user.js - getUsersWithQuestionnaire()
请求参数:
{
offset: number, // 偏移量,默认 0
limit: number // 限制数量,默认 50
}接口: POST /posts
实现位置: src/api/posts.js - createPost()
调用位置: src/views/CreatePost.vue - publish()
请求参数:
{
userId: number,
title: string,
content: string,
images: string[], // 图片 URL 数组
tags: string[], // 标签数组
visibility: string
}接口: GET /posts
实现位置: src/api/posts.js - getPosts()
调用位置: src/views/DiscoverPage.vue - loadExplore()
请求参数:
{
page: number, // 页码
limit: number, // 每页数量
userId: number // 可选,按用户ID筛选
}接口: GET /posts/{postId}
实现位置: src/api/posts.js - getPost()
接口: DELETE /posts/{postId}
实现位置: src/api/posts.js - deletePost()
接口: GET /posts?userId={userId}
实现位置: src/api/posts.js - getUserPosts()
接口: POST /posts/{postId}/comments
实现位置: src/api/posts.js - postComment()
调用位置: src/views/PostDetail.vue - addComment()
请求参数:
{
postId: number,
userId: number,
content: string,
parentId: number | null // 可选,父评论ID
}接口: GET /posts/{postId}/comments
实现位置: src/api/posts.js - getComments()
接口: DELETE /posts/{postId}/comments/{commentId}
实现位置: src/api/posts.js - deleteComment()
接口:
POST /posts/{postId}/like- 点赞DELETE /posts/{postId}/like- 取消点赞
实现位置: src/api/posts.js - likePost(), unlikePost()
请求参数:
{
userId: number;
}接口: GET /conversations
实现位置: src/api/chat.js - getConversations()
接口: GET /conversations/{conversationId}
实现位置: src/api/chat.js - getConversation()
接口: POST /conversations
实现位置: src/api/chat.js - createConversation()
接口: GET /conversations/{conversationId}/messages
实现位置: src/api/chat.js - getMessages()
接口: POST /conversations/{conversationId}/messages
实现位置: src/api/chat.js - postMessage()
请求参数:
{
senderId: number,
receiverId: number,
content: string,
messageType: string // text, image, audio, video 等
}接口: PUT /conversations/{conversationId}/read
实现位置: src/api/chat.js - markRead()
接口: PUT /conversations/{conversationId}/pin
实现位置: src/api/chat.js - setPinStatus()
请求参数:
{
pinned: boolean;
}接口: PUT /conversations/{conversationId}/mute
实现位置: src/api/chat.js - setMuteStatus()
请求参数:
{
muted: boolean;
}接口: DELETE /conversations/{conversationId}/messages
实现位置: src/api/chat.js - clearChatMessages()
接口: GET /notifications
实现位置: src/api/chat.js - getNotifications()
请求参数:
{
page: number,
limit: number
}接口: GET /notifications/unread-count
实现位置: src/api/chat.js - getUnreadNotificationCount()
接口: PUT /notifications/{notificationId}/read
实现位置: src/api/chat.js - markNotificationRead()
接口: PUT /notifications/read-all
实现位置: src/api/chat.js - markAllNotificationsRead()
接口: DELETE /notifications/{notificationId}
实现位置: src/api/chat.js - deleteNotification()
接口: GET /user/{userId}/favorite-folders
实现位置: src/api/favorites.js - getFavoriteFolders()
接口: POST /user/{userId}/favorite-folders
实现位置: src/api/favorites.js - createFavoriteFolder()
请求参数:
{
name: string; // 收藏夹名称
}接口: PUT /favorite_folders/{folderId}
实现位置: src/api/favorites.js - updateFavoriteFolder()
接口: DELETE /favorite_folders/{folderId}
实现位置: src/api/favorites.js - deleteFavoriteFolder()
接口: POST /favorites
实现位置: src/api/favorites.js - addPostToFavorites()
请求参数:
{
user_id: number,
post_id: number,
folder_id: number
}接口: DELETE /favorites/{favoriteId}
实现位置: src/api/favorites.js - removePostFromFavorites()
接口: GET /user/{userId}/favorites
实现位置: src/api/favorites.js - getUserFavoritePosts()
请求参数:
{
folderId: number, // 可选,收藏夹ID
page: number,
limit: number
}接口: GET /user/{userId}/likes
实现位置: src/api/favorites.js - getUserLikedPosts()
接口: GET /match/recommendations
实现位置: src/api/match.js - getRecommendations()
请求参数:
{
page: number, // 页码,从 1 开始
size: number // 每页数量
}接口: POST /likes/send
实现位置: src/api/likes.js - sendLikeNotification()
请求参数:
{
targetUserId: number;
}接口: DELETE /likes/cancel
实现位置: src/api/likes.js - cancelLikeNotification()
接口: GET /likes/sent
实现位置: src/api/likes.js - getSentLikes()
接口: GET /likes/received
实现位置: src/api/likes.js - getReceivedLikes()
接口: GET /likes/status
实现位置: src/api/likes.js - checkLikeStatus()
请求参数:
{
targetUserId: number;
}接口: POST /questionnaire
实现位置: src/api/questionnaire.js - submitQuestionnaire()
请求参数:
{
userId: number,
interests: string[], // 兴趣爱好数组
socialEnergy: string, // 社交能量:extroverted, introverted, ambivert
decisionMaking: string, // 决策方式:rational, emotional, balanced
lifeRhythm: string, // 生活节奏:planned, spontaneous, flexible
communicationStyle: string, // 沟通风格:direct, tactful, humorous, listening, quiet
preferredSocialStyle: string, // 偏好社交风格
preferredLifestyle: string, // 偏好生活方式
preferredInterests: string, // 偏好兴趣类型
relationshipQualities: string[], // 关系品质数组
preferredRelationshipMode: string, // 偏好关系模式
communicationExpectation: string, // 沟通期望
ageRequirement: { // 年龄要求
unlimited: boolean,
minAge: number,
maxAge: number
},
distanceRequirement: string, // 距离要求
mustHaveQualities: string[], // 必须品质数组
priorityQualities: string[], // 优先品质数组
additionalRequirements: string // 额外要求(可选)
}接口: GET /questionnaire 或 GET /questionnaire/{userId}
实现位置: src/api/questionnaire.js - getQuestionnaire()
说明: 如果不提供 userId,则获取当前登录用户的问卷
接口: PUT /questionnaire
实现位置: src/api/questionnaire.js - updateQuestionnaire()
说明: 用于自动保存和部分更新,请求参数与提交问卷相同,但可以只包含部分字段
接口: DELETE /questionnaire
实现位置: src/api/questionnaire.js - deleteQuestionnaire()
接口: GET /questionnaire/{userId}/public
实现位置: src/api/questionnaire.js - getPublicQuestionnaire()
说明: 仅包含兴趣爱好等可公开信息
所有 API 接口统一使用以下错误处理机制:
- 200: 请求成功
- 400: 请求参数错误
- 401: 未授权(Token 无效或已过期)
- 403: 没有权限访问
- 404: 请求的资源不存在
- 500: 服务器内部错误
成功响应:
{
"code": 200,
"message": "操作成功",
"data": { ... }
}错误响应:
{
"code": 400,
"message": "错误信息"
}当收到 401 错误时,前端会自动:
- 清除 localStorage 中的 token 和 user
- 跳转到登录页面
- 显示友好的错误提示
-
Token 认证: 除登录和注册接口外,所有接口都需要在请求头中携带
Authorization: Bearer ${token} -
代理配置: 前端请求使用
/api前缀,通过 Vite 代理转发到后端。确保后端服务运行在http://localhost:8080 -
数据格式: 所有请求和响应都使用 JSON 格式
-
错误处理: 建议在调用 API 时使用 try-catch 处理错误
-
开发环境日志: 在开发环境下,所有请求和响应都会在控制台输出详细日志,便于调试