동물원 블로그 웹 앱
ASP Net.Core MVC 웹 앱 MSSQL EF6 ID 및 BOOSTRAP을 사용하는 웹 앱
스크롤하고 Animel을 선택하여 탐색하고 댓글을 달 수있는 메인 카탈로그 페이지
에 대한
이 ASP.netCore 웹 앱은 하나의 레이아웃보기가있는 MVC 패턴을 보여줍니다. 네비브 바와 렌더 렌드 본문이 다른 뷰와 컨트롤러가 포함되어 있습니다. 나는 애니 멜로가 부스트 랩 리바리를 사용하여 페이지와 스타일 사이에 Divs를 더 많이 탐색하도록하기 위해 하나의 뷰 구성 요소를 포함시켰다.
모델 (Entity Framwork Core)
MSSQL 다이어그램
내 모델에는 카테고리, 동물 및 댓글의 3 개의 개체가 포함되어 있습니다. 나는 그들 각각을 REGEX 패턴, 데이터 유형 사용자 정의 Messege 오류 등을 포함한 몇 가지 제안 및 피팅 검증 속성을 제공했습니다. 두 가지 사용자 정의 vlidation 속성을 만들었습니다.
- 동물을 검증하기위한 생년월일은 150 년 미만이며 현재 또는 그 이전에 태어났습니다.
- 파일의 컨텐츠 유형에 "이미지"라는 단어가 포함 된 경우 wether를 확인하는 파일 유효성 검사기와 파일의 크기는 10MB로 제한됩니다.
| 공개 클래스 imageFileValidationAttribute : ValidationAttribute |
| { |
| const int max_file_size = 10 * 1024 * 1024 ; // 10MB |
| Protected Override ValidationResult ? isvalid ( 개체 ? 값 , validationContext validationContext ) |
| { |
| if ( 값 은 iformfile 파일 입니다 ! = 기본값 ) |
| { |
| if ( 파일 . 길이 > max_file_size ) |
| 새로운 ValidationResult를 반환합니다 ( "이 파일의 크기는 10MB 제한보다 큽니다" ) ; |
| if ( file . contenttype . contains ( "image" ) ) |
| Return validationResult . 성공 ; |
| 새 ValidationResult를 반환합니다 ( "이것은 유효한 파일이 아닙니다" ) ; |
| } |
| 새 ValidationResult를 반환합니다 ( "유효한 이미지 파일을 입력하십시오" ) ; |
| } |
| } |
카테고리를 생성하기 위해 데이터베이스에 매핑되지 않은 열거 헬퍼 모델을 만들었지 만 적절한 Select Tag를 생성하는 데 사용합니다.
모델 프로젝트에는 ID가 유형 인 Guid 인 각 엔터티에 대한 데이터 액세스 계층 일반 기본 반복 클래스와 이미지 파일을 바이트 배열로 저장하고 클라이언트 측에서 이미지를 다시 생성하는 데 도움이되는 이미지 형성 서비스가 포함되어 있습니다.
| public static byte [ ] formfiletobytearray ( formfile formfile ) |
| { |
| if ( formfile ! = null ) |
| { |
| MemoryStream MemoryStream = New MemoryStream ( ) ; |
| formfile . OpenReadStream ( ) . COPYTO ( MemoryStream ) ; |
| 바이트 [ ] rawData = MemoryStream . toArray ( ) ; |
| RawData를 반환합니다 . |
| } |
| 반환 기본값 ; |
| } |
| public static string formatrawdatatoimage ( byte [ ] imagesfiledata ) |
| { |
| if ( imagesFiledata ! = null ) |
| 반환 "데이터 : image; base64," + convert . Tobase64String ( ImagesFiledata ) ; |
| 반환 기본값 ; |
| } |
| |
| } |
보다
컨트롤러, 하나의 뷰 구성 요소 및 레이아웃 스타일 및 스크립트에 대한 3 개의 유용한 부분보기 및 Nav Bar는 NAV 막대가 다른 뷰와 동작 사이를 탐색하는 데 사용됩니다.
앱의 NAV 막대
생성 및 업데이트의 관리자보기에는 브라우저에 오류가 발생하지 않도록 파일 유형 및 IT 크기의 Vannila JS 유효성 검사가 포함되어 있습니다.
| fileInput . addeventListener ( "Change" , function ( ) { |
| Filesize = this . 파일 [ 0 ] . 크기 ; |
| if ( this . files [ 0 ] === 정의되지 않은 || filesize === 정의되지 않은 ) { |
| 이것 . setCustomValidity ( "파일을 입력하십시오" ) ; |
| 이것 . reportValidity ( ) ; |
| 반품 ; |
| } |
| if ( filesize > maxFilesize ) { |
| 이것 . setCustomValidity ( "이 파일은 10MB보다 큽니다" ) ; |
| 이것 . value = "" ; |
| 이것 . reportValidity ( ) ; |
| 반품 ; |
| } |
| if ( ! validFileType ( this . files [ 0 ] ) { |
| 이것 . setCustomValidity ( "이것은 이미지 파일이 아닙니다" ) ; |
| 이것 . value = "" ; |
| 이것 . reportValidity ( ) ; |
| 반품 ; |
| } |
| if ( filesize < maxfilesize ) { |
| 이것 . setCustomValidity ( "" ) ; |
| 이것 . reportValidity ( ) ; |
| } |
| } ) ; |
컨트롤러
이 프로젝트에는 4 개의 컨트롤러가 포함되어 있습니다.
- 홈 - 가장 많이 댓글이 많은 두 동물을 표시합니다
- 관리자 - 동물 데이터의 CRUD 작업 처리
- 카탈로그 - 블로그에서 동물을보고 카테고리별로 정렬 할 수 있습니다.
- Animel Data- 동물 세부 사항을 탐색하고 사용자가 의견을 남기도록합니다. 댓글 게시는 Fetch API를 사용하여 사용자가 주석을 게시 할 때마다 페이지가 relload를 방지합니다.
| 비동기 기능 AddComment ( 이벤트 ) { |
| 의견을 보자 = { |
| commentid : 정의되지 않은 , |
| 내용 : ContentTextArea . 값 , |
| animelid : id , |
| } |
| 댓글 = json . stringify ( 댓글 ) ; |
| Fetch ( ` $ { baseurl } / index` , { |
| 방법 : 'post' , |
| 바디 : 댓글 , |
| 헤더 : { |
| "Content-Type" : "Application/JSON" |
| } |
| } ) . 그런 다음 ( ( ) => { getAllComments ( ) ; } ) ; |
| } |
안녕하세요 세계 코멘트
인증 && 승인 (신원)
웹 애플리케이션에서 사용자를 인증하고 승인하기 위해 Identity Nuget 및 Seperate Context를 사용하여 앱에 LoginModel 및 SignupModel이라는 모델 도우미가 핸드에 등록하고 로그인했습니다. 3 가지 유형의 사용자 "admin", "user"Adn Anonymous가 있습니다. 관리자 역할은 관리자 컨트롤러를 사용할 수 있으며 앵커 NAV-Link가 생성 및 업데이트를 위해 Nav-Link를 가지고 있습니다. 서명 된 모든 사용자는 응용 프로그램의 동물에 대해 댓글을 달 수 있습니다 (관리자 포함). 익명 사용자는 Animels 카탈로그 페이지를 스크롤하거나 등록/로그인 만 스크롤 할 수 있습니다.
행동 등록 :
| [ httppost ] |
| [ validateAntiforgeryToken ] |
| 공개 비동기 작업 <IACTICERSULT> 레지스터 ( SignupModel user ) |
| { |
| if ( modelstate . isvalid ) |
| { |
| IdentityUser iduser = 새로운 IdentityUser |
| { |
| 사용자 이름 = 사용자 . 사용자 이름 , |
| phoneNumber = 사용자 . 전화기 , |
| 이메일 = 사용자 . 이메일 |
| } ; |
| var createresult = await _usermanager . CreateAsync ( iduser , user . password ) ; |
| var addrole = await _userManager . AddTorOleAnc ( Iduser , "User" ) ; |
| if ( Createresult . 성공 ) |
| { |
| var signupresult = await _signinmanager . PasswordSigninAsync ( user . username , user . password , false , false ) ; |
| if ( signupresult . 성공 ) |
| { |
| return retirecttoaction ( "index" , "home" ) ; |
| } |
| 리턴 로그인 ( ) ; |
| } |
| } |
| return view ( ) ; |
| } |
단위 테스트
이 웹 앱 솔루션에는 리포지토리 레이어 검사를위한 테스트의 하나의 XUnit 프로젝트가 포함되어 있으며 동기화 및 비동기 방법 모두에 대한 reposiroeybase 클래스를 검증합니다.
Test example :
| [ 테스트 , 요구 사항 ] |
| 공개 void findbyidasync ( ) |
| { |
| _categoryrepository ? . 작성 ( CategoryTest ! ) ; |
| _animelrepository ? . 창조 ( animeltest ! ) ; |
| _commentRepository ? . 작성 ( CommentTest ! ) ; |
| |
| Task <emale> animelfound = _animelrepository ! . FindByIdasync ( animeltest !. id ) ; |
| 애니메이션 . 연속성 ( _ = > { assert . that ( animelfound . 결과 , equalto ( animeltest ) ) ; } ) ; |
| Task <emale> animelnotfound = _animelrepository . FindByIdasync ( do_not_insret_animel !. id ) ; |
| animelnotfound . 연속성 ( _ => { assert . that ( animelfound . result , is . null ) ; } ) ; |
| Task <comment> commentFound = _commentRepository ! . FindByIdasync ( CommentTest !. CamilSid ) ; |
| 댓글 찾기 . ContinueWith ( _ = > { assert . that ( commentFound . 결과 , equalTo ( commentTest ) ) ; } ) ; |
| Task <Category> CategoryFound = _CategoryRepository ! . FindByIdasync ( CategoryTest !. CategoryId ) ; |
| 카테고리 파운드 . 연속성 ( _ => { assert . that ( categoryFound . result , is . equalTo ( categorToryTest ) ) ; } ) ; |
| } |
