Zoo Blog

ZOO-BLOG WEB應用程序

ASP Net.Core MVC Web應用使用MSSQL EF6身份和Boostrap

主目錄頁面，您可以在其中滾動並選擇Animel探索和評論

關於

此ASP.NETCORE Web應用程序使用一個佈局視圖演示了MVC模式，其中包含帶有不同視圖和控制器的NAV欄和渲染器主體。我加入了一個視圖組件，以使Animels探索Divs在頁面之間更為常見，並使用Boostrap Libary進行樣式

模型（實體框架核心）

MSSQL圖

我的模型包含3個對象：類別，動物和評論。我給了他們的每一個預言和擬合驗證屬性在內

1. 驗證動物的生日少於150年，目前出生
2. 文件驗證器以檢查文件的內容類型是否包含“圖像”一詞，並且文件的大小限制為10MB

Zoo-Blog/model/model/屬性/imageFileValidationAttribute.cs

第11至26行，0A94861

	公共類ImageFileValidationAttribute ：驗證attribute
	{
	const int max_file_size = 10 * 1024 * 1024 ; // 10MB
	受保護的驗證驗證？ iSvalid （ object ？ value ， validationContext驗證context ）
	{
	if （ value是iformfile文件！=默認值）
	{
	if （文件。長度> max_file_size ）
	返回新的驗證重點（ “此文件的大小大於10MB限制” ） ；
	if （ file。contentType 。包含（ “ image ” ） ）
	返回驗證。成功;
	返回新的驗證result （ “這不是有效的文件” ） ;
	}
	返回新的驗證result （ “請輸入有效的映像文件” ） ;
	}
	}

為了生成類別，我製作了一個枚舉助手模型，該模型未映射到數據庫，但我用來生成適當的選擇標籤

該模型項目還包含每個ID的數據訪問層通用基礎存儲套件類別的ID屬於類型GUID和一項圖像形式的服務，這有助於我將圖像文件保存為字節陣列，並將映像重新生成客戶端端

ZOO-BLOG/MODEL/SERVICES/imagsFormater.cs

4CB7B9C中的第29至39行

	公共靜態字節[ ] formFiletobyTearray （ FormFile formFile ）
	{
	如果（ formFile ！= null ）
	{
	memoryStream MemoryStream = new MemoryStream （ ） ;
	formfile 。 OpenReadStream （ ） 。 copyto （ memorystream ） ;
	byte [ ] rawdata = memorystream 。 toarray （ ） ;
	返回rawdata ;
	}
	返回默認值；
	}

ZOO-BLOG/MODEL/SERVICES/imagsFormater.cs

4CB7B9C中的第83至90行

	公共靜態字符串格式圖（字節[ ] imagesfiledata ）
	{
	如果（ imagesFileData ！= null ）
	返回“數據：圖像; base64”， +轉換。 tobase64String （ ImagesFileData ） ;
	返回默認值；
	}
	}

看法

我為控制器創建了幾個視圖，一個視圖組件和3個有用的部分視圖，用於佈局樣式和腳本和NAV BAR。 NAV欄用於在不同的視圖和操作之間導航

應用程序的導航欄

創建和更新的管理器視圖包含文件類型的Vannila JS驗證和大小，以防止瀏覽器丟棄錯誤

ZOO-BLOG/ZOO/wwwroot/scripts/animeLcreateformvalidator.js

A257D54中的第23至46行

	fileInput 。 AddEventListener （ “ change” ， function （ ） {
	讓Filesize =此。文件[ 0 ] 。尺寸;
	if （ this。files [ 0 ] ===未定義|| filesize === undefined ） {
	這。 setCustomVality （ “請輸入文件” ） ;
	這。 reportVality （ ） ;
	返回;
	}
	如果（ Filesize > MaxFilesize ） {
	這。 setCustomVality （ “此文件大於10MB” ） ；
	這。值= “” ;
	這。 reportVality （ ） ;
	返回;
	}
	如果（ ！
	這。 setCustomVality （ “這不是映像文件” ） ;
	這。值= “” ;
	這。 reportVality （ ） ;
	返回;
	}
	如果（ Filesize < maxfilesize ） {
	這。 setCustomVality （ “” ） ;
	這。 reportVality （ ） ;
	}
	} ） ;

