Building Angular 4 application with REST-API backend

안녕하십니까 CUBA REST API 전용 웹 세미나에 오신 것을 환영합니다

내 이름은 Gleb Gorelov이며 CUBA Platform 개발 팀을 대표합니다 이 웹 세미나에서는 REST API에 대해 자세히 살펴보고 어떻게 작동하는지 살펴 보겠습니다 우리는 공개 웹 사이트에 REST API를 사용하여 클라이언트 측 응용 프로그램을 만들려고합니다 세션에서는 인증, 엔티티에 대한 CRUD 작업, 미리 정의 된 JPQL 쿼리의 실행, 서비스 방법 실행, 파일 업로드 및 다운로드 Big Cubina Burger라는 작은 버거 상점을위한 쿠바 앱이 있다는 이미지 우리 애플리케이션의 데이터 모델을 살펴 보겠습니다

모델의 기본 엔티티는 Order, OrderItem 및 MenuItem입니다 Order 엔터티는 OrderStatus 열거 형에 의해 표시되는 상태를 가지며, 주문을 한 사용자와 주문 항목 목록을 참조하십시오 OrderItem 엔티티는 순서화 된 MenuItem의 수량을 포함합니다 MenuItem 엔티티에는 이미지, 이름, 무게 및 가격 필드가 있습니다 응용 프로그램으로 전환합시다

간단한 응용 프로그램으로 메뉴 항목 및 주문 화면 만 있습니다 따라서 이미지, 이름, 무게, 가격 및 주문이있는 메뉴 항목을 볼 수 있습니다 보시다시피, 애플리케이션은 정보를 저장합니다 햄버거와 주문에 관한 정보를 제공하며 백엔드 응용 프로그램에 그 목적이 있습니다 따라서 공개 웹 사이트 용 REST API를 사용하여 클라이언트 측 응용 프로그램을 만들 계획입니다

범용 REST API는 다음과 같은 기능을 제공합니다 엔티티에 대한 CRUD 작업 사전 정의 된 JPQL 쿼리 실행 서비스 방법의 실행 엔티티, 뷰, 열거 형, 데이터 유형과 같은 메타 데이터 가져 오기 현재 사용자 권한 얻기

예를 들어 엔티티, 속성, 특정 권한에 대한 액세스 이름, 언어, 시간대와 같은 현재 사용자 정보를 얻습니다 업로드 및 파일 다운로드 REST API는 인증에 OAuth2 프로토콜을 사용하고 익명 액세스를 지원합니다 API에 대한 자세한 문서는 Swagger 사양에 따라 작성되었으며 http://files

cuba-platformcom/swagger 프런트 엔드 기술로서 Angular, Angular 4를 사용하겠습니다 Angular는 HTML로 클라이언트 응용 프로그램을 작성하기위한 프레임 워크이며 JavaScript 또는 JavaScript로 컴파일되는 TypeScript와 같은 언어입니다 프레임 워크는 몇 개의 라이브러리로 구성되며, 일부는 코어이며 일부는 선택적 라이브러리입니다 Developing Angular 응용 프로그램은 HTML 템플릿과 Angularized 마크 업, 해당 템플릿을 관리하기위한 구성 요소 클래스 작성, 애플리케이션 로직을 서비스에 추가하고, 복싱 컴포넌트와 서비스를 모듈에 추가합니다

그런 다음 루트 모듈을 부트 스트랩하여 응용 프로그램을 시작합니다 응용 프로그램 내용을 브라우저에 표시하는 각도 처리 사용자가 제공 한 지침에 따라 사용자 상호 작용에 응답합니다 이제 애플리케이션 개발로 넘어 갑시다 그리고 Angular 응용 프로그램을 엽니 다 상단에 탐색 모음이있는 응용 프로그램 스텁을 이미 준비했습니다

로그인 화면, MenuItems의 목록을 보여줄 홈 스크린이 있습니다 이제 IDE에서 Angular 프로젝트를 엽니 다 _services 디렉토리를 확장합니다 응용 프로그램 코드를 살펴보면 몇 가지 서비스에 대한 스텁이 있음을 알 수 있습니다 예 : AuthenticationService

