.4062073974432528:a5320a18df923051430fca9edf5ee418_69e86c3f1ffbb16c7ee08df5.69e86ce41ffbb16c7ee08df7.69e86ce3e09018824de91647:Trae CN.T(2026/4/22 14:38:28)

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>