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