使用Java，Spring Boot和Angular的全栈开发

全栈开发使用Java、Spring Boot和Angular可通过以下步骤高效搭建：1. 后端用Spring Boot构建REST API，核心组件包括Spring Web、Spring Data JPA、Spring Security等，通过@RestController提供JSON接口，并配置CORS允许前端访问；2. 前端用Angular创建响应式页面，使用ng命令生成组件和服务，通过HttpClient调用后端API，在app.module.ts中导入HttpClientModule；3. 前后端联调时推荐在后端配置CORS或在Angular中设置代理文件proxy.conf.json，避免跨域问题；4. 项目结构应清晰分离backend和frontend目录，分别存放后端Java代码和前端Angular代码；5. 部署时后端执行mvn package生成jar包运行，前端执行ng build --prod生成静态文件，可将前端文件放入Spring Boot的resources/static目录下统一部署，或使用Nginx独立托管前端并反向代理后端API，该技术栈结构清晰、生态成熟，适合中大型企业级应用开发。

全栈开发使用 Java、Spring Boot 和 Angular 是一种非常流行的技术组合，特别适合构建企业级、结构清晰且可扩展的 Web 应用。这套技术栈前后端职责分明：后端用 Java Spring Boot 提供 RESTful API，前端用 Angular 构建动态单页应用（SPA），通过 HTTP 交互实现完整功能。

下面从实际开发角度，分几个关键部分说明如何高效搭建这样一个全栈系统。

1. 后端：Spring Boot 快速构建 REST API

Spring Boot 极大简化了 Java 后端开发，自动配置、起步依赖（starters）让你快速启动项目。

核心组件：

• Spring Web：处理 HTTP 请求，构建 REST 接口
• Spring Data JPA：操作数据库（如 MySQL、PostgreSQL）
• Spring Security（可选）：实现认证与授权
• Spring Boot DevTools：开发时热重载
• Lombok：减少样板代码（getter/setter/toString 等）

示例：一个简单的用户 API

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

    @GetMapping
    public List<User> getAll() {
        return userService.findAll();
    }

    @PostMapping
    public ResponseEntity<User> create(@RequestBody User user) {
        User saved = userService.save(user);
        return ResponseEntity.ok(saved);
    }
}

建议：

• 使用 @RestController 返回 JSON
• 统一返回格式，如 ResponseEntity<ApiResponse<T>>
• 配置跨域（CORS）允许前端访问：

  @Bean
  public CorsConfigurationSource corsConfigurationSource() {
      CorsConfiguration config = new CorsConfiguration();
      config.setAllowedOriginPatterns(Arrays.asList("*"));
      config.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE"));
      config.setAllowedHeaders(Arrays.asList("*"));
      config.setAllowCredentials(true);
      UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
      source.registerCorsConfiguration("/api/**", config);
      return source;
  }

2. 前端：Angular 构建响应式 UI

Angular 是一个完整的前端框架，适合大型应用，自带路由、状态管理、表单验证等。

常用命令：

ng new my-frontend     # 创建项目
ng generate component user-list
ng generate service user
ng serve                 # 启动开发服务器（默认 4200 端口）

调用后端 API 示例：

@Injectable({ providedIn: 'root' })
export class UserService {
  private apiUrl = 'http://localhost:8080/api/users';

  constructor(private http: HttpClient) {}

  getAll(): Observable<User[]> {
    return this.http.get<User[]>(this.apiUrl);
  }

  create(user: User): Observable<User> {
    return this.http.post<User>(this.apiUrl, user);
  }
}

组件中使用：

@Component({
  selector: 'app-user-list',
  template: `
    <div *ngFor="let user of users">
      {{ user.name }} - {{ user.email }}
    </div>
  `
})
export class UserListComponent implements OnInit {
  users: User[] = [];

  constructor(private userService: UserService) {}

  ngOnInit(): void {
    this.userService.getAll().subscribe(data => {
      this.users = data;
    });
  }
}

注意：

• 在 app.module.ts 中导入 HttpClientModule
• 开发时 Angular 默认运行在 4200 端口，Spring Boot 在 8080，需配置代理或后端允许跨域（推荐后端配置 CORS）

3. 前后端联调：解决跨域与代理

开发阶段最常见的问题是跨域请求被浏览器拦截。

解决方案：

• 方式一（推荐）：后端 Spring Boot 配置 CORS 如上文所示，开放 /api/** 路径的跨域访问
• 方式二：Angular 使用代理 在项目根目录创建 proxy.conf.json：

  {
    "/api": {
      "target": "http://localhost:8080",
      "secure": false,
      "changeOrigin": true
    }
  }

  启动时使用：ng serve --proxy-config proxy.conf.json，这样 /api/** 请求会自动转发到 8080

生产环境建议部署时统一域名，或通过 Nginx 反向代理解决。

4. 项目结构建议（清晰分工）

my-app/
├── backend/               # Spring Boot 项目
│   ├── src/main/java/com/example/demo/
│   │   ├── controller/
│   │   ├── service/
│   │   ├── repository/
│   │   └── model/
│   └── pom.xml
│
├── frontend/              # Angular 项目
│   ├── src/app/
│   │   ├── components/
│   │   ├── services/
│   │   ├── models/
│   │   └── app.module.ts
│   └── angular.json
│
└── README.md

5. 部署思路

开发完成后，可以分别打包部署：

• 后端：mvn package 生成 jar，用 java -jar app.jar 运行
• 前端：ng build --prod 生成静态文件（dist/）
• 合并部署：把 Angular 打包后的 dist/frontend/browser 文件复制到 Spring Boot 的 src/main/resources/static 目录下，启动后端即可通过根路径访问前端

或者使用 Nginx 托管前端，后端独立部署 API 服务。

基本上就这些。Java Spring Boot Angular 这套组合虽然学习曲线略陡，但结构清晰、生态成熟，特别适合中大型项目。关键是把前后端分离的协作模式理顺，接口定义清楚，开发效率会很高。

以上是使用Java，Spring Boot和Angular的全栈开发的详细内容。更多信息请关注PHP中文网其他相关文章！