Java를 사용하여 JHipster를 기반으로 하는 프런트엔드 및 백엔드 분리 애플리케이션을 개발하는 방법-java지도 시간-php.cn

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

WBOY

풀어 주다： 2023-09-20 11:18:28

원래의

926명이 탐색했습니다.

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이 설치되어 있는지 확인하세요.

명령줄 도구를 열고 JHipster를 설치하세요.
```
npm install -g generator-jhipster
```
로그인 후 복사
새 JHipster 프로젝트 만들기:
```
jhipster
```
로그인 후 복사

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

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

프로젝트 루트 디렉터리에서 "frontend"라는 폴더를 만듭니다.
```
mkdir frontend
```
로그인 후 복사
프런트엔드 폴더로 이동하고 Angular CLI를 사용하여 새 Angular 애플리케이션을 만듭니다.
```
cd frontend
ng new myapp
```
로그인 후 복사
myapp 디렉토리에 들어가서 개발 서버를 시작하세요:
```
cd myapp
ng serve
```
로그인 후 복사

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

3단계: 백엔드와 통신

src/main/java/com/mycompany/myapp/config/Constants.java 파일을 열고 프런트엔드 및 백엔드 통신을 위한 API 경로를 구성합니다.
```
public static final String API_URL = "/api";
```
로그인 후 복사

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();
 }
}

로그인 후 복사

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());
 }
}

로그인 후 복사

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>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 중국어 웹사이트의 기타 관련 기사를 참조하세요!