AuthenticationService는 로그인 및 로그 아웃 목적으로 사용됩니다 UserService 현재 사용자 정보를 저장 및로드하고 사용자가 변경된 경우 다른 구성 요소에 알립니다 StorageService 이것은 헬퍼 서비스 일 뿐이며, 우리의 경우에는 저장소를 사용하여 작업을 일반화하는 데 사용됩니다 이러한 서비스 외에도 AlertService 및 AlertComponent 오류 또는 성공과 같은 현재 페이지에서 메시지를 표시하는 목적을 수행합니다

메뉴 항목 브라우저로 진행하기 전에 MenuItem 엔터티에 대한 모델 클래스를 만들어야합니다 이제 새로운 디렉토리를 만들어 보겠습니다 이름 : _ 모델 새로운 수업을 만듭니다 Name : MenuItem을 사용합니다 그리고 그 내용을 다음으로 대체하십시오

메뉴 클래스에는 ID, 이름, 가중치, 가격 및 이미지가 있습니다 그리고 이미지 필드가 CUBA 응용 프로그램의 FileDescriptor 엔티티, 우리는 동일한 작업을 수행하고 FileDescriptor 클래스를 생성합니다 이제 하나 더 클래스를 만들어 봅시다 이름 : FileDescriptor 그리고 그 내용을 다음으로 대체하십시오

따라서 FileDescriptor 클래스에는 id, name, extension, size 및 createDate 필드가 있습니다 이제 메뉴 항목으로 돌아가서 FileDescriptor 클래스를 가져와야합니다 이제 MenuItemsBrowseComponent를 열어 보겠습니다 그리고 menuItems 필드를 추가합니다 표시 할 메뉴 항목을 저장하십시오

이처럼 import MenuItem 이미지 URL 생성을위한 스텁 메서드를 추가합니다 이제이 구성 요소의 HTML 템플리트로 이동하십시오 그리고 다음을 놓자 첫 번째 반복에서는 간단한 표를 보여줍니다

그리고 우리는 특별한 Angular 특성, 지시문 (예 : ngFor) 우리의 menuItems를 반복하고 표 셀로 제시하기 그리고 스타일을 추가합시다 응용 프로그램으로 이동하십시오 결과적으로 우리는 빈 테이블을 가지므로, REST API를 사용하여 CUBA 애플리케이션에서 메뉴 항목을 얻기위한 서비스를 생성 해 보겠습니다 IDE로 이동합니다

_services 디렉토리에서 새 서비스를 작성하십시오 이름 : MenuItems입니다 좋아, 나는 시험이 필요 없어 그리고 다음을 추가합시다 엔티티 이름과 엔티티 뷰에 대한 constance를 추가했습니다 이 값은 REST API에 대한 요청에 사용됩니다 또한 AlertService를 주입하고 오류 처리 방법을 추가했습니다 또한 메뉴 항목을로드하고 이미지 URL을 가져 오는 메소드 스텁을 추가했습니다

이제 loadMenuItems 메서드를 구현해야합니다 요청을 작성하고 응답을 수동으로 파싱 할 수 있습니다 또는 cuba-rest-js 라이브러리를 사용하십시오 cuba-rest-js는 web 및 Nodejs 용 자바 스크립트 라이브러리입니다

CUBA Platform의 REST API 사용을 용이하게합니다 CUBA REST API 작업에 필요한 모든 메소드를 제공합니다 예를 들어, 로그인 / 로그 아웃 인증 토큰을 얻거나 취소하는 데 사용됩니다 getUserInfo는 현재 사용자 정보를 가져옵니다 loadEntities / loadEntity는 엔티티 또는 단일 엔티티 목록을로드하는 데 사용됩니다

commitEntity / deleteEntity는 엔터티를 생성, 업데이트 또는 삭제하는 데 사용됩니다 invokeService는 서비스의 메소드를 실행하는 데 사용됩니다 그리고 많은 다른 사람들 UserInfo와 같은 여러 모델 클래스와 함께 GitHub에서 cuba-rest-js를 찾을 수있을뿐만 아니라 자세한 정보도 읽을 수 있습니다 내가 열어 보자 GitHub에서 쿠바 – 플랫폼 / 쿠바 Rest JS 여기서 설치, 샘플 사용 등에 대한 정보를 찾을 수 있습니다 이 설명서를 읽으십시오 우리의 응용 프로그램에서는 cuba-rest-js를 사용할 것입니다

