springboot+vue项目怎么连接数据库的

在Spring Boot应用中连接数据库，通常需要使用Spring Data JPA或者Spring JDBC等技术。其中，Spring Data JPA是一种基于JPA规范的ORM框架，可以通过注解方式配置实体类映射关系，大大简化了数据访问层的开发。

在Vue项目中，可以使用axios等HTTP客户端库与后台进行数据交互。一般来说，后台会提供RESTful API接口供前端调用，前端通过发送HTTP请求来获取或者提交数据。

下面是一个简单的示例，演示了如何使用Spring Boot和Vue.js连接MySQL数据库：

1. 在pom.xml中添加MySQL驱动依赖：

<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>8.0.22</version>
</dependency>

2. 配置数据源和JPA

在application.properties或者application.yml文件中添加以下配置：

# 数据源配置
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/mydb?useSSL=false&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=123456

# JPA配置
spring.jpa.show-sql=true
spring.jpa.hibernate.ddl-auto=update
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL8Dialect

3. 创建实体类和DAO接口

在src/main/java目录下创建实体类和DAO接口：

// User.java
@Entity
@Table(name = "user")
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private Integer age;
    // getter和setter省略
}

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

4. 创建Controller

在src/main/java目录下创建UserController.java文件，编写RESTful API接口：

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

    @GetMapping("/{id}")
    public ResponseEntity<User> getUserById(@PathVariable Long id) {
        Optional<User> user = userRepository.findById(id);
        return user.map(u -> ResponseEntity.ok().body(u))
                .orElse(ResponseEntity.notFound().build());
    }

    @PostMapping("")
    public User createUser(@RequestBody User user) {
        return userRepository.save(user);
    }
}

5. 在Vue.js中调用API接口

在Vue.js中使用axios库发送HTTP请求，获取或者提交数据：

// 获取用户信息
axios.get('/api/user/1').then(response => {
  console.log(response.data);
});

// 创建用户信息
axios.post('/api/user', {
  name: 'Tom',
  age: 20,
}).then(response => {
  console.log(response.data);
});