이것은 NestJS와 Angular 11을 사용한 파일 업로드 예제 의 두 번째 부분 — Part 1 입니다. 이 기사에서는 Angular 11을 사용하여 클라이언트 애플리케이션을 만드는 방법에 대해 이야기하겠습니다.

Angular CLI를 사용하여 새 Angular 애플리케이션 생성

• 이전 기사에서 언급했듯이 Angular CLI가 설치되어 있어야 합니다.
• 그런 다음 아래 명령을 눌러 새 Angular 응용 프로그램을 만듭니다.
• auto-frontend 는 내 응용 프로그램 이름입니다.

Angular 애플리케이션 실행

• 자동차 프론트엔드 디렉토리로 이동합니다.
• 그런 다음 아래 명령을 눌러 응용 프로그램을 실행하십시오.

• 이제 클라이언트 응용 프로그램이 포트 4200에서 실행되고 기본 페이지가 표시됩니다.

• 기본 고정 탐색 모음을 사용하고 탐색 모음 구성 요소 가 이를 처리합니다.
• 홈 구성 요소는 라우팅 부모 구성 요소로 사용됩니다

• 이 응용 프로그램에 대한 몇 가지 구성 요소를 만들 것입니다.

• 저는 home, navbar 및 upload라는 세 가지 구성 요소를 만들 것입니다.
• 홈 구성요소를 작성하십시오 .

• 업로드 구성 요소 만들기

• 탐색 모음 구성 요소 만들기

• 위의 구성 요소를 만들 때 테스트를 건너뛰었습니다.

• 위의 스크린샷은 우리가 만든 모든 구성 요소와 선택기를 보여줍니다(선택기 이름은 변경할 수 있습니다. 하지만 기본 선택기를 사용하겠습니다.
• 앱 홈
• 앱 탐색 모음
• 앱 업로드

• 이 응용 프로그램에서 간단한 부트스트랩 템플릿을 사용하고 있습니다.
• 그래서 부트스트랩을 설치해야 합니다.
• Bootstrap을 설치하거나 ng-bootstrap을 사용할 수도 있습니다. 그러나 나는 오래되었지만 사용하기 쉬운 Bootstrap 3을 사용하고 있습니다. 원하는 버전을 사용할 수 있습니다.

• 그런 다음 @import "~bootstrap/dist/css/bootstrap.css"를 추가하십시오. styles.css 파일에
• 이 프로젝트에 jquery를 추가하지 않을 것입니다.

• 기본 부트스트랩 탐색 모음 템플릿을 사용하겠습니다.

• 앞으로 이 탐색 모음에 더 많은 것을 추가할 것입니다.
• 보시다시피 라우터 링크 를 사용 하여 업로드 구성 요소를 라우팅했습니다.
• 다음은 app-routing.module.ts 파일입니다.
• 이 파일에서 업로드 구성 요소에 대한 경로를 만들었습니다.
• 그런 다음 /upload 는 업로드 구성 요소로 라우팅됩니다.

• 홈 구성 요소는 라우팅에 사용됩니다.
• 탐색 모음을 제외한 다른 모든 구성 요소는 홈 구성 요소 내부에 있습니다.
• home.component.ts 파일은 변경할 필요가 없습니다.
• 다음 행을 home.component.html 파일에 추가하기만 하면 됩니다.

업로드 기능 추가

• 사용자가 탐색 모음에서 업로드 파일을 클릭하면 업로드 구성 요소가 사용자를 데려갑니다.
• 업로드 구성 요소에서 파일 업로드 양식과 해당 기능을 처리하겠습니다.
• 상기 봐 upload.component.html의 파일

• 여기서는 간단한 반응형을 사용하고 있습니다.
• 이제 upload.component.ts 파일이 어떻게 생겼는지 확인하십시오 .

• HttpClient는 파일 업로드를 위한 백엔드 API를 호출하는 데 사용되며 백엔드 서비스도 시작해야 합니다. 백엔드 서비스는 포트 3000 (http://localhost:3000/api/vehicles/upload)에서 실행됩니다.
• 이 작업을 수행하려면 app.module.ts 에서 사용된 모듈을 가져와야 합니다.

• 이제 우리는 모두 출시할 준비가 되었습니다.
• 의심스럽거나 빠진 부분이 있으면 이 기사의 끝에 주어진 Github 링크를 확인하십시오.

• 히트는 -o 역할을 NG 응용 프로그램을 실행 할 수 있습니다.
• 이제 UI가 다음과 같이 보일 것입니다.

• 이제 CSV 파일(이미 GIT 저장소에서 CSV 파일을 공유함)을 선택하고 업로드하여 모든 것이 제대로 작동하는지 확인할 수 있습니다.
• 콘솔에서 오류가 있는지 확인할 수 있으며 오류가 발생하면 내 코드로 코드를 확인하십시오.
• 다음은 전체 프로젝트 의 Github 저장소에 대한 링크 입니다.

NestJS 및 Angular 11을 사용한 파일 업로드 예제 — 2부