MyfronyProject/README_API.md

前端调用文档

项目概述

这是一个基于Vue 3的博客前端项目，提供文章展示、分类浏览、留言板等功能。项目使用Vue 3 Composition API进行开发，集成了Vue Router进行路由管理，并使用Element Plus等UI库提供用户界面。

技术栈

• 前端框架: Vue 3
• 构建工具: Vite
• 路由管理: Vue Router 4
• UI组件库: Element Plus、Ant Design Vue
• HTTP客户端: Axios
• 编程语言: JavaScript/TypeScript

项目结构

src/
├── App.vue                # 应用根组件
├── assets/                # 静态资源
│   └── index.css          # 全局样式
├── img/                   # 图片资源
├── index.vue              # 首页主组件
├── main.js                # 应用入口文件
├── router/                # 路由配置
│   └── Router.js          # 路由定义
└── views/                 # 视图组件
    ├── aboutme.vue        # 关于页面
    ├── aericle.vue        # 文章分类目录页面
    ├── articlecontents.vue # 文章内容页面
    ├── home.vue           # 首页内容组件
    ├── leftmodlue.vue     # 左侧边栏组件
    ├── messageboard.vue   # 留言板页面
    └── nonsense.vue       # 疯言疯语页面

路由配置

路由配置位于 src/router/Router.js，定义了应用的所有路由映射关系：

路由路径	组件	功能描述
/	home.vue	默认路由，重定向到首页
/:type	home.vue	首页，可根据type参数筛选文章
/aericle	aericle.vue	文章分类目录页面
/nonsense	nonsense.vue	疯言疯语页面
/message	messageboard.vue	留言板页面
/about	aboutme.vue	关于页面
/articlecontents/:url	articlecontents.vue	文章内容详情页

主要组件说明

1. App.vue

应用根组件，负责渲染主页面组件。

<template>
  <Index/>
</template>
<script setup>
import Index from './index.vue';
</script>

2. index.vue

主页面组件，包含顶部导航栏、Hero区域和内容展示区。

主要功能：

• 响应式布局，适配不同屏幕宽度
• 导航菜单切换不同页面
• 打字机效果展示欢迎语

3. home.vue

首页文章列表组件，用于展示文章卡片列表。

主要功能：

• 展示文章标题、作者、发布时间等信息
• 点击文章卡片跳转到文章详情页
• 支持文章筛选功能

4. aericle.vue

文章分类目录组件，展示文章的分类结构。

主要功能：

• 展示不同分类下的文章数量
• 点击分类项可以跳转到对应的文章列表

5. articlecontents.vue

文章内容详情组件，用于展示单篇文章的完整内容。

主要功能：

• 获取URL参数并展示对应文章内容
• 支持通过参数向服务器请求相关文章

6. messageboard.vue

留言板组件，支持用户发表评论和回复。

主要功能：

• 展示留言列表和回复
• 支持发表新留言
• 支持回复他人留言

7. nonsense.vue

疯言疯语组件，展示一些非正式的简短内容。

后端API接口

项目后端基于Spring Boot开发，提供了以下主要API接口：

文章管理API

1. 获取文章列表

GET /api/articles

功能: 获取所有文章列表

返回: 包含文章列表的ResponseMessage对象

2. 获取单篇文章

GET /api/articles/{id}

功能: 根据ID获取单篇文章详情

参数: id - 文章ID

返回: 包含文章信息的ResponseMessage对象

3. 根据分类获取文章

GET /api/articles/category/{categoryId}

功能: 获取指定分类下的所有文章

参数: categoryId - 分类ID

返回: 包含文章列表的ResponseMessage对象

4. 获取热门文章

GET /api/articles/popular

功能: 获取浏览量最高的文章列表

返回: 包含热门文章列表的ResponseMessage对象

5. 创建文章 (需要认证)

POST /api/articles

功能: 创建新文章

权限: 需要AUTHOR角色

参数: ArticleDto对象 (JSON格式)

返回: 包含新创建文章信息的ResponseMessage对象

6. 更新文章 (需要认证)

PUT /api/articles/{id}

功能: 更新现有文章

权限: 需要AUTHOR或ADMIN角色

参数:

• id - 文章ID
• ArticleDto对象 (JSON格式)

返回: 包含更新后文章信息的ResponseMessage对象

7. 删除文章 (需要认证)

DELETE /api/articles/{id}

功能: 删除指定文章

权限: 需要AUTHOR或ADMIN角色

参数: id - 文章ID

返回: 包含被删除文章信息的ResponseMessage对象

留言管理API

1. 获取所有留言

GET /api/messages

功能: 获取所有留言列表

返回: 包含留言列表的ResponseMessage对象

2. 获取单条留言

GET /api/messages/{id}

功能: 根据ID获取单条留言详情

参数: id - 留言ID

返回: 包含留言信息的ResponseMessage对象

3. 保存留言

POST /api/messages

功能: 保存新留言

参数: MessageDto对象 (JSON格式)

返回: 包含保存后留言信息的ResponseMessage对象

4. 删除留言

DELETE /api/messages/{id}

功能: 删除指定留言

参数: id - 留言ID

返回: 包含删除结果的ResponseMessage对象

前端API调用说明

项目中使用Axios进行HTTP请求，推荐创建统一的API服务模块来封装所有后端API调用。以下是一个示例：

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.request.use(
  config => {
    // 可以在这里添加token等认证信息
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
api.interceptors.response.use(
  response => {
    return response.data;
  },
  error => {
    // 统一错误处理
    console.error('API请求错误:', error);
    return Promise.reject(error);
  }
);

// 文章相关API
export const articleAPI = {
  // 获取所有文章
  getAllArticles: () => api.get('/articles'),
  // 获取单篇文章
  getArticleById: (id) => api.get(`/articles/${id}`),
  // 根据分类获取文章
  getArticlesByCategory: (categoryId) => api.get(`/articles/category/${categoryId}`),
  // 获取热门文章
  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}`),
  // 保存留言
  saveMessage: (messageData) => api.post('/messages', messageData),
  // 删除留言
  deleteMessage: (id) => api.delete(`/messages/${id}`)
};

// 导出默认的api对象
export default api;

开发指南

安装依赖

npm install

启动开发服务器

npm run dev

开发服务器将在 http://localhost:3000 启动

构建生产版本

npm run build

构建后的文件将生成在 dist 目录中

预览生产版本

npm run preview

部署说明

1. 确保后端服务已部署并运行在正确的端口上
2. 修改前端API请求的基础URL指向实际的后端服务地址
3. 构建生产版本并部署到Web服务器
4. 配置Web服务器以支持单页应用路由 (SPA fallback)

注意事项

1. 项目使用了Element Plus和Ant Design Vue两个UI库，请注意组件的正确引入和使用方式
2. 后端服务默认端口为8080，前端开发服务器端口为3000
3. 确保CORS配置正确，允许前端域名访问后端API
4. 对于需要认证的API，需要在请求头中添加正确的认证信息

附录：数据模型

文章数据模型 (Article)

{
  articleid: Number,    // 文章ID
  title: String,        // 文章标题
  content: String,      // 文章内容
  author: String,       // 作者
  authorid: Number,     // 作者ID
  typeid: Number,       // 分类ID
  publishedAt: String,  // 发布时间
  viewCount: Number,    // 浏览次数
  status: Number,       // 状态 (1表示已发布)
  img: String           // 文章图片
}

留言数据模型 (Message)

{
  id: Number,           // 留言ID
  nickname: String,     // 昵称
  email: String,        // 邮箱
  content: String,      // 留言内容
  time: String,         // 留言时间
  replies: Array        // 回复列表
}