Spring boot +vue 实现查询数据库数据

要实现 Spring Boot 和 Vue.js 之间的数据交互，可以采用 RESTful API 的方式。具体实现步骤如下：

1. 在 Spring Boot 中，可以使用 Spring Data JPA 来访问数据库。首先需要在 pom.xml 文件中添加依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>

2. 在 application.properties 中配置数据库连接信息：

spring.datasource.url=jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=GMT%2B8
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

3. 创建一个实体类，使用 @Entity、@Table、@Id、@GeneratedValue 等注解来设置表名、字段名、主键等信息：

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

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

    @Column(name = "age")
    private Integer age;

    // 省略 getter 和 setter 方法
}

4. 创建一个 Repository 接口，继承 JpaRepository 接口，并指定泛型参数为实体类和主键类型：

@Repository
public interface UserRepository extends JpaRepository<User, Long> {
}

5. 创建一个 Controller 类，使用 @RestController 注解标记该类，使用 @Autowired 注解注入 UserRepository，编写查询用户列表的接口：

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

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

6. 在 Vue.js 中，可以使用 axios 库来发送 HTTP 请求。首先需要在 index.html 中引入 axios：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

7. 创建一个 Vue 组件，在 mounted 钩子函数中使用 axios 发送 GET 请求获取用户列表，并将返回的数据渲染到页面上：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

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

这样就可以通过 Spring Boot 和 Vue.js 实现查询数据库数据了。