Java前后端分离如何开发

核心架构设计

1. 职责划分

   

   • 前端：负责UI渲染、用户交互和路由管理，使用独立框架（如Vue/React/Angular）构建单页应用（SPA）。
   • 后端：仅提供RESTful API，处理业务逻辑、数据存储（MySQL/MongoDB）和安全性（OAuth2/JWT）。
   • 交互媒介：通过HTTP协议传输JSON/XML数据,无视图层耦合。

2. 技术栈选型
   | 组件 | 前端推荐 | 后端推荐 |
   |————|————————-|—————————|
   | 框架 | 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");
    }
}

部署与运维实践

1. 独立部署方案

   • 前端：静态资源托管至Nginx/CDN（如AWS S3 + CloudFront）
   • 后端：Spring Boot打包为JAR，通过Docker部署到云服务器（如K8s集群）
   • 网关层：使用Spring Cloud Gateway或Nginx反向代理统一API入口

2. CI/CD流程

   graph LR
     A[代码提交] --> B[自动化测试]
     B --> C{测试通过？}
     C -->|是| D[构建前端镜像]
     C -->|否| E[通知开发者]
     D --> F[部署到预发环境]
     F --> G[人工验收]
     G --> H[生产环境发布]

安全与性能优化

1. 安全防护

   

   • JWT校验：后端验证签名、过期时间及权限声明（Claims）
   • XSS防护：前端禁用innerHTML，使用textContent渲染动态数据
   • CSRF防御：SameSite Cookie策略 + 敏感操作二次验证

2. 性能提升

   • 缓存策略：HTTP缓存头（Cache-Control） + Redis缓存热点数据
   • 压缩传输：Gzip压缩JSON响应（Nginx配置gzip on;）
   • 异步处理：耗时操作队列化（RabbitMQ/Kafka）

常见问题解决方案

1. 会话保持问题

   • 场景：前端路由刷新后404
   • 方案：Nginx配置try_files $uri $uri/ /index.html; 重定向到入口文件

2. API版本管理

   • 路径版本控制：/api/v1/products
   • 请求头版本控制：Accept: application/vnd.myapi.v1+json

3. 文件上传处理

   

   • 前端：将文件转为FormData对象发送
   • 后端：@PostMapping配合@RequestParam("file") MultipartFile file接收

演进趋势建议

1. BFF层（Backend For Frontend）：针对多端需求（Web/APP/小程序），用Node.js定制聚合API。
2. GraphQL替代REST：解决Over-fetching问题（推荐Spring GraphQL）。
3. Serverless架构：无服务化后端（AWS Lambda + API Gateway）降低运维成本。

引用说明：本文技术方案参考Oracle官方Java文档、Spring Security最佳实践、RFC 7519（JWT标准）、MDN Web API文档及Vue/React官方指南，部署架构符合AWS Well-Architected Framework原则。