프로젝트에 의존성으로 추가합시다 IDE로 이동합니다 터미널 창을 엽니 다 신청서를 그만하자 그리고 cuba-rest-js를 설치하십시오

자, 이제 packagejson을 열면, 우리는 cuba-rest-js가 우리 프로젝트에 종속되어 있음을 알 수 있습니다 메뉴 항목로드를 진행하기 전에 cuba-rest-js의 사용을 용이하게하는 cuba 통합 서비스 services 디렉토리 내에서 새로운 서비스를 만듭니다 CubaIntegration이라는 이름으로 확인을 클릭하십시오

다음을 추가합시다 이 서비스는 CUBA 앱 인스턴스를 생성하고 URL을 반환합니다 FileDescriptor 엔티티로 표현 된 파일을 얻습니다 여기 getFilesAbsoluteURL이 있습니다 이제 새로운 CUBA 앱을 초기화하는 것을 볼 수 있습니다

이 저장 속성을 주목하십시오 애플리케이션 이름과 apiUrl을 정의하는 것과 함께, StorageService에서 값을 가져 와서 저장소 속성을 정의합니다 이제 새로 만든 MenuItem을 제공해야합니다 및 모든 구성 요소에 대한 CubaIntegration 서비스를 제공합니다 그럼, 열자

appmodulets 및 providers 속성 내 CubaIntegrationService와 MenuItemsService를 추가합시다 MenuItemsService로 돌아가겠습니다 우선, cubaApp 필드를 추가합시다

cubaIntegrationService를 삽입하십시오 생성자 내에서 cubaApp 인스턴스를 가져옵니다 그리고 메소드 구현을 추가하십시오 loadMenuItems () 및 getImageUrl () 따라서 loadMenuItems () 메서드에서 loadEntities () 메서드를 사용합니다

cuba-rest-js에 정의되어 있습니다 매개 변수로 ENTITY_NAME 및 ENTITY_VIEW를 전달합니다 좋아, Swagger를 열어 라 파일 섹션으로 이동하십시오 Swagger 문서에 따르면 FileDescriptor 엔터티가 나타내는 파일 / files / {id} 경로에서 얻을 수 있습니다

getImageUrl 메소드는 쿠바 앱에서 파일을 가져올 URL을 반환합니다 또는 자리 표시 자 URL 만 getFilesAbsoluteUrl (), 열기 이전에 보았던 것처럼 getFilesAbsoluteUrl 메소드는 기본 apiUrl과 FILES_PATH를 사용합니다 파일과 같습니다 그리고 나서 파일 ID를 추가합니다 MenuItemsBrowseComponent를 열어 보겠습니다

그리고 그 내용을 다음으로 대체하십시오 loadMenuItems 메서드를 추가했습니다 menuItemsService에서 loadMenuItems를 호출하고 성공하면 값을 얻습니다 그리고 그것을 사용할 수 있도록 menuItemsService를 삽입했습니다 getImageUrl의 경우 menuItemsService에서 getImageUrl 메소드도 호출합니다

신청서를 시작하겠습니다 메뉴 항목 목록 대신 승인되지 않은 오류가 표시됩니다 보호 된 리소스에 액세스하기 전에 사용자는 인증 토큰을 얻어야합니다 하지만 권한이없는 사용자의 메뉴 항목 목록을 표시하려고합니다 승인 된 옵션에 대한 추가 옵션을 제공합니다

물론, 우리에게는 그러한 기회가 있습니다 보호 자원에 대한 요청에 인증 헤더가 없으면, 사용자는 익명 세션으로 인증됩니다 기본적으로 익명 액세스는 금지되어 있습니다 사용하려면 설정해야합니다 cuba

restanonymousEnabled 응용 프로그램 속성이 true로 설정됩니다 Studio로 이동하여 IDE 버튼을 클릭하십시오 IDE에서 CUBA 응용 프로그램을 엽니 다 web-app

properties를 엽니 다 cubarestanonymousEnabled를 true로 설정하십시오 그런 다음 Studio로 돌아갑니다

