# MyAfterProject 开发文档(前端使用) ## 项目概述 MyAfterProject是一个基于Spring Boot的后端博客系统,提供文章管理、留言板、用户管理等功能的RESTful API接口。系统集成了Spring Security,提供安全的HTTP访问机制。本文档旨在帮助前端开发者理解和使用这些API接口,包括接口规范、请求/响应格式、数据模型及最佳实践。 ## 技术栈 - **后端框架**: Spring Boot 2.x - **ORM框架**: Spring Data JPA - **数据库**: MySQL - **安全框架**: Spring Security - **API风格**: RESTful API - **错误处理**: 全局异常处理机制 ## 项目结构 ``` src/main/java/com/qf/myafterprojecy/ ├── controller/ # 控制器层,处理HTTP请求 │ ├── ArticleController.java # 文章相关API │ ├── MessageController.java # 留言相关API │ ├── UserController.java # 用户相关API │ ├── CategoryController.java # 分类相关API │ ├── CategoryAttributeController.java # 分类属性相关API │ ├── MarkdownController.java # Markdown相关API │ └── HelpController.java # 帮助文档相关API ├── pojo/ # 实体类和数据传输对象 │ ├── Article.java # 文章实体 │ ├── Message.java # 留言实体 │ ├── Users.java # 用户实体 │ ├── Category.java # 分类实体 │ ├── Category_attribute.java # 分类属性实体 │ ├── Markdown.java # Markdown实体 │ └── dto/ # 数据传输对象 │ ├── ArticleDto.java # 文章DTO │ ├── MessageDto.java # 留言DTO │ ├── UserDto.java # 用户DTO │ ├── CategoryDto.java # 分类DTO │ ├── CategoryAttributeDto.java # 分类属性DTO │ └── MarkdownDto.java # Markdown DTO ├── repository/ # 数据访问层 │ ├── ArticleRepository.java # 文章数据访问 │ ├── MessageRepository.java # 留言数据访问 │ ├── UserRepository.java # 用户数据访问 │ ├── CategoryRepository.java # 分类数据访问 │ ├── CategoryAttributeRepository.java # 分类属性数据访问 │ └── MarkdownRepository.java # Markdown数据访问 ├── service/ # 业务逻辑层 │ ├── ArticleService.java # 文章服务实现 │ ├── IArticleService.java # 文章服务接口 │ ├── MessageService.java # 留言服务实现 │ ├── IMessageService.java # 留言服务接口 │ ├── UserService.java # 用户服务实现 │ └── IUserService.java # 用户服务接口 ├── config/ # 配置类 │ ├── SecurityConfig.java # Spring Security配置 │ └── ResponseMessage.java # 统一响应消息格式 ├── GlobalExceptionHandler.java # 全局异常处理器 └── MyAfterProjecyApplication.java # 应用入口 ``` ## 配置信息 - **服务地址**: `http://localhost:8080` - **API基础路径**: `/api` - **安全配置**: 当前配置允许所有请求通过,不需要认证 ## API接口详细说明 ### 统一响应格式 所有API接口都返回统一的响应格式 `ResponseMessage`: ```json { "code": 200, // HTTP状态码 "message": "成功", // 响应消息 "success": true, // 是否成功 "data": {} // 响应数据(具体类型根据接口而定) } ``` ### 1. 文章管理API #### 1.1 获取所有文章 ``` GET /api/articles ``` **功能**: 获取所有已发布的文章列表 **请求参数**: 无 **返回数据**: ```json { "code": 200, "message": "查询成功", "success": true, "data": [ { "articleid": 1, "title": "文章标题", "content": "文章内容...", "attributeid": 1, "img": "图片URL", "createdAt": "2023-01-01T10:00:00", "updatedAt": "2023-01-01T10:00:00", "viewCount": 100, "likes": 0, "status": 1, "markdownid": 0 }, // 更多文章... ] } ``` #### 1.2 获取单篇文章 ``` GET /api/articles/{id} ``` **功能**: 根据ID获取单篇文章详情(会自动增加浏览量) **请求参数**: - `id`: 文章ID(路径参数) **返回数据**: ```json { "code": 200, "message": "查询成功", "success": true, "data": { "articleid": 1, "title": "文章标题", "content": "文章内容...", "attributeid": 1, "img": "图片URL", "createdAt": "2023-01-01T10:00:00", "updatedAt": "2023-01-01T10:00:00", "viewCount": 101, "likes": 0, "status": 1, "markdownid": 0 } } ``` #### 1.3 根据属性获取文章 ``` GET /api/articles/attribute/{attributeId} ``` **功能**: 获取指定属性下的所有文章 **请求参数**: - `attributeId`: 属性ID(路径参数) **返回数据**: ```json { "code": 200, "message": "查询成功", "success": true, "data": [ // 文章列表(结构同获取所有文章) ] } ``` #### 1.4 增加文章浏览量 ``` POST /api/articles/view/{id} ``` **功能**: 增加指定文章的浏览量 **请求参数**: - `id`: 文章ID(路径参数) **返回数据**: ```json { "code": 200, "message": "更新成功", "success": true, "data": { // 更新后的文章信息 } } ``` #### 1.5 获取热门文章 ``` GET /api/articles/popular ``` **功能**: 获取浏览量最高的文章列表 **请求参数**: 无 **返回数据**: ```json { "code": 200, "message": "查询成功", "success": true, "data": [ // 热门文章列表(结构同获取所有文章) ] } ``` #### 1.6 创建文章 ``` POST /api/articles ``` **功能**: 创建新文章 **请求体**: ```json { "title": "新文章标题", "content": "新文章内容", "attributeid": 1, "img": "图片URL", "status": 1 // 0-草稿,1-已发布 } ``` **返回数据**: ```json { "code": 200, "message": "保存成功", "success": true, "data": { "articleid": 2, "title": "新文章标题", "content": "新文章内容", // 其他文章字段 } } ``` #### 1.7 更新文章 ``` PUT /api/articles/{id} ``` **功能**: 更新现有文章 **请求参数**: - `id`: 文章ID(路径参数) **请求体**: ```json { "title": "更新后的标题", "content": "更新后的内容", "attributeid": 1, "img": "更新后的图片URL", "status": 1 } ``` **返回数据**: ```json { "code": 200, "message": "更新成功", "success": true, "data": { // 更新后的文章信息 } } ``` #### 1.8 删除文章 ``` DELETE /api/articles/{id} ``` **功能**: 删除指定文章(实际为软删除,将状态标记为2) **请求参数**: - `id`: 文章ID(路径参数) **返回数据**: ```json { "code": 200, "message": "删除成功", "success": true, "data": null } ``` ### 2. 留言管理API #### 2.1 获取所有留言 ``` GET /api/messages ``` **功能**: 获取所有留言列表 **请求参数**: 无 **返回数据**: ```json { "code": 200, "message": "查询成功", "success": true, "data": [ { "messageid": 1, "nickname": "用户名", "email": "user@example.com", "content": "留言内容", "createdAt": "2023-01-01T10:00:00", "parentid": null, // 父留言ID,null表示主留言 "replyid": null, // 回复留言ID,null表示无回复 "articleid": null, // 关联的文章ID,null表示无关联 "likes": 0 // 点赞数 }, // 更多留言... ] } ``` #### 2.2 获取单条留言 ``` GET /api/messages/{id} ``` **功能**: 根据ID获取单条留言详情 **请求参数**: - `id`: 留言ID(路径参数) **返回数据**: ```json { "code": 200, "message": "查询成功", "success": true, "data": { // 留言详细信息(结构同上) } } ``` #### 2.3 根据文章ID获取留言 ``` GET /api/messages/article/{articleId} ``` **功能**: 获取指定文章下的所有留言 **请求参数**: - `articleId`: 文章ID(路径参数) **返回数据**: ```json { "code": 200, "message": "查询成功", "success": true, "data": [ // 留言列表 ] } ``` #### 2.4 获取根留言 ``` GET /api/messages/root ``` **功能**: 获取所有根留言(非回复的留言) **请求参数**: 无 **返回数据**: ```json { "code": 200, "message": "查询成功", "success": true, "data": [ // 根留言列表 ] } ``` #### 2.5 获取回复列表 ``` GET /api/messages/{parentId}/replies ``` **功能**: 根据父留言ID获取回复列表 **请求参数**: - `parentId`: 父留言ID(路径参数) **返回数据**: ```json { "code": 200, "message": "查询成功", "success": true, "data": [ // 回复列表 ] } ``` #### 2.6 搜索留言 ``` GET /api/messages/search?nickname={nickname} ``` **功能**: 根据昵称搜索留言 **请求参数**: - `nickname`: 昵称(查询参数) **返回数据**: ```json { "code": 200, "message": "查询成功", "success": true, "data": [ // 匹配的留言列表 ] } ``` #### 2.7 获取文章评论数量 ``` GET /api/messages/count/article/{articleId} ``` **功能**: 获取指定文章的评论数量 **请求参数**: - `articleId`: 文章ID(路径参数) **返回数据**: ```json { "code": 200, "message": "查询成功", "success": true, "data": 10 // 评论数量 } ``` #### 2.8 创建留言 ``` POST /api/messages ``` **功能**: 发布新留言 **请求体**: ```json { "nickname": "用户名", "email": "user@example.com", "content": "新留言内容", "parentid": null, // 可选,回复时设置为被回复留言的ID "articleid": null // 可选,关联文章时设置为文章ID } ``` **返回数据**: ```json { "code": 200, "message": "保存成功", "success": true, "data": { // 保存后的留言信息 } } ``` #### 2.9 点赞留言 ``` POST /api/messages/{id}/like ``` **功能**: 增加留言的点赞数 **请求参数**: - `id`: 留言ID(路径参数) **返回数据**: ```json { "code": 200, "message": "操作成功", "success": true, "data": { // 更新后的留言信息 } } ``` #### 2.10 删除留言 ``` DELETE /api/messages/{id} ``` **功能**: 删除指定留言及其所有回复 **请求参数**: - `id`: 留言ID(路径参数) **返回数据**: ```json { "code": 200, "message": "删除成功", "success": true, "data": null } ``` #### 2.11 删除所有留言 ``` DELETE /api/messages/all ``` **功能**: 删除所有留言 **请求参数**: 无 **返回数据**: ```json { "code": 200, "message": "删除成功", "success": true, "data": null } ``` ### 3. 用户管理API #### 3.1 获取所有用户 ``` GET /api/users ``` **功能**: 获取所有用户列表 **请求参数**: 无 **返回数据**: ```json { "code": 200, "message": "查询成功", "success": true, "data": [ // 用户列表 ] } ``` #### 3.2 根据ID获取用户 ``` GET /api/users/{id} ``` **功能**: 根据ID获取用户信息 **请求参数**: - `id`: 用户ID(路径参数) **返回数据**: ```json { "code": 200, "message": "查询成功", "success": true, "data": { // 用户信息 } } ``` #### 3.3 根据用户名获取用户 ``` GET /api/users/username/{username} ``` **功能**: 根据用户名获取用户信息 **请求参数**: - `username`: 用户名(路径参数) **返回数据**: ```json { "code": 200, "message": "查询成功", "success": true, "data": { // 用户信息 } } ``` #### 3.4 根据角色获取用户 ``` GET /api/users/role/{role} ``` **功能**: 根据角色获取用户列表 **请求参数**: - `role`: 角色ID(路径参数) **返回数据**: ```json { "code": 200, "message": "查询成功", "success": true, "data": [ // 用户列表 ] } ``` #### 3.5 创建用户 ``` POST /api/users ``` **功能**: 创建新用户 **请求体**: ```json { "username": "新用户名", "password": "密码", "email": "email@example.com", "phone": "13800138000", "role": 1 } ``` **返回数据**: ```json { "code": 200, "message": "保存成功", "success": true, "data": { // 创建的用户信息 } } ``` #### 3.6 更新用户 ``` PUT /api/users/{id} ``` **功能**: 更新用户信息 **请求参数**: - `id`: 用户ID(路径参数) **请求体**: ```json { "username": "更新后的用户名", "password": "新密码", "email": "newemail@example.com", "phone": "13900139000", "role": 2 } ``` **返回数据**: ```json { "code": 200, "message": "更新成功", "success": true, "data": { // 更新后的用户信息 } } ``` #### 3.7 删除用户 ``` DELETE /api/users/{id} ``` **功能**: 删除指定用户 **请求参数**: - `id`: 用户ID(路径参数) **返回数据**: ```json { "code": 200, "message": "删除成功", "success": true, "data": true } ``` #### 3.8 检查用户名是否存在 ``` GET /api/users/check/username/{username} ``` **功能**: 检查指定用户名是否已存在 **请求参数**: - `username`: 用户名(路径参数) **返回数据**: ```json { "code": 200, "message": "查询成功", "success": true, "data": true // true表示存在,false表示不存在 } ``` #### 3.9 检查邮箱是否存在 ``` GET /api/users/check/email/{email} ``` **功能**: 检查指定邮箱是否已存在 **请求参数**: - `email`: 邮箱(路径参数) **返回数据**: ```json { "code": 200, "message": "查询成功", "success": true, "data": true // true表示存在,false表示不存在 } ``` ### 4. 分类管理API #### 4.1 获取所有分类 ``` GET /api/categories ``` **功能**: 获取所有分类列表 **请求参数**: 无 **返回数据**: ```json { "code": 200, "message": "查询成功", "success": true, "data": [ // 分类列表 ] } ``` ### 5. 分类属性管理API #### 5.1 根据ID获取分类属性 ``` GET /api/category-attributes/{id} ``` **功能**: 根据ID获取分类属性详情 **请求参数**: - `id`: 属性ID(路径参数) **返回数据**: ```json { "code": 200, "message": "查询成功", "success": true, "data": { // 分类属性信息 } } ``` ### 6. Markdown管理API #### 6.1 根据ID获取Markdown内容 ``` GET /api/markdowns/{id} ``` **功能**: 根据ID获取Markdown内容 **请求参数**: - `id`: Markdown ID(路径参数) **返回数据**: ```json { "code": 200, "message": "查询成功", "success": true, "data": { // Markdown内容 } } ``` ### 7. 帮助文档API #### 7.1 获取API文档 ``` GET /api/help ``` **功能**: 获取README_API.md文档内容 **请求参数**: 无 **返回数据**: ```json { "code": 200, "message": "获取API文档成功", "success": true, "data": "# MyAfterProject 开发文档(前端使用)\n..." } ``` ## 数据模型详解 ### 1. 文章模型 (Article) | 字段名 | 类型 | 描述 | 是否可为空 | |-------|------|-----|-----------| | articleid | Integer | 文章ID(主键) | 否 | | title | String | 文章标题 | 否 | | content | String | 文章内容 | 否 | | attributeid | Integer | 属性ID | 否 | | img | String | 文章图片URL | 是 | | createdAt | LocalDateTime | 创建时间 | 是 | | updatedAt | LocalDateTime | 更新时间 | 是 | | viewCount | Integer | 浏览次数 | 是 | | likes | Integer | 点赞数 | 是 | | status | Integer | 状态(0-草稿,1-已发布,2-已删除) | 是 | | markdownid | Integer | markdown文档ID(0表示普通文章) | 是 | ### 2. 留言模型 (Message) | 字段名 | 类型 | 描述 | 是否可为空 | |-------|------|-----|-----------| | messageid | Integer | 留言ID(主键) | 否 | | nickname | String | 昵称 | 是 | | email | String | 邮箱 | 是 | | content | String | 留言内容 | 是 | | createdAt | Date | 创建时间 | 是 | | parentid | Integer | 父留言ID(用于回复功能) | 是 | | replyid | Integer | 回复留言ID | 是 | | articleid | Integer | 关联的文章ID | 是 | | likes | Integer | 点赞数 | 是 | ### 3. 用户模型 (Users) | 字段名 | 类型 | 描述 | 是否可为空 | |-------|------|-----|-----------| | id | Long | 用户ID(主键) | 否 | | username | String | 用户名 | 否 | | password | String | 密码 | 否 | | email | String | 邮箱 | 否 | | phone | String | 手机号 | 否 | | role | Integer | 角色ID | 否 | ## 前端调用示例 以下是使用Axios调用后端API的示例代码: ### 1. 安装Axios ```bash npm install axios ``` ### 2. 创建API服务文件 创建一个 `api.js` 文件来封装所有的API调用: ```javascript import axios from 'axios'; // 创建axios实例 const api = axios.create({ baseURL: 'http://localhost:8080/api', // 后端API基础URL timeout: 10000, // 请求超时时间 headers: { 'Content-Type': 'application/json' } }); // 响应拦截器 - 统一处理响应 api.interceptors.response.use( response => { // 检查响应是否成功 if (response.data && response.data.success) { return response.data; } else { // 处理业务错误 return Promise.reject(new Error(response.data?.message || '请求失败')); } }, error => { // 处理HTTP错误 console.error('API请求错误:', error); // 可以在这里添加全局错误处理,如显示错误提示 return Promise.reject(error); } ); // 文章相关API export const articleAPI = { // 获取所有文章 getAllArticles: () => api.get('/articles'), // 获取单篇文章 getArticleById: (id) => api.get(`/articles/${id}`), // 根据属性获取文章 getArticlesByAttribute: (attributeId) => api.get(`/articles/attribute/${attributeId}`), // 增加文章浏览量 incrementViewCount: (id) => api.post(`/articles/view/${id}`), // 获取热门文章 getPopularArticles: () => api.get('/articles/popular'), // 创建文章 createArticle: (articleData) => api.post('/articles', articleData), // 更新文章 updateArticle: (id, articleData) => api.put(`/articles/${id}`, articleData), // 删除文章 deleteArticle: (id) => api.delete(`/articles/${id}`) }; // 留言相关API export const messageAPI = { // 获取所有留言 getAllMessages: () => api.get('/messages'), // 获取单条留言 getMessageById: (id) => api.get(`/messages/${id}`), // 根据文章ID获取留言 getMessagesByArticleId: (articleId) => api.get(`/messages/article/${articleId}`), // 获取根留言 getRootMessages: () => api.get('/messages/root'), // 获取回复列表 getRepliesByParentId: (parentId) => api.get(`/messages/${parentId}/replies`), // 搜索留言 searchMessagesByNickname: (nickname) => api.get(`/messages/search?nickname=${nickname}`), // 获取文章评论数量 getMessageCountByArticleId: (articleId) => api.get(`/messages/count/article/${articleId}`), // 创建留言 saveMessage: (messageData) => api.post('/messages', messageData), // 点赞留言 likeMessage: (id) => api.post(`/messages/${id}/like`), // 删除留言 deleteMessage: (id) => api.delete(`/messages/${id}`), // 删除所有留言 deleteAllMessages: () => api.delete('/messages/all') }; // 用户相关API export const userAPI = { // 获取所有用户 getAllUsers: () => api.get('/users'), // 根据ID获取用户 getUserById: (id) => api.get(`/users/${id}`), // 根据用户名获取用户 getUserByUsername: (username) => api.get(`/users/username/${username}`), // 根据角色获取用户 getUsersByRole: (role) => api.get(`/users/role/${role}`), // 创建用户 createUser: (userData) => api.post('/users', userData), // 更新用户 updateUser: (id, userData) => api.put(`/users/${id}`, userData), // 删除用户 deleteUser: (id) => api.delete(`/users/${id}`), // 检查用户名是否存在 checkUsernameExists: (username) => api.get(`/users/check/username/${username}`), // 检查邮箱是否存在 checkEmailExists: (email) => api.get(`/users/check/email/${email}`) }; // 分类相关API export const categoryAPI = { // 获取所有分类 getAllCategories: () => api.get('/categories') }; // 分类属性相关API export const categoryAttributeAPI = { // 根据ID获取分类属性 getAttributeById: (id) => api.get(`/category-attributes/${id}`) }; // Markdown相关API export const markdownAPI = { // 根据ID获取Markdown内容 getMarkdownById: (id) => api.get(`/markdowns/${id}`) }; // 帮助文档API export const helpAPI = { // 获取API文档 getApiDocumentation: () => api.get('/help') }; export default api; ``` ### 3. 在组件中使用API ```javascript import { articleAPI, messageAPI, userAPI } from './api'; // 获取文章列表 async function fetchArticles() { try { const response = await articleAPI.getAllArticles(); // 处理获取到的文章数据 console.log('文章列表:', response.data); } catch (error) { console.error('获取文章列表失败:', error); } } // 发布留言 async function postMessage(messageData) { try { const response = await messageAPI.saveMessage(messageData); console.log('留言发布成功:', response.data); return response.data; } catch (error) { console.error('发布留言失败:', error); throw error; } } // 创建用户 async function registerUser(userData) { try { const response = await userAPI.createUser(userData); console.log('用户创建成功:', response.data); return response.data; } catch (error) { console.error('用户创建失败:', error); throw error; } } ``` ## 错误处理指南 ### 常见错误码及处理方式 | HTTP状态码 | 错误描述 | 可能原因 | 处理方式 | |-----------|---------|---------|---------| | 400 | Bad Request | 请求参数错误或缺失 | 检查请求参数是否正确 | | 404 | Not Found | 请求资源不存在 | 检查请求URL或资源ID是否正确 | | 500 | Internal Server Error | 服务器内部错误 | 查看服务器日志,联系后端开发人员 | ### 全局错误处理建议 1. 在前端实现全局响应拦截器,统一处理API返回的错误 2. 为不同类型的错误显示相应的提示信息 3. 添加请求超时处理和重试机制 ## 开发环境配置 ### 跨域配置 后端已配置CORS支持,允许前端应用访问API接口。 ## 性能优化建议 1. **请求防抖和节流**:在频繁触发的操作中使用防抖和节流,减少不必要的API调用 2. **数据缓存**:对于不经常变动的数据,可在前端进行缓存 3. **分页加载**:对于大量数据,使用分页加载而不是一次性获取全部数据 4. **图片懒加载**:对文章中的图片实现懒加载,提高页面加载速度 5. **错误重试**:对非关键API添加自动重试机制,提高用户体验 ## 附录:完整实体关系图 ``` +-------------+ +-------------+ | Article | | Message | +-------------+ +-------------+ | articleid |<--+ | messageid | | title | | | nickname | | content | | | email | | attributeid | | | content | | img | | | createdAt | | createdAt | | | parentid |-->| | updatedAt | | | articleid |-->+ | viewCount | | | likes | | likes | | +-------------+ | status | | | markdownid | | +-------------+ | | +-------------+ | | Users | | +-------------+ | | id | | | username | | | password | | | email | | | phone | | | role | | +-------------+ | | +---------------+ | | CategoryAttribute|<-+ +---------------+ | | id | | | attribute_name| | | category_id | | +---------------+ | | +-------------+ | | Category |---+ +-------------+ | id | | name | +-------------+ ```