Java를 사용하여 JHipster를 기반으로 하는 프런트엔드 및 백엔드 분리 애플리케이션을 개발하는 방법

Java를 사용하여 JHipster를 기반으로 하는 프런트엔드 및 백엔드 분리 응용 프로그램을 개발하는 방법

머리말:
오늘날 소프트웨어 개발에서 프런트엔드 및 백엔드 분리 아키텍처에 대한 개발자의 요구가 점점 더 커지고 있습니다. JHipster는 Java를 사용하여 최신 웹 애플리케이션을 구축하기 위한 강력한 도구로 Spring Boot 및 Angular와 같은 기술을 결합하여 애플리케이션을 빠르게 개발할 수 있는 기능을 제공합니다. 이 기사에서는 Java를 사용하여 JHipster를 기반으로 하는 프런트엔드 및 백엔드 분리 애플리케이션을 개발하는 방법을 소개하고 코드 예제를 제공합니다.

JHipster 소개:
JHipster는 최신 웹 애플리케이션 생성을 위한 개발 플랫폼입니다. Spring Boot, Spring Security, Angular, React 및 Vue와 같은 기술을 결합하여 애플리케이션 구축 프로세스를 단순화합니다. JHipster는 사용자 관리, 인증 및 권한 부여, 데이터베이스 액세스, 프런트 엔드 페이지 등과 같은 다양한 기본 기능을 제공합니다. JHipster를 사용하면 개발자는 완벽하게 기능하고 효율적이며 안정적인 애플리케이션을 신속하게 구축할 수 있습니다.

프런트엔드 및 백엔드 분리 아키텍처:
프런트엔드 및 백엔드 분리 아키텍처는 프런트엔드 및 백엔드 코드를 독립적으로 개발, 배포 및 유지 관리합니다. 프런트 엔드는 API를 통해 백엔드와 통신하고 데이터를 가져와 페이지를 렌더링합니다. 이 아키텍처의 장점은 프런트엔드와 백엔드를 병렬로 개발할 수 있어 개발 프로세스에서 조정 및 종속성 문제를 줄일 수 있다는 것입니다. 또한 다중 플랫폼 및 다중 터미널 애플리케이션 개발도 지원합니다.

1단계: JHipster 설치 및 프로젝트 생성
시작하기 전에 Java, Node.js 및 Yarn이 설치되어 있는지 확인하세요.

1. 명령줄 도구를 열고 JHipster를 설치하세요.

   npm install -g generator-jhipster

2. 새 JHipster 프로젝트 만들기:

   jhipster

프롬프트에 따라 사용하려는 기술 스택과 구성 요소를 선택하세요.

2단계: 프런트엔드 애플리케이션 만들기

1. 프로젝트 루트 디렉터리에서 "frontend"라는 폴더를 만듭니다.

   mkdir frontend

2. 프런트엔드 폴더로 이동하고 Angular CLI를 사용하여 새 Angular 애플리케이션을 만듭니다.

   cd frontend
   ng new myapp

3. myapp 디렉토리에 들어가서 개발 서버를 시작하세요:

   cd myapp
   ng serve

이제 브라우저에서 http://localhost:4200을 방문하여 Angular 애플리케이션을 볼 수 있습니다.

3단계: 백엔드와 통신

1. src/main/java/com/mycompany/myapp/config/Constants.java 파일을 열고 프런트엔드 및 백엔드 통신을 위한 API 경로를 구성합니다.

   public static final String API_URL = "/api";

2. CORS(Cross Origin Resource Sharing)를 허용하는 src/main/java/com/mycompany/myapp/config/SecurityConfiguration.java 파일 열기:

   @Configuration
   @EnableWebSecurity
   @EnableGlobalMethodSecurity(prePostEnabled = true, securedEnabled = true)
   public class SecurityConfiguration extends WebSecurityConfigurerAdapter {
   
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        // ...
   
        http.cors()
            .and()
            .csrf()
            .disable()
            .headers()
            .frameOptions()
            .disable()
            .cacheControl()
            .disable();
    }
   }

3. src/main/java/com/mycompany/myapp/web/ 열기 Rest/UserResource.java 파일, 사용자 관련 API 경로를 /api/users로 변경:

   @RestController
   @RequestMapping("/api")
   public class UserResource {
   
    // ...
   
    @GetMapping("/users")
    public ResponseEntity<List<UserDTO>> getAllUsers(Pageable pageable) {
        Page<UserDTO> page = userService.getAllManagedUsers(pageable);
        HttpHeaders headers = PaginationUtil.generatePaginationHttpHeaders(ServletUriComponentsBuilder.fromCurrentRequest(), page);
        return ResponseEntity.ok().headers(headers).body(page.getContent());
    }
   }

4. frontend/src/app/app.comComponent.ts 파일을 열고 HttpClient를 사용하여 백엔드 API 데이터 가져오기:

   import { Component } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   
   @Component({
     selector: 'app-root',
     template: `
    <h1 id="Users">Users</h1>
    <ul>
      <li *ngFor="let user of users">{{user.login}}</li>
    </ul>
     `,
     styleUrls: ['./app.component.css']
   })
   export class AppComponent {
     users: any[];
     
     constructor(private http: HttpClient) {
    this.http.get('/api/users').subscribe((data: any[]) => {
      this.users = data;
    });
     }
   }

위 코드 예시를 통해 프론트엔드 애플리케이션은 백엔드에서 얻은 사용자 목록을 페이지에 표시합니다.

요약:
JHipster를 사용하면 Java 기반 프런트엔드 및 백엔드 분리 애플리케이션을 쉽게 개발할 수 있습니다. 위의 단계는 필요에 따라 확장하고 최적화할 수 있는 기본 프레임워크를 제공합니다. 이 기사가 JHipster를 사용하여 프런트엔드 및 백엔드 분리 애플리케이션 개발을 빠르게 시작하는 데 도움이 되기를 바랍니다. 즐거운 코딩하세요!

위 내용은 Java를 사용하여 JHipster를 기반으로 하는 프런트엔드 및 백엔드 분리 애플리케이션을 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!