springboot vue 查询数据库

要在Spring Boot和Vue中查询数据库，可以使用Spring Data JPA来访问数据库并将数据返回给Vue前端。以下是一个简单的示例：

1. 在Spring Boot中创建一个JPA实体类，例如User.java，用于映射数据库表。

2. 创建一个Spring Data JPA Repository接口，例如UserRepository.java，用于定义查询方法。

3. 在Spring Boot中创建一个RESTful API，例如UserController.java，用于处理Vue前端的HTTP请求，并调用UserRepository中的查询方法。

4. 在Vue前端中使用axios库发送HTTP请求到Spring Boot的RESTful API，并将返回的数据渲染到页面上。

以下是一个简单的示例代码：

User.java:

@Entity
@Table(name = "users")
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(name = "name")
    private String name;

    @Column(name = "email")
    private String email;

    // getters and setters
}

UserRepository.java:

@Repository
public interface UserRepository extends JpaRepository<User, Long> {
    List<User> findByName(String name);
}

UserController.java:

@RestController
@RequestMapping("/api/users")
public class UserController {
    @Autowired
    private UserRepository userRepository;

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

    @GetMapping("/{name}")
    public List<User> getUsersByName(@PathVariable String name) {
        return userRepository.findByName(name);
    }
}

Vue前端代码：

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

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
    };
  },
  mounted() {
    axios.get('/api/users').then((response) => {
      this.users = response.data;
    });
  },
};
</script>