前端使用vue 后端使用sprongboot并给出代码

前端代码：

<template>
  <div>
    <h1>{{ message }}</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'App',
  data () {
    return {
      message: 'Hello World!',
      users: []
    }
  },
  mounted () {
    axios.get('http://localhost:8080/api/users')
      .then(response => {
        this.users = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

后端代码：

@RestController
@RequestMapping("/api")
public class UserController {

  @Autowired
  private UserRepository userRepository;

  @GetMapping("/users")
  public List<User> getUsers() {
    return userRepository.findAll();
  }

}

其中，UserRepository 是 Spring Data JPA 提供的 Repository 接口，用于操作数据库。具体实现可以参考官方文档：https://docs.spring.io/spring-data/jpa/docs/current/reference/html/#repositories.core-concepts。