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

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

src/views/aericle.vue

@@ -5,11 +5,11 @@
     </div>
     <div class="post_content">
       <div v-for="(items, index) in datas" style=" padding: 20px;">
-        <h2>{{ items[index].title }}</h2>
+        <h2>{{ items[index] }}</h2>
         <span class="badge badge-primary">共{{ contentsum(items) }}篇</span>
         <ul class="pcont_ul">
           <li class="pcont_li" v-for="item in items">
-            <a class="btn" @click="btnonclick(item.contentid)"><kbd>{{ item.content }}</kbd></a> — —({{ item.sum }})
+            <a class="btn" @click="btnonclick(item.typeid)"><kbd>{{ item.content }}</kbd></a> — —({{ item.sum }})
           </li>
         </ul>
       </div>
@@ -18,12 +18,26 @@
 </template>
 <script setup>
 import { useRouter } from 'vue-router'
+import { articleAPI } from '@/axios/api'
+import { ref, onMounted } from 'vue'
 const router = useRouter()
-const btnonclick = (contentid) => {
+const datas = ref([])
+console.log("获取文章列表")
+onMounted(() => {
+  articleAPI.getAllArticles().then(res => {
+    datas.value = res.data
+  }).catch(err => {
+    console.log(err)
+  }).finally(() => {
+    console.log("finally")
+  })
+})
+
+const btnonclick = (typeid) => {
   router.push({
     path: '/:type',
     query: {
-      type: contentid
+      type: typeid
     }
   })
 }
@@ -34,59 +48,6 @@ const contentsum = (items) => {
   }
   return nums
 }
-const datas = [
-  // 学习模块
-  [
-    {
-      title: '学习',
-      contentid: '1',
-      content: '算法',
-      sum: 1,
-
-    },
-    {
-      title: '学习',
-      contentid: '2',
-      content: '前端',
-      sum: 1,
-    },
-    {
-      title: '学习',
-      contentid: '3',
-      content: '后端',
-      sum: 1,
-    },
-    {
-      title: '学习',
-      contentid: '4',
-      content: 'Java',
-      sum: 1,
-    },
-  ],
-  // 生活模块
-  [
-    {
-      title: '生活',
-      contentid: '1',
-      content: '生活',
-      sum: 1,
-
-    },
-    {
-      title: '生活',
-      contentid: '2',
-      content: '书',
-      sum: 1,
-    },
-    {
-      title: '生活',
-      contentid: '2',
-      content: '书',
-      sum: 1,
-    }
-  ]
-
-]
 </script>
 <style>
 .header {