From 917193f6c5482b19cdab7e46ffcebf0310b218f4 Mon Sep 17 00:00:00 2001
From: CGW406 <13565294+cgw406@user.noreply.gitee.com>
Date: Wed, 22 Apr 2026 14:48:32 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E9=A6=96=E9=A1=B5):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=88=B7=E6=96=B0=E5=8A=9F=E8=83=BD=E5=8F=8A?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在首页添加刷新按钮，支持从后端获取最新欢迎消息
添加加载状态防止重复请求
---
 frontend/src/views/Home.vue | 39 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 87816ed7e..9220f0014 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,18 +1,55 @@
 <template>
   <div class="home">
     <img alt="Vue with Spring logo" src="../assets/spring-boot-vuejs-logo.png">
-    <HelloSpringWorld hellomsg="Welcome to your Vue.js (+ TypeScript) powered Spring Boot App"/>
+    <HelloSpringWorld :hellomsg="hellomsg"/>
+    <div class="refresh-section">
+      <button class="btn btn-primary" @click="refreshData" :disabled="loading">
+        {{ loading ? '加载中...' : '刷新数据' }}
+      </button>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import HelloSpringWorld from '@/components/HelloSpringWorld.vue'; // @ is an alias to /src
+import api from '@/api/backend-api';
 
 export default defineComponent({
   name: 'Home',
   components: {
     HelloSpringWorld,
   },
+  data() {
+    return {
+      hellomsg: 'Welcome to your Vue.js (+ TypeScript) powered Spring Boot App',
+      loading: false
+    };
+  },
+  mounted() {
+    this.refreshData();
+  },
+  methods: {
+    async refreshData() {
+      if (this.loading) return;
+      
+      this.loading = true;
+      try {
+        const response = await api.hello();
+        this.hellomsg = response.data;
+      } catch (error) {
+        console.error('Failed to refresh data:', error);
+        this.hellomsg = '获取数据失败，请稍后重试';
+      } finally {
+        this.loading = false;
+      }
+    }
+  }
 });
 </script>
+
+<style scoped>
+.refresh-section {
+  margin-top: 20px;
+}
+</style>