feat: 实现前后端数据交互功能

- 添加axios API服务模块，封装所有后端接口调用
- 修改各视图组件，移除模拟数据，改为从后端API获取真实数据
- 更新文章、留言板等页面，支持后端数据渲染
- 添加README_API.md文档，说明API调用方式
- 升级axios依赖版本至1.12.2

src/axios/api.js

@@ -0,0 +1,86 @@
+import axios from 'axios'
+
+// 创建axios实例
+const service = axios.create({
+  baseURL: 'http://localhost:8080/api', // api的base_url
+  timeout: 3000, // 请求超时时间
+  headers: {
+    'Content-Type': 'application/json'
+  }
+  // withCredentials: true, // 跨域请求时是否需要使用凭证
+})
+
+// 请求拦截器 - 添加认证token
+service.interceptors.request.use(
+  config => {
+    const token = localStorage.getItem('token')
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`
+    }
+    return config
+  },
+  error => {
+    return Promise.reject(error)
+  }
+)
+
+// 响应拦截器 - 统一处理响应
+service.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: () => service.get('/articles'),
+  // 获取单篇文章
+  getArticleById: (id) => service.get(`/articles/${id}`),
+  // 根据分类获取文章
+  getArticlesByCategory: (categoryId) => service.get(`/articles/category/${categoryId}`),
+  // 获取热门文章
+  getPopularArticles: () => service.get('/articles/popular'),
+  // 创建文章
+  createArticle: (articleData) => service.post('/articles', articleData),
+  // 更新文章
+  updateArticle: (id, articleData) => service.put(`/articles/${id}`, articleData),
+  // 删除文章
+  deleteArticle: (id) => service.delete(`/articles/${id}`)
+}
+
+// 留言相关API
+export const messageAPI = {
+  // 获取所有留言
+  getAllMessages: () => service.get('/messages'),
+  // 获取单条留言
+  getMessageById: (id) => service.get(`/messages/${id}`),
+  // 根据文章ID获取留言
+  getMessagesByArticleId: (articleId) => service.get(`/messages/article/${articleId}`),
+  // 获取根留言
+  getRootMessages: () => service.get('/messages/root'),
+  // 根据父留言ID获取回复
+  getRepliesByParentId: (parentId) => service.get(`/messages/parent/${parentId}`),
+  // 根据昵称搜索留言
+  searchMessagesByNickname: (nickname) => service.get(`/messages/search?nickname=${nickname}`),
+  // 获取文章评论数量
+  getMessageCountByArticleId: (articleId) => service.get(`/messages/count/${articleId}`),
+  // 创建留言
+  saveMessage: (messageData) => service.post('/messages', messageData),
+  // 删除留言
+  deleteMessage: (id) => service.delete(`/messages/${id}`)
+}
+
+export default service