프런트엔드 UI에 Angular 버전 8을 사용하고 백엔드 웹 API에 Asp.Net Core를 사용하는 관리 시스템입니다.
이는 개념을 더 큰 프로젝트로 확장하는 방법을 보여주는 프로젝트입니다. Angular 및 ASP.Net Core를 사용하여 양식 유효성 검사를 수행하는 직원 관리 시스템입니다. 개념은 인기 있는 JavaScript 프레임워크를 C#/ASP.Net Core와 익히고 결합하는 동시에 향후 기능 구현을 위한 API 버전 관리, 컨트롤러 엔드포인트 테스트 및 설정 통합 테스트를 제공하는 것입니다.
Auto Mapper를 사용하는 데이터 전송 개체(Dtos)를 사용하면 Api의 DataEntities
디렉터리에 있는 원본 엔터티 클래스를 특정 작업(즉, 가져오기, 생성 및 편집)을 위한 클래스로 보호하고 매핑합니다.
애플리케이션은 다음 도구 및 프레임워크를 사용하여 구축되었습니다.
C#/ASP.Net 코어 2.2
각도 버전 8.3
부트스트랩 4
SQL Server 또는 PostgreSQL 데이터베이스(DbContext 클래스에서 쉽게 구성)
이 프로젝트에는 Swagger를 사용하는 내장 API 엔드포인트 테스트가 포함되어 있습니다. 이는 시작 시 사용할 서비스 구성 및 IConfiguration 모두의 Startup.cs
클래스에서 설정되었습니다. 로컬 환경에서 프로젝트를 시작한 후 https://localhost:5001/swagger
로 이동하여 테스트 인덱스 페이지를 봅니다.
이 애플리케이션을 테스트/사용하려면 다음이 필요합니다.
Asp.Net Core 2.0 SDK, 바람직하게는 2.2.1
Node.js 버전 8 이상
각도 CLI
Microsoft SQL Server 또는 PostgreSQL용 pgAdmin
zip 파일을 다운로드하거나 프로젝트를 복제하여 저장소를 가져옵니다.
파일을 복제하거나 압축을 푼 후 솔루션 파일이 포함된 디렉터리로 이동합니다.
~$ cd src/EmployeeManager/
어느 순서로든 클라이언트 또는 API/서버측 파일로 이동하여 해당 종속성을 설치합니다. 다시 한 번 .Net Core 2.2 SDK와 함께 Node.js 및 npm
설치해야 합니다.
클라이언트 측 종속성의 경우:
~$ cd src/EmployeeManager/client~$ npm 설치
@angularcli
도 설치되어 있는지 확인하세요.
# Angular~$ npm install -g @angular/cli @angular/core
서버 측 코드의 경우 종속성 및 NuGet 패키지를 빌드하고 복원합니다.
~$ cd src/EmployeeManager/서버/~$ dotnet 복원
클라이언트 측에서 로컬 환경을 실행하려면: ../client
디렉토리에 있는 터미널/명령 상자에서 npm
스크립트 명령을 사용하십시오.
# Angular 클라이언트의 경우~$ ng 빌드 -옵션
이것은 angular.json
스크립트를 통해 API의 wwwroot
디렉터리에 축소된 JavaScript 파일을 출력합니다.
서버 측에서 로컬 환경을 실행하려면: dotnet
도구를 사용하여 터미널에서 실행하거나 Visual Studio를 사용하여 CTL
+ F5
로 실행하세요.
현재 실행 중인 빌드를 확인하려면 브라우저에서 localhost:5001
(또는 )로 이동하세요.
권한 부여 및 로그인을 추가합니다.
직원 이름으로 검색을 활성화합니다.
ApiVersion 2(예: api/v2/endpoint) 아래 컨트롤러 끝점 클래스의 업데이트 작업에는 AutoMapper가 EmployeeDto
를 EmployeeUpdateDto
에 바인딩할 수 없기 때문에 서버에 성공적인 요청을 보내는 데 문제가 있어 대신 컨텍스트 클래스를 사용하고 있습니다. 버전 1의 /v1/...
경로 아래에 있습니다. (문제가 해결되었습니다)