控制器

該項目包含4個控制器：

1. 家 - 展示兩個評論最多的動物
2. 經理 - 處理動物數據的CRUD操作
3. 目錄 - 查看博客中的動物，可以按類別進行排序
4. 動畫數據 - 探索動物的詳細信息，並允許用戶發表評論。評論發布使用fetch API，以防止每次用戶發表評論時頁面重新加載。

ZOO-BLOG/ZOO/wwwroot/scripts/commentfetch.js

4CB7B9C中的第39至53行

	異步函數addComment （ event ） {
	讓評論= {
	評論：未定義，
	內容： ContentTextarea 。價值，
	動畫： id ，
	}
	評論= JSON 。 stringify （註釋） ;
	等待提取（ ` $ { baseurl } /index` ， {
	方法： “帖子” ，
	身體：評論，
	標題： {
	“ content-type” ： “ application/json”
	}
	} ） 。然後（ （ ） => { getAllComments （ ） ; } ） ;
	}

你好世界評論

身份驗證&&授權（身份）

我使用Identity Nuget和單獨的上下文，以便在我的Web應用程序中對用戶進行身份驗證和授權用戶在應用程序中名為LoginModel和IngiupModel在Handels中註冊和彈跳。管理器角色可以使用管理器控制器，並具有錨定NAV-LINK來創建和更新。每個簽名的用戶都可以評論應用程序中的動物（包括經理）。匿名用戶只能滾動瀏覽Animels目錄頁面或註冊/登錄。

註冊行動：

ZOO-BLOG/ZOO/CONTRORTER/USERCONTROLLER.CS

3516965中的第49至74行

	[ httppost ]
	[ varateantiforgerytoken ]
	public sync任務<IrinctionResult> register （ IngiupModel用戶）
	{
	if （ ModelState。iSvalid ）
	{
	Identityuser iduser =新的sidentityuser
	{
	用戶名=用戶。使用者名稱,
	Phonenumber =用戶。 Phonenumber ，
	電子郵件=用戶。電子郵件
	} ;
	var createrult =等待_usermanager 。 createAsync （ iduser ，用戶。密碼） ;
	var addrole =等待_usermanager 。 addtoroleasync （ iduser ， “用戶” ） ;
	如果（ Createrult。Susported ）
	{
	var Ingresult =等待_signInManager 。 passwordSignInAsync （用戶。用戶名，用戶。密碼， false ， false ） ;
	if （簽名成功）
	{
	返回redirecttoaction （ “索引” ， “ home” ） ;
	}
	返回登錄（ ） ;
	}
	}
	返回視圖（ ） ;
	}

單位測試

此Web應用程序解決方案包括一個Xunit項目，用於用於檢查和驗證reposiroeybase類的同步和異步方法的reposiroeybase類。

測試示例：

ZOO-BLOG/UNITESTENT/asyncrepositoryTest.cs

第129至144行286b0d8

	[測試，需求]
	public void findbyidasync （ ）
	{
	_categoryrepository ？ 。創建（類別測驗！ ） ;
	_animelrepository ？ 。創建（ animeltest ！ ） ;
	_CommentRepository ？ 。創建（評論測試！ ） ;
	任務<Animal> animelfound = _animelrepository ！ 。 findbyidasync （ animeltest ！ 。id ） ;
	動畫。繼續（ _ = > { assert 。
	任務<Animal> AnimelNotFound = _animelrepository 。 findbyidasync （ do_not_insret_animel ！ 。id ） ;
	AnimelNotFound 。繼續（ _ = > { assert 。
	任務<Comment> commentfound = _commentRepository ！ 。 FindbyIdAsync （ rymenttest ！ 。
	評論發現。繼續（ _ = > { assert 。
	任務<Category> categoryfound = _categoryrepository ！ 。 findbyidAsync （ categoryTest ！ 。categoryId ） ;
	類別發現。繼續WASWITH （ _ = > { assert 。
	}