페이지를 새로 고쳐 봅시다 이제 메뉴 항목 목록을 볼 수 있습니다 로그인 기능을 사용 해보자 이전에 말씀 드렸듯이 승인 된 사용자는 메뉴 항목 편집 및 생성, 주문, 개요 개인 주문 및 주문 취소 따라서 로그인 / 로그 아웃 기능을 구현해야합니다

IDE로 돌아가 Angular 애플리케이션으로 돌아가겠습니다 우리는 이미 인증 및 사용자 서비스에 대한 스텁을 가지고 있으므로이를 구현해 보겠습니다 AuthenticationService를 열고 그 내용을 다음과 같이 바꾸자 우리는 MenuItemsService와 같은 작업을 수행했으며, CubaIntegrationService를 주입했습니다 현재의 CubaApp을 얻었고 우리의 요구를 충족시키는 방법을 사용했습니다

따라서 사용자 이름과 암호를 사용하여 login 메소드를 호출하여 인증 토큰을 얻습니다 하지만 우리는 스스로 저장하지 않습니다 쿠바는 우리를 위해 그것을합니다 logout 메소드를 호출하여 인증 토큰을 취소합니다 로그인에 성공하면 userService

loadUserInfo () 메소드를 호출하여 현재 사용자 정보를로드합니다 가입 된 모든 구성 요소에 사용자 정보가 변경되었음을 알립니다 그리고 우리가 성공적으로 로그 아웃하면 똑같이 작동합니다 이제 UserService로 이동하십시오 그리고 그 내용을 다음 내용으로 대체하십시오

loadUserInfo () 메소드의 구현에서, 우리는 getUserInfo () 메소드를 사용한다 사용자 정보를 성공적으로 얻은 경우이 값을 로컬 필드에 저장합니다 이 값을 storageService를 사용하는 파일 저장소에 저장합니다 그리고 우리는 모든 가입자에게 사용자 정보가 변경되었음을 통보합니다 이제 다음과 같은 메소드를 구현해 보겠습니다

현재 사용자 정보를 가져 와서 로컬 저장소에 저장합니다 storageService를 열어 보겠습니다 그리고 다음을 놓으십시오 자, AppComponent를 열자 userInfo 필드를 추가합시다

현재 사용자가 변경 될 때마다이 값을 업데이트 할 것입니다 구현을 추가합시다 우리의 ngOnInit () 메소드 내에서, 그래서 사용자 정보가 변경되면, 우리는 새로운 사용자 정보를 얻고 로컬 필드에 저장합니다 이제 응용 프로그램을 다시 시작해 보겠습니다 그리고 로그인을 시도합시다

그래서 우리는 추가 요소가 navbar에 나타났습니다 이것은 HTML 템플리트 내에서 ngIf라는 특수 각도 지시문을 사용하기 때문입니다 userInfo가 null가 아닌지 어떤지를 조사한다 즉, 인증 된 사용자에 대해서만 추가 기능을 보여줍니다 이제 메뉴 항목을 생성, 편집 및 삭제하는 기능을 구현해 보겠습니다 파일을 업로드 할 수 있습니다 우선, MenuItemsService에 메소드를 추가해 보겠습니다

메뉴 항목을 커밋하고 제거하고 파일을 업로드하는 데 사용됩니다 다시 IDE로 돌아가십시오 MenuItemsService를 엽니 다 그리고 나는 그 내용을 다음과 같이 보충 할 것입니다 그래서 하나의 메뉴 항목을 ID로로드하기 위해 loadMenuItem을 추가했습니다

저는 CubaApp의 loadEntity 메소드를 사용하고 엔티티 이름과 ID를 전달합니다 단일 엔티티를로드하는 엔티티 뷰는 물론입니다 commitMenuItem () 메소드는 커밋 할 엔티티 이름과 paticular 항목과 함께 commitEntity () 메소드를 호출합니다 deleteMenuItem ()은 deleteEntity () 메서드를 사용합니다 엔티티 이름 및 엔티티 ID로 파일을 업로드하려면 정의 할 수있는 일반적인 방법을 가져 오십시오

우리가 사용하고자하는 것 : POST 요청 또는 GET 요청, 우리가 요청을 보내는 특정 경로 우리의 경우 그것은 파일 경로입니다 'filename'매개 변수가 추가되었습니다 이제 우리는 Swagger로갑니다 그리고 / files 경로가 파일 업로드에 사용됨을 알 수 있습니다

