feat: 重构前端项目结构并添加新功能

重构项目目录结构，将组件和服务模块化
添加Element Plus UI库并集成到项目中
实现文章、留言和分类的类型定义
新增工具函数模块包括日期格式化和字符串处理
重写路由配置并添加全局路由守卫
优化页面布局和响应式设计
新增服务层封装API请求
完善文章详情页和相关文章推荐功能

src/services/apiService.js

@@ -0,0 +1,46 @@
+// 基础 API 服务配置
+import axios from 'axios'
+
+// 创建 axios 实例
+const apiService = axios.create({
+  baseURL: 'http://localhost:8080/api', // api的base_url
+  timeout: 10000, // 请求超时时间
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
+
+// 请求拦截器 - 添加认证token
+apiService.interceptors.request.use(
+  config => {
+    const token = localStorage.getItem('token')
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`
+    }
+    return config
+  },
+  error => {
+    return Promise.reject(error)
+  }
+)
+
+// 响应拦截器 - 统一处理响应
+apiService.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)
+  }
+)
+
+export default apiService

src/services/articleService.js

@@ -0,0 +1,75 @@
+// 文章相关API服务
+import apiService from './apiService'
+
+/**
+ * 文章服务类
+ */
+class ArticleService {
+  /**
+   * 获取所有文章
+   * @param {Object} params - 查询参数
+   * @returns {Promise}
+   */
+  getAllArticles(params = {}) {
+    return apiService.get('/articles', { params })
+  }
+
+  /**
+   * 获取单篇文章
+   * @param {number} id - 文章ID
+   * @returns {Promise}
+   */
+  getArticleById(id) {
+    return apiService.get(`/articles/${id}`)
+  }
+
+
+
+  /**
+   * 获取热门文章
+   * @returns {Promise}
+   */
+  getPopularArticles() {
+    return apiService.get('/articles/popular')
+  }
+
+  /**
+   * 创建文章
+   * @param {Object} articleData - 文章数据
+   * @returns {Promise}
+   */
+  createArticle(articleData) {
+    return apiService.post('/articles', articleData)
+  }
+
+  /**
+   * 更新文章
+   * @param {number} id - 文章ID
+   * @param {Object} articleData - 文章数据
+   * @returns {Promise}
+   */
+  updateArticle(id, articleData) {
+    return apiService.put(`/articles/${id}`, articleData)
+  }
+
+  /**
+   * 删除文章
+   * @param {number} id - 文章ID
+   * @returns {Promise}
+   */
+  deleteArticle(id) {
+    return apiService.delete(`/articles/${id}`)
+  }
+  
+  /**
+   * 增加文章浏览量
+   * @param {number} id - 文章ID
+   * @returns {Promise}
+   */
+  incrementArticleViews(id) {
+    return apiService.post(`/articles/${id}/views`)
+  }
+}
+
+// 导出文章服务实例
+export default new ArticleService()

src/services/index.js

@@ -0,0 +1,8 @@
+// 导出所有服务
+import articleService from './articleService'
+import messageService from './messageService'
+
+export {
+  articleService,
+  messageService
+}

src/services/messageService.js

@@ -0,0 +1,89 @@
+// 留言相关API服务
+import apiService from './apiService'
+
+/**
+ * 留言服务类
+ */
+class MessageService {
+  /**
+   * 获取所有留言
+   * @returns {Promise}
+   */
+  getAllMessages() {
+    return apiService.get('/messages')
+  }
+
+  /**
+   * 获取单条留言
+   * @param {number} id - 留言ID
+   * @returns {Promise}
+   */
+  getMessageById(id) {
+    return apiService.get(`/messages/${id}`)
+  }
+
+  /**
+   * 根据文章ID获取留言
+   * @param {number} articleId - 文章ID
+   * @returns {Promise}
+   */
+  getMessagesByArticleId(articleId) {
+    return apiService.get(`/messages/article/${articleId}`)
+  }
+
+  /**
+   * 获取根留言
+   * @returns {Promise}
+   */
+  getRootMessages() {
+    return apiService.get('/messages/root')
+  }
+
+  /**
+   * 根据父留言ID获取回复
+   * @param {number} parentId - 父留言ID
+   * @returns {Promise}
+   */
+  getRepliesByParentId(parentId) {
+    return apiService.get(`/messages/parent/${parentId}`)
+  }
+
+  /**
+   * 根据昵称搜索留言
+   * @param {string} nickname - 昵称
+   * @returns {Promise}
+   */
+  searchMessagesByNickname(nickname) {
+    return apiService.get(`/messages/search?nickname=${nickname}`)
+  }
+
+  /**
+   * 获取文章评论数量
+   * @param {number} articleId - 文章ID
+   * @returns {Promise}
+   */
+  getMessageCountByArticleId(articleId) {
+    return apiService.get(`/messages/count/${articleId}`)
+  }
+
+  /**
+   * 创建留言
+   * @param {Object} messageData - 留言数据
+   * @returns {Promise}
+   */
+  saveMessage(messageData) {
+    return apiService.post('/messages', messageData)
+  }
+
+  /**
+   * 删除留言
+   * @param {number} id - 留言ID
+   * @returns {Promise}
+   */
+  deleteMessage(id) {
+    return apiService.delete(`/messages/${id}`)
+  }
+}
+
+// 导出留言服务实例
+export default new MessageService()