Spring Boot + Vue：构建现代Web应用的黄金组合

// 定义一个简单的Vue组件，显示用户信息
<template>
  <div>
    <h1>{{ user.name }}</h1>
    <p>{{ user.email }}</p>
  </div>
</template>
 
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { User } from '@/model/User';
 
@Component
export default class UserProfile extends Vue {
  user: User = new User('', '');
 
  // 生命周期钩子，在组件创建后执行
  created() {
    this.fetchUserData();
  }
 
  // 从后端获取用户数据的方法
  async fetchUserData() {
    try {
      const response = await this.$http.get('/api/user/profile');
      this.user = response.data;
    } catch (error) {
      console.error('An error occurred while fetching user data:', error);
    }
  }
}
</script>

这个简单的Vue组件演示了如何在Spring Boot后端提供的REST API上获取用户信息。它使用了Vue的生命周期钩子created来在组件创建时获取数据，并展示在模板中。这个例子简单直观地展示了如何将Spring Boot后端与Vue前端集成，是构建现代Web应用的一个很好的起点。