우리는 POST 메소드를 사용할 필요가있다 이제 IDE로 돌아가서 MenuItem 브라우저의 HTML 템플리트를 갱신하십시오 추가 필드, 새 메뉴 항목을 작성하기위한 단추 메뉴 항목을 제거하고 편집하기위한 단추 스타일을 추가해 보겠습니다 그리고 Components 클래스에 메서드를 구현하십시오

create () 메소드는 우리를 특수 경로 경로로 안내합니다 edit () 메서드는 동일하게 처리하지만 추가 매개 변수 인 itemid를 전달합니다 우리는 조금 후에 MenuItem 편집기를 구현할 것입니다 remove () 메서드는 menuItemsService에서 deleteMenuItem () 메서드를 호출하기 만합니다

그런 다음 MenuItems 목록에서 삭제 된 항목을 제거합니다 애플리케이션을 열면 변경 사항이 표시됩니다 이제 Create 버튼과 Edit / Remove 버튼을 볼 수 있습니다 지금은 '만들기'또는 '수정'을 클릭해도 아무런 효과가 없습니다 정의 된 라우트에 대한 컴포 M 트가 없기 때

입니다 그러나 우리는 모든 항목을 삭제할 수 있습니다 메뉴 항목을 편집하기위한 구성 요소를 만듭니다 IDE로 돌아가서 새로운 각도 요소를 만듭니다 이름 설정 : 메뉴 항목 편집

자, HTML 템플릿을 열어 보겠습니다 그 내용을 다음 내용으로 대체하십시오 모든 메뉴 항목 속성에 대한 필드가있는 양식 일뿐입니다 및 두 개의 버튼 : 변경 사항을 커밋하고 변경 사항을 거부합니다 컴포넌트 클래스를 열고 내용을 다음과 같이 바꾸자

이 구성 요소가 열리면 URL에 ID 매개 변수가 있는지 확인합니다 그렇다면 MenuItemService에서 loadMenuItem () 메서드를 호출합니다 기존 메뉴 항목을로드하거나 새 메뉴 항목 만 만들면됩니다 '뒤로'를 클릭하면 이전 페이지로 돌아갑니다 'Commit'을 클릭하면 새로운 이미지 파일이있는 경우

사용자가 새 이미지 파일을 업로드 한 경우 이 파일을 서버에 업로드해야합니다 이 파일에 대한 FileDescriptor를 만든다 이 메소드가 성공적으로 완료되면 생성 된 FileDescriptor 엔티티를 구문 분석 할 수 있습니다 메뉴 항목에 대해 설정 한 다음이 메뉴 항목을 커밋하십시오 또는 새로운 이미지 파일이 없으면 메뉴 항목을 커밋합니다

MenuItemService에서 commitMenuItem () 메서드를 호출하여 그런 다음 이전 페이지로 돌아갑니다 이제 새로 생성 된 구성 요소에 대한 라우팅 규칙을 추가해야합니다 app-routingmodule

ts 파일을 열어 보겠습니다 다음 정보를 추가하십시오 '편집'과 '추가 ID 매개 변수로 편집'에 대해 두 개의 경로를 추가했습니다 이 두 경로 모두 MenuItemEditComponent를 엽니 다 이제 메뉴 항목 편집기가 어떻게 작동하는지 확인해 보겠습니다

페이지를 새로 고치십시오 예를 들어, '편집'을 클릭하십시오 편집기를 볼 수 있습니다 예를 들어 가격을 변경할 수 있습니다 '저장'을 클릭하십시오

새 메뉴 항목을 만들어 보겠습니다 파일을 선택하십시오 이 하나 이름을 설정하십시오 무게

그리고 가격 '저장'을 클릭하십시오 또는 '취소'를 클릭하고 변경 사항을 저장하지 않고 되돌아 갈 수 있습니다 우리가 추가 할 다음 기회는 주문을 할 수있는 능력입니다 기본 아이디어는 사용자가 장바구니에 메뉴 항목을 추가 할 수 있다는 것입니다

