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

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

src/views/home.vue

@@ -5,7 +5,7 @@
       class="article-card"
       v-for="item in datas"
       :key="item.title + item.publishedAt"
-      @click="aericleClick(item.aur)"
+      @click="aericleClick(item.articleid)"
     >
       <h2>{{ item.title }}</h2>
       <el-text class="mx-1">{{ item.author }}</el-text>
@@ -18,8 +18,21 @@
 
 <script setup>
 import { useRouter } from 'vue-router'
+import { articleAPI } from '@/axios/api'
+import { ref, onMounted } from 'vue'
 const router = useRouter()
-
+const datas = ref([])
+console.log("获取文章列表")
+onMounted(() => {
+  articleAPI.getAllArticles().then(res => {
+    datas.value = res.data
+    console.log(res.data)
+  }).catch(err => {
+    console.log(err)
+  }).finally(() => {
+    console.log("finally")
+  })
+})
 // 跳转到文章详情
 const aericleClick = (aur) => {
   router.push({
@@ -27,104 +40,6 @@ const aericleClick = (aur) => {
     query: { url: aur }
   })
 }
-
-// 文章数据
-const datas = [
-  {
-    title: '测试1',
-    author: '这是文章模块测试',
-    aur: '链接',
-    mg: '11',
-    publishedAt: '2016-04-10'
-  },
-  {
-    title: '测试2',
-    author: '这是img模块测试',
-    aur: '链接',
-    mg: '',
-    mg_b: '',
-    publishedAt: '2016-04-12'
-  },
-  {
-    title: '测试2',
-    author: '这是img模块测试',
-    aur: '链接',
-    mg: '',
-    publishedAt: '2016-04-12'
-  },
-  {
-    title: '测试2',
-    author: '这是img模块测试',
-    aur: '链接',
-    mg: '',
-    mg_b: '',
-    publishedAt: '2016-04-12'
-  },
-  {
-    title: '测试2',
-    author: '这是img模块测试',
-    aur: '链接',
-    mg: '',
-    mg_b: '',
-    publishedAt: '2016-04-12'
-  },
-  {
-    title: '测试2',
-    author: '这是img模块测试',
-    aur: '链接',
-    mg: '',
-    mg_b: '',
-    publishedAt: '2016-04-12'
-  },
-  {
-    title: '测试2',
-    author: '这是img模块测试',
-    aur: '链接',
-    mg: '',
-    mg_b: '',
-    publishedAt: '2016-04-12'
-  },
-  {
-    title: '测试2',
-    author: '这是img模块测试',
-    aur: '链接',
-    mg: '',
-    mg_b: '',
-    publishedAt: '2016-04-12'
-  },
-  {
-    title: '测试2',
-    author: '这是img模块测试',
-    aur: '链接',
-    mg: '',
-    mg_b: '',
-    publishedAt: '2016-04-12'
-  },
-  {
-    title: '测试2',
-    author: '这是img模块测试',
-    aur: '链接',
-    mg: '',
-    mg_b: '',
-    publishedAt: '2016-04-12'
-  },
-  {
-    title: '测试2',
-    author: '这是img模块测试',
-    aur: '链接',
-    mg: '',
-    mg_b: '',
-    publishedAt: '2016-04-12'
-  },
-  {
-    title: '测试2',
-    author: '这是img模块测试',
-    aur: '链接',
-    mg: '',
-    mg_b: '',
-    publishedAt: '2016-04-12'
-  },
-]
 </script>
 
 <style scoped>