环境准备

JDK 17或更高版本 Node.js 16.x或更高版本 MySQL 8.0 IntelliJ IDEA或VS Code Maven 3.8+

后端开发(Spring Boot)

项目初始化 使用Spring Initializr创建项目，选择依赖：

• Spring Web
• Spring Data JPA
• MySQL Driver
• Lombok

数据库配置 application.properties配置MySQL连接：

spring.datasource.url=jdbc:mysql://localhost:3306/db_name
spring.datasource.username=root
spring.datasource.password=123456
spring.jpa.hibernate.ddl-auto=update
 

实体类示例

@Entity
@Data
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    
    private String username;
    private String email;
}
 

Repository接口

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

REST控制器

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

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

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

前端开发(Vue3)

项目初始化 使用Vite创建Vue3项目：

npm create vite@latest frontend --template vue
cd frontend
npm install axios vue-router
 

Axios配置 创建src/utils/request.js：

import axios from 'axios';

const service = axios.create({
    baseURL: 'http://localhost:8080/api',
    timeout: 5000
});

export default service;
 

用户列表组件

<template>
  <div>
    <h1>用户列表</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.username }} - {{ user.email }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import request from '@/utils/request';

const users = ref([]);

onMounted(async () => {
  const res = await request.get('/users');
  users.value = res.data;
});
</script>
 

跨域处理

后端CORS配置 Spring Boot中添加配置类：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("*")
                .allowedHeaders("*");
    }
}
 

项目部署

后端打包

mvn clean package
java -jar target/your-app.jar
 

前端打包

npm run build
 

技术栈描述

Spring Boot+Vue3+MySQL是一套流行的全栈开发组合。Spring Boot简化了Java后端开发，Vue3提供了现代化的前端框架，MySQL作为关系型数据库存储数据。该组合适合开发企业级Web应用。