새 주문을 만들려면 주문 주문을 클릭하십시오 주문을 위해 CUBA 애플리케이션 서비스 방법을 실행합니다 그래서 우리는 CUBA 애플리케이션에 서비스를 생성해야합니다 Studio로 이동하십시오 미들웨어 섹션을 엽니 다

새로 작성 → 서비스를 클릭하십시오 Set Name : OrderService '확인'을 클릭하십시오 그런 다음 OrderServiceBean을 선택하고 'IDE'를 클릭하십시오 OrderService 인터페이스로 전환하고 두 가지 메소드를 추가하십시오

그런 다음 OrderServiceBean으로 돌아가서이 메소드를 구현하십시오 placeOrder () 메소드는 OrderItems를 승인하고, 그 (것)들을위한 새로운 순서를 창조하고, 현재 사용자와 그것을 올린다 userSessionSource에서 가져온 OrderStatus를 COOKING으로 설정 한 다음 주문을 커밋하고이를 반환합니다 cancelOrder () 메소드가로드를 시도합니다 ID로 데이터베이스의 기존 주문 주어진 ID로 데이터베이스에 순서가있는 경우 상태는 CANCELED로 설정됩니다

그리고 그 방법은 그 명령을 위탁합니다 그렇지 않으면 주어진 ID로 주문이 없다는 새로운 예외가 발생합니다 이제 비즈니스 방법에 접근 할 수있게합시다 REST API를 통한 외부 클라이언트 용 Studio를 엽니 다

서비스 편집기를 열고 REST 메소드 탭으로 전환하십시오 Tick ​​REST 호출 허용 두 가지 방법 모두 : placeOrder (), cancelOrder () '확인'을 클릭하십시오 Studio는 rest-servicesxml 파일을 만들고 메서드 설명을 여기에 씁니다 응용 프로그램 서버를 다시 시작하면 HTTP 요청을 사용하여 비즈니스 메소드를 호출 할 수 있습니다

응용 프로그램을 다시 시작하십시오 CUBA 응용 프로그램이 다시 시작되는 동안 Angular 응용 프로그램으로 진행해 봅시다 먼저 OrderItem 및 Order에 대한 모델 클래스를 추가해야합니다 IDE로 이동합니다 _model 디렉토리 내에서 새 클래스를 만듭니다

이름은 OrderItem입니다 OrderItem에는 id, MenuItem 및 수량에 대한 참조가 있습니다 우리는 하나 더 많은 수업을 만들어야합니다 주문 Order 클래스에는 사용자에 대한 참조가 있으며, OrderItem의] 렉션, OrderStatus 유형으로 표시되는 상태 'COOKING', 'DELIVERING', 'FINISHED', 'CANCELED'값, 작성일에 대한 createTs 필드가 있습니다

이제 새로운 모델 클래스가 생성되면 주문 작업을위한 새로운 서비스를 만들어 보겠습니다 _services 디렉토리 내에서 새 서비스를 만듭니다 이름 : 주문 그것을 열어 내용을 바꾸자 AlertService, CubaIntegrationService를 삽입하고 CubaApp 인스턴스를 가져옵니다

주문하려면 CubaApp의 invokeService () 메소드를 사용합니다 및 SERVICE_NAME이 (가) 전달되었습니다 (우리의 쿠바 신청서와 동일합니다) 메소드 명 'placeOrder'와 입력 매개 변수 우리가해야 할 placeOrder에 대한 주문 항목 모음을 전달합니다 또한 invokeService () 메소드에 대해 cancelOrder ()를 호출합니다 order

id를 입력 매개 변수로 전달하십시오 이제 MenuItems 브라우저를 업데이트 해 보겠습니다 그래서 그것은 주문할 수 있습니다 menu-items-browsecomponent

html을 열자 그 내용을 다음 코드로 대체하십시오 menu-items-browsecomponentts를 엽니 다

그 내용을 다음으로 대체하십시오 addToCart ()와 같은 여러 메소드를 추가했습니다 이 메소드는 메뉴 항목을 허용합니다 동일한 메뉴 항목을 참조하는 주문 항목이있는 경우 OrderItem 클래스의 Quantity 필드 값을 늘리면됩니다 또는 주어진 메뉴 항목에 대한 주문 항목이없는 경우, 그런 다음 새로운 주문 항목을 만듭니다

