Spring Boot + Vue3 示例

这里提供一个基于 Spring Boot 和 Vue3 的示例项目，可以作为参考：

后端 Spring Boot 部分：

1. 创建一个 Spring Boot 项目，添加以下依赖：

<dependencies>
    <!-- Spring Boot Web -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <!-- Spring Boot Data JPA -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>

    <!-- H2 Database -->
    <dependency>
        <groupId>com.h2database</groupId>
        <artifactId>h2</artifactId>
        <scope>runtime</scope>
    </dependency>

    <!-- Spring Boot Test -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
</dependencies>

2. 在 `application.properties` 文件中配置数据库连接：

spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=
spring.jpa.database-platform=org.hibernate.dialect.H2Dialect
spring.jpa.hibernate.ddl-auto=update

3. 创建一个实体类 `User`：

@Entity
@Table(name = "users")
public class User {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(nullable = false, unique = true)
    private String username;

    @Column(nullable = false)
    private String password;

    // getters and setters omitted for brevity
}

4. 创建一个 `UserRepository` 接口：

public interface UserRepository extends JpaRepository<User, Long> {
    User findByUsername(String username);
}

5. 创建一个 `UserController` 类，处理用户相关的请求：

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

    @Autowired
    private UserRepository userRepository;

    @GetMapping("/{username}")
    public User getUserByUsername(@PathVariable String username) {
        return userRepository.findByUsername(username);
    }

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

前端 Vue3 部分：

1. 安装 Vue CLI:

npm install -g @vue/cli

2. 创建一个 Vue3 项目：

vue create my-project

3. 安装 axios：

npm install axios

4. 在 `src/main.js` 文件中添加以下代码：

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:8080/api'

const app = createApp(App)
app.config.globalProperties.$http = axios
app.mount('#app')

5. 创建一个 `Users.vue` 组件，显示用户列表：

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

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

6. 在 `App.vue` 中添加一个路由：

<template>
  <div>
    <router-view />
  </div>
</template>

<script>
import { createRouter, createWebHashHistory } from 'vue-router'
import Users from './Users.vue'

const routes = [
  { path: '/', component: Users }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default {
  router
}
</script>

这样，我们就完成了一个基于 Spring Boot 和 Vue3 的示例项目，可以通过 `npm run serve` 命令启动前端应用，通过 `mvn spring-boot:run` 命令启动后端应用。