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

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

src/views/messageboard.vue

@@ -13,7 +13,7 @@
                     <!-- 评论内容 -->
                     <div class="message-item-top">
                         <div class="message-nickname">{{ msg.nickname }}</div>
-                        <div class="message-time">{{ msg.time }}</div>
+                        <div class="message-time">{{ msg.createdAt }}</div>
                     </div>
                     <div class="message-content">{{ msg.content }}</div>
                     <!-- 回复按钮 -->
@@ -86,39 +86,21 @@
 </template>
 
 <script setup>
-import { reactive, ref } from 'vue'
+import { reactive, ref, onMounted } from 'vue'
+import { messageAPI } from '@/axios/api'
 const message_all = ref({})
 const hoverId = ref(null)
-const messages = ref([
-    {
-        id: 1,
-        nickname: 'A',
-        content: '这里是A！',
-        time: '2025-09-26 10:00',
-        replies: [
-            {
-                id: 4,
-                nickname: 'B',
-                content: 'A，我来回复你！',
-                time: '2025-09-26 10:20'
-            }
-        ]
-    },
-    {
-        id: 2,
-        nickname: 'B',
-        content: '这里是B！',
-        time: '2025-09-26 10:05',
-        replies: []
-    },
-    {
-        id: 3,
-        nickname: 'C',
-        content: '这里是C！',
-        time: '2025-09-26 10:10',
-        replies: []
-    }
-])
+const messages = ref([])
+// 从后端获取留言列表
+onMounted(() => {
+    messageAPI.getAllMessages().then(res => {
+        messages.value = res.data
+    }).catch(err => {
+        console.log(err)
+    }).finally(() => {
+        console.log("finally")
+    })
+})
 
 const form = reactive({
     replyid: null,