수량을 하나로 설정하고 OrderItems] 렉션에 추가하십시오 장바구니에서 주문 항목을 제거 할 수 있습니다 그리고 orderService의 placeOrder () 메소드를 호출하는 순서를 지정합니다 그런 다음 주문 항목을 빈 콜렉션으로 설정합니다 또한 메소드가 있습니다

추가 된 모든 주문 항목의 총 금액을 계산합니다 우리는이 사용자 카트를 저장하려고합니다 저장소에 저장하고이 메소드를 구현해야합니다 StorageService를 열고 다음 메소드를 추가하십시오 또한 하나의 상수

이 메소드는 현재 사용자와 동일하지만 cartItemsKey 접두사와 사용자 ID를 사용하여 장바구니 항목 키를 만듭니다 그래서 각 사용자는 자신의 카트를 가지고 있습니다 또한 우리는 제공자에게 OrderService를 추가하여 주사가 가능하도록해야합니다 appmodule

ts 파일을 엽니 다 ProviderService 속성에 OrderService를 추가합니다 자, 우리의 응용 프로그램을 다시 시작합시다 이제 응용 프로그램을 엽니 다 '로그인'을 클릭하십시오

이제 카트가 보입니다 메뉴 항목을 추가 할 수 있습니다 그런 다음 '주문하기'를 클릭하십시오 그리고 다시, 우리는 메뉴 항목을 추가 할 수 있고, 우리는 총 가격을 볼 수 있고, 주문할 수 있습니다 추가해야 할 마지막 사항은 사용자의 주문을 검토하는 기능입니다

이를 위해 나머지 쿼리를 생성합니다 사용자 로그인별로 주문을 필터링합니다 Studio로 이동하십시오 데이터 모델 섹션을 엽니 다 주문 엔터티를 선택하십시오

새로 작성 → REST 조회를 누르십시오 이름 설정 : user-orders-query 보기 설정 : 주문보기 JPQL 쿼리를 설정합니다 사용자 로그인이 userLogin 매개 변수와 같은 위치에서 주문을로드하려고합니다

이 매개 변수를 추가해 보겠습니다 이름 : userLogin 유형 : 문자열 '확인'을 클릭하십시오 이제 쿠바 응용 프로그램을 다시 시작해야합니다

이제 Angular 응용 프로그램으로 이동하십시오 OrderService를 엽니 다 내용을 다음 내용으로 대체하십시오 나는 UserService와 getOrders () 메소드를위한 injectin을 추가했다 getOrders () 메소드는 CubaApp에서 query 메소드를 호출합니다

ORDER_ENTITY_NAME과 (와) 질의 이름 전달 userLogin 매개 변수의 값으로 따라서이 사용자 로그인 정보는 user-orders-query 매개 변수와 같은 이름입니다 이제 주문을 표시 할 새 구성 요소를 만들어 보겠습니다 이름 설정 : 주문 HTML 템플리트를 다음 템플리트로 대체합시다 그냥 간단한 테이블

스타일을 추가하십시오 그리고 구성 요소 컨텐츠를 다음 데이터로 대체하십시오 loadOrders () 메서드가 있습니다 OrderService에서 getOrders () 메소드를 호출합니다 cancelOrder () 메소드를 호출 한 cancel 메소드가 있습니다

그리고 우리는 주문의 총 가격을 계산하는 방법을 가지고 있습니다 이제 라우팅 규칙을 추가해 보겠습니다 우리가 할 수있게 ordercompontnes로 이동하십시오 app-routing

modulets 파일을 엽니 다 'Orders'경로는 OrdersComponent를 엽니 다 페이지를 다시 시작해 보겠습니다 로그인하여 주문을 탐색하고 생성 된 두 개의 주문을 볼 수 있습니다

그리고 우리 둘 중 하나, 둘 다 취소 할 수 있습니다 웹 세미나의 주요 목표에 도달했습니다 우리는 REST API 메소드를 살펴보고 Angular 애플리케이션에서이를 실행할 수있는 방법을 살펴 보았습니다 cuba-rest-js 라이브러리를 사용하여 REST API 사용을 용이하게합니다 보고 주셔서 감사합니다!