SpringBoot3 + Vue3 学习 Day 3

在Spring Boot 3和Vue 3的环境中，我们可以创建一个简单的用户列表查询功能。以下是一个简化的例子，展示了如何在Spring Boot后端和Vue前端之间建立用户列表的查询功能。

Spring Boot 3 (Controller):

package com.example.demo.controller;
 
import com.example.demo.entity.User;
import com.example.demo.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
 
@RestController
@RequestMapping("/api/users")
public class UserController {
 
    private final UserService userService;
 
    @Autowired
    public UserController(UserService userService) {
        this.userService = userService;
    }
 
    @GetMapping
    public List<User> getAllUsers() {
        return userService.findAllUsers();
    }
}

Vue 3 (在组件中使用):

<template>
  <div>
    <h1>用户列表</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>
 
<script>
import { ref } from 'vue';
import axios from 'axios';
 
export default {
  setup() {
    const users = ref([]);
 
    const fetchUsers = async () => {
      try {
        const response = await axios.get('/api/users');
        users.value = response.data;
      } catch (error) {
        console.error('An error occurred while fetching users:', error);
      }
    };
 
    fetchUsers();
 
    return { users };
  }
};
</script>

在这个例子中，我们创建了一个简单的用户列表查询功能。Spring Boot后端提供了一个REST API来获取所有用户数据，而Vue前端通过axios在组件被加载时获取这些数据并展示在页面上。这个例子展示了前后端如何通过HTTP交互来获取和展示数据。