当前位置：首页 > 后端开发 > 正文

Java前后端分离如何开发

admin
后端开发
2025-06-17
5

Java前后端分离通过定义清晰接口实现解耦：前端使用Vue/React等框架处理UI交互，通过Ajax调用后端RESTful API；后端基于Spring Boot等框架提供JSON数据服务，双方独立开发部署，通过HTTP协议通信，提升开发效率和系统可维护性。

核心架构设计

职责划分
- 前端：负责UI渲染、用户交互和路由管理，使用独立框架（如Vue/React/Angular）构建单页应用（SPA）。
- 后端：仅提供RESTful API，处理业务逻辑、数据存储（MySQL/MongoDB）和安全性（OAuth2/JWT）。
- 交互媒介：通过HTTP协议传输JSON/XML数据,无视图层耦合。
技术栈选型
| 组件 | 前端推荐 | 后端推荐 |
|————|————————-|—————————|
| 框架 | Vue3/React18 | Spring Boot 3.x |
| 状态管理 | Pinia/Redux Toolkit | 无（纯API） |
| 通信库 | Axios/Fetch API | Spring Web MVC |
| 安全认证 | JWT前端存储 | Spring Security + JWT |

关键实现步骤

后端API开发（Spring Boot示例）

@RestController @RequestMapping("/api/products") public class ProductController { @Autowired private ProductService productService; @GetMapping public ResponseEntity<List<Product>> getAllProducts() { return ResponseEntity.ok(productService.findAll()); } @PostMapping public ResponseEntity<Product> createProduct(@RequestBody Product product) { return new ResponseEntity<>(productService.save(product), HttpStatus.CREATED); } }

规范：
- 使用@RestController声明纯API控制器
- HTTP状态码精准匹配操作结果（如201 Created）
- 统一异常处理：@ControllerAdvice处理全局异常

前端对接（Vue3 + Axios示例）

// 封装API请求 import axios from 'axios'; const apiClient = axios.create({ baseURL: 'http://api.yourdomain.com', headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` } }); // 获取产品数据 export const fetchProducts = async () => { try { const response = await apiClient.get('/api/products'); return response.data; } catch (error) { console.error("API请求失败", error); } };

跨域解决方案（CORS）

// Spring Boot配置类 @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("https://your-frontend.com") // 生产环境替换为真实域名 .allowedMethods("GET", "POST", "PUT", "DELETE"); } }

部署与运维实践

独立部署方案
- 前端：静态资源托管至Nginx/CDN（如AWS S3 + CloudFront）
- 后端：Spring Boot打包为JAR，通过Docker部署到云服务器（如K8s集群）
- 网关层：使用Spring Cloud Gateway或Nginx反向代理统一API入口
CI/CD流程
graph LR A[代码提交] --> B[自动化测试] B --> C{测试通过？} C -->|是| D[构建前端镜像] C -->|否| E[通知开发者] D --> F[部署到预发环境] F --> G[人工验收] G --> H[生产环境发布]

安全与性能优化

安全防护
- JWT校验：后端验证签名、过期时间及权限声明（Claims）
- XSS防护：前端禁用innerHTML，使用textContent渲染动态数据
- CSRF防御：SameSite Cookie策略 + 敏感操作二次验证
性能提升
- 缓存策略：HTTP缓存头（Cache-Control） + Redis缓存热点数据
- 压缩传输：Gzip压缩JSON响应（Nginx配置gzip on;）
- 异步处理：耗时操作队列化（RabbitMQ/Kafka）

常见问题解决方案

会话保持问题
- 场景：前端路由刷新后404
- 方案：Nginx配置try_files $uri $uri/ /index.html; 重定向到入口文件
API版本管理
- 路径版本控制：/api/v1/products
- 请求头版本控制：Accept: application/vnd.myapi.v1+json
文件上传处理
- 前端：将文件转为FormData对象发送
- 后端：@PostMapping配合@RequestParam("file") MultipartFile file接收