SpringBoot3与Vue3前后端分离项目联调实战指南

SpringBoot3与Vue3前后端分离联调实战指南

摘要：本文详细讲解SpringBoot3与Vue3前后端分离开发时的联调技巧，涵盖环境搭建、跨域配置、Axios请求封装及常见问题解决方案，助你快速打通前后端协作链路。

---

一、环境准备与项目创建

1.1 后端环境

# 使用Spring Initializr创建项目
JDK 17+
Spring Boot 3.1.0
依赖选择：
- Spring Web
- Lombok
- Spring Data JPA
- H2 Database（测试用）

1.2 前端环境

npm init vue@latest
✔ Project name: vue3-app
✔ TypeScript: No
✔ Pinia: Yes
✔ Router: Yes
✔ ESLint: Yes

---

二、后端接口开发示例

2.1 用户实体类

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

2.2 REST控制器

@RestController
@RequestMapping("/api/users")
@CrossOrigin(origins = "http://localhost:5173") // 临时跨域配置
public class UserController {

    @Autowired
    private UserRepository userRepository;

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

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

---

三、前端联调配置

3.1 安装Axios

npm install axios

3.2 请求封装（src/utils/request.js）

import axios from 'axios'

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

// 请求拦截器
service.interceptors.request.use(config => {
  config.headers['Content-Type'] = 'application/json'
  return config
})

// 响应拦截器
service.interceptors.response.use(
  response => response.data,
  error => {
    console.log('Request Error:', error)
    return Promise.reject(error)
  }
)

export default service

---

四、解决跨域问题

4.1 后端全局配置（推荐）

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("http://localhost:5173")
                .allowedMethods("*")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

4.2 前端代理配置（vite.config.js）

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

---

五、前后端数据交互实战

5.1 获取用户列表

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

const users = ref([])

const loadUsers = async () => {
  try {
    const res = await request.get('/users')
    users.value = res
  } catch (err) {
    console.error('Failed to fetch users:', err)
  }
}

onMounted(() => {
  loadUsers()
})
</script>

5.2 提交表单数据

const submitForm = async () => {
  try {
    const newUser = await request.post('/users', formData)
    users.value.push(newUser)
  } catch (error) {
    ElMessage.error('提交失败：' + error.message)
  }
}

---

六、联调调试技巧

1. 浏览器开发者工具

   • Network标签查看请求详情
   • Console查看日志输出
   • Application查看存储状态

2. 后端调试

   @Slf4j
   @RestController
   public class UserController {
       @PostMapping
       public User createUser(@RequestBody User user) {
           log.info("Received user: {}", user); // 查看接收数据
           return userRepository.save(user);
       }
   }
   

3. Postman测试

   POST http://localhost:8080/api/users
   Body (raw JSON):
   {
     "username": "testuser",
     "email": "test@example.com"
   }
   

---

七、常见问题解决

Q1：出现CORS预检请求失败

• 检查是否配置了OPTIONS方法支持
• 确认响应头包含Access-Control-Allow-Origin

Q2：前端收到404错误

• 验证后端接口路径是否正确
• 检查是否添加了@RestController注解

Q3：数据绑定失败

• 确保DTO字段命名与JSON属性一致
• 检查是否缺少@RequestBody注解

---

总结：通过合理配置CORS、规范接口设计、统一请求封装，结合调试工具的使用，可以显著提升SpringBoot3与Vue3的联调效率。建议在开发过程中保持前后端接口文档的及时同步（推荐使用Swagger或Apifox），这将进一步优化团队协作体验。

技术栈版本：

• Spring Boot 3.1.0
• Vue 3.3.4
• Axios 1.4.0
• Vite 4.3.9