Java 프레임워크와 프런트엔드 Angular 프레임워크의 결합

답변: Java 백엔드 프레임워크와 Angular 프론트엔드 프레임워크를 통합하여 최신 웹 애플리케이션 구축을 위한 강력한 조합을 제공할 수 있습니다. 단계: Java 백엔드 프로젝트를 생성하고 Spring Web 및 Spring Data JPA 종속성을 선택합니다. 모델 및 리포지토리 인터페이스를 정의합니다. REST 컨트롤러를 생성하고 엔드포인트를 제공합니다. 각도 프로젝트를 만듭니다. Spring Boot Java 종속성을 추가합니다. CORS를 구성합니다. Angular 구성 요소에 Angular를 통합합니다.

Java Backend Framework와 Angular Frontend Framework의 통합

Java Backend Framework와 Angular Frontend Framework는 최신 웹 애플리케이션을 구축하기 위한 강력한 조합입니다. 이 글에서는 Spring Boot와 Angular의 실제 사례를 포함하여 Java 프레임워크와 Angular 프레임워크를 통합하는 방법을 소개합니다.

단계:

1. Java 백엔드 프로젝트 만들기

Spring 초기화를 사용하여 Spring Boot 프로젝트를 만들고 다음 종속성을 선택합니다.

• Spring Web
• Spring Data JPA

2. 모델 및 리포지토리

모델 패키지에 Product 엔터티를 생성하고 ProductRepository 리포지토리 인터페이스를 정의합니다.

3. REST 컨트롤러 생성

컨트롤러 패키지에 ProductController를 생성하고 Product 엔터티와 상호 작용할 REST 엔드포인트를 제공합니다.

4. Angular 프로젝트 만들기

프로젝트 폴더에서 다음 명령을 실행하여 Angular 프로젝트를 만듭니다.

ng new [project-name]

5. Angular 프로젝트의 package.json 파일에서 Spring Boot Java 종속성을 추가합니다. , Spring Boot Java 종속성 추가:

"dependencies": {
  ...
  "spring-boot": "^2.6.6",
  ...
}

6. CORS 구성

Spring Boot 애플리케이션의 웹 보안 구성:

@Configuration
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().and()
            ...
    }

}

7에서 CORS(Cross-Origin Resource Sharing)를 구성합니다. 구성 요소는 Spring Boot Java 서비스에서 제공하는 엔드포인트를 사용합니다. 다음 예에서는 ProductController에서 제품 목록을 가져오는 방법을 보여줍니다.

import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent {
  products: Product[];

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get<Product[]>('/api/products').subscribe(products => {
      this.products = products;
    });
  }
}

실습 사례: Spring Boot 및 Angular

이 실제 사례에서는 간단한 제품 관리 애플리케이션을 만듭니다.

백엔드:

Spring Boot는 제품 관리를 위한 RESTful API를 생성하는 데 사용됩니다.

프런트 엔드:
• Angular는 사용자가 제품을 보고 만들 수 있는 사용자 인터페이스를 만드는 데 사용됩니다.
• 애플리케이션 실행:

Java 프로젝트에서 mvn spring-boot:run을 실행합니다.

Angular 프로젝트에서 ngserve를 실행하세요.

애플리케이션은 구성된 포트(기본적으로 8080)에서 실행됩니다. 다음 URL을 방문하면 제품 목록을 볼 수 있습니다: http://localhost:4200/products.

위 내용은 Java 프레임워크와 프런트엔드 Angular 프레임워크의 결합의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!