Zoo Blog

تطبيق ويب حديقة الحيوان

ASP Net.core MVC Web App باستخدام هوية MSSQL EF6 و Boostrap

صفحة الكتالوج الرئيسية حيث يمكنك التمرير واختيار Animel لاستكشاف والتعليق

عن

يوضح تطبيق الويب ASP.NETCORE هذا نمط MVC مع عرض تخطيط واحد يحتوي على شريط NAV و RENDEND Body مع وجهات نظر وأجهزة التحكم difrrent. لقد قمت بتضمين مكون عرض واحد من أجل الحفاظ على الرسوم المتحركة لاستكشاف DIVs أكثر شيوعًا بين الصفحات وتصميمها باستخدام boostrap libary

النموذج (CHITITY Framwork Core)

مخطط MSSQL

يحتوي النموذج الخاص بي على 3 كائنات: الفئة والحيوان والتعليق. أعطيت كل منها العديد من المراكز وسمات التحقق من الصحة المناسبة بما في ذلك أنماط regex ، وأخطاء messege نوع البيانات ، إلخ.

1. إن توليد المواليد للتحقق من صحة الحيوان أقل من 150 عامًا وولد في اليوم الحالي أو قبل ذلك
2. مصلح الملف للتحقق من Wether إذا كان نوع محتوى الملف يتضمن كلمة "صورة" وحجم الملف يقتصر على 10 ميجابايت

حديقة الحيوان/النموذج/النماذج/السمات/imageFileValidationAttribute.cs

الخطوط 11 إلى 26 في 0A94861

	الفئة العامة ImageFileValidationAttribut​​
	{
	const int max_file_size = 10 * 1024 * 1024 ؛ // 10 ميجابايت
	تحميص التحقق من صحة التجاوز ؟ isValid ( الكائن ؟ القيمة ، ValityContext ValidationContext )
	{
	إذا ( القيمة هي ملف iformfile ! = افتراضي )
	{
	إذا ( الملف . الطول > max_file_size )
	إرجاع التحقق من الصحة الجديدة ( "حجم هذا الملف أكبر من الحد 10 ميغابايت" ) ؛
	if ( file . contentType . يحتوي على ( "صورة" ) )
	إرجاع التحقق من الصحة . نجاح ؛
	إرجاع التحقق من الصحة الجديدة ( "هذا ليس ملفًا صالحًا" ) ؛
	}
	إرجاع التحقق من الصحة الجديدة ( "الرجاء إدخال ملف صورة صالح" ) ؛
	}
	}

من أجل إنشاء الفئات التي قمت بها بإنشاء نموذج مساعد التعداد لا يتم تعيينه في قاعدة البيانات ولكني أستخدمه لإنشاء علامة تحديد ملائمة

يحتوي مشروع النموذج أيضًا على فئة REPSOITION الأساسية للوصول إلى طبقة البيانات لكل كيان يكون معرفه من نوع GUID وخدمة واحدة من تكوين الصور والتي تساعدني على حفظ ملفات الصور كمصفوفة وإنشاء الصورة مرة أخرى على جانب العميل

حديقة الحيوان-المجلس/النموذج/الخدمات/الصور

الخطوط 29 إلى 39 في 4CB7B9C

	البايت الثابت العام [ ] formfiletobytearray ( formfile formfile )
	{
	إذا ( formfile ! = null )
	{
	MemoryStream MemoryStream = New MemoryStream ( ) ؛
	formfile . OpenReadStream ( ) . copyto ( MemoryStream ) ؛
	بايت [ ] rawData = MemoryStream . tararray ( ) ؛
	إرجاع Rawdata ؛
	}
	إرجاع الافتراضي ؛
	}

حديقة الحيوان-المجلس/النموذج/الخدمات/الصور

الخطوط 83 إلى 90 في 4CB7B9C

	السلسلة الثابتة العامة formatrawdatatoImage ( Byte [ ] ImagesFiledata )
	{
	if ( picturesfiledata ! = null )
	إرجاع "البيانات: الصورة ؛ base64 ،" + تحويل . Tobase64String ( ImagesFileData ) ؛
	إرجاع الافتراضي ؛
	}
	}

منظر

لقد قمت بإنشاء العديد من المشاهدات لوحدات التحكم ، ومكون عرض واحد و 3 طريقة عرض جزئية مفيدة لأنماط التخطيط والبرامج النصية وشريط NAV يستخدم شريط NAV للتنقل بين طرق العرض والإجراءات المختلفة

شريط NAV التابع للتطبيق

تحتوي طريقة عرض المدير للإنشاء والتحديث على التحقق من صحة Vannila JS من نوع الملف وحجم تكنولوجيا المعلومات من أجل منع المتصفح لرمي خطأ

Zoo-blog/zoo/wwwroot/scripts/animelCreateFormValidator.js

الخطوط 23 إلى 46 في A257D54

	FileInput . addeventListener ( "Change" ، function ( ) {
	دع الملفات = هذا . الملفات [ 0 ] . مقاس ؛
	if ( this . files [ 0 ] === undefined || filesize === undefined ) {
	هذا . setCustomValidity ( "الرجاء إدخال ملف" ) ؛
	هذا . reportValidity ( ) ؛
	يعود ؛
	}
	if ( filesize > maxfilesize ) {
	هذا . setCustomValidity ( "هذا الملف أكبر من 10 ميغابايت" ) ؛
	هذا . القيمة = "" ؛
	هذا . reportValidity ( ) ؛
	يعود ؛
	}
	if ( ! ValidFileType ( هذا . الملفات [ 0 ] ) ) {
	هذا . setCustomValidity ( "هذا ليس ملف صورة" ) ؛
	هذا . القيمة = "" ؛
	هذا . reportValidity ( ) ؛
	يعود ؛
	}
	if ( filesize < maxfilesize ) {
	هذا . setCustomValition ( "" ) ؛
	هذا . reportValidity ( ) ؛
	}
	} ) ؛

وحدات التحكم

يحتوي هذا المشروع على 4 وحدات تحكم:

1. الصفحة الرئيسية - عرض الحيوانات الأكثر تعليقا
2. المدير - التعامل مع عملية CRUD على بيانات الحيوانات
3. كتالوج - عرض الحيوانات في المدونة ويمكن فرزها حسب الفئة
4. بيانات الرسوم المتحركة - استكشف تفاصيل الحيوانات واسمح للمستخدم بترك تعليق. يستخدم التعليق على واجهة برمجة تطبيقات Fetch من أجل منع الصفحة في كل مرة ينشر المستخدم تعليقًا.

Zoo-blog/Zoo/wwwroot/scripts/commentFetch.js

الخطوط 39 إلى 53 في 4CB7B9C

	وظيفة AddComment ( حدث ) { حدث) {
	دع التعليق = {
	CommentId : غير محدد ،
	المحتوى : ContentTextarea . قيمة ،
	Animelid : ID ،
	}
	التعليق = JSON . stringify ( تعليق ) ؛
	انتظر الجلب ( ` $ { baseurl } /index` ، {
	الطريقة : "بعد" ،
	الجسم : تعليق ،
	الرؤوس : {
	"نوع المحتوى" : "التطبيق/json"
	}
	} ) . ثم ( ( ) => { getAllComments ( ) ؛ } ) ؛
	}

مرحبا تعليق العالم

المصادقة && إذن (الهوية)

لقد استخدمت Nuget Identity و Seperate Context من أجل مصادقة المستخدمين في تطبيق الويب الخاص بي وتسجيله وتسجيله في Handels من قبل مساعدين النماذج المسمى LoginModel و SignupModel في التطبيق هناك 3 أنواع من المستخدمين "Admin" ، "المستخدم" مجهول الهوية. يمكن لدور المدير استخدام وحدة تحكم المدير ولديه مرساة Nav-Link لإنشاء وتحديث. يمكن لكل مستخدم موقّع التعليق على الحيوانات في التطبيق (بما في ذلك المديرين). لا يمكن للمستخدم المجهول فقط التمرير عبر صفحة كتالوج الرسوم أو تسجيل/تسجيل الدخول.

تسجيل الإجراء:

حديقة الحيوان المجلس الظهر/حديقة الحيوان/وحدات التحكم/USERCONTROLLER.CS

الخطوط 49 إلى 74 في 3516965

	[ httppost ]
	[ ValidateantiforgeryToken ]
	مهمة ASYNC العامة <IaCtionResult> التسجيل ( مستخدم SignUpModel )​​
	{
	if ( modelState . isValid )
	{
	IDESSER IDUSER = New IdentityUser
	{
	اسم المستخدم = المستخدم . اسم المستخدم ،
	PhonEnumber = المستخدم . رقم التليفون ،
	البريد الإلكتروني = المستخدم . بريد إلكتروني
	} ؛
	var createresult = في انتظار _Usermanager . CreateAsync ( iduser ، المستخدم . كلمة المرور ) ؛
	var addRole = في انتظار _Usermanager . AddToroleAsync ( iduser ، "user" ) ؛
	إذا ( createresult . نجح )
	{
	var signupResult = في انتظار _signinmanager . passillsigninasync ( المستخدم . اسم المستخدم ، المستخدم . كلمة المرور ، خطأ ، خطأ ) ؛
	إذا ( signupresult . نجح )
	{
	إعادة التوجيه ( "الفهرس" ، "الصفحة الرئيسية" ) ؛
	}
	إعادة تسجيل الدخول ( ) ؛
	}
	}
	إرجاع عرض ( ) ؛
	}

اختبار الوحدة

يتضمن حل تطبيق الويب هذا مشروع Xunit واحد للاختبار لفحص طبقة المستودع والتحقق من صحة فئة reposiroeybase لكل من طرق Sync و Async.

مثال اختبار:

حديقة الحيوان المجلس الظهر/unittesting/asyncrepositorytest.cs

الخطوط 129 إلى 144 في 286b0d8

	[ الاختبار ، متطلبات ]
	الفراغ العام findbyidasync ( )
	{
	_CategoryRepository ؟ . إنشاء ( فئة ! ) ؛
	_animelrepository ؟ . إنشاء ( animeltest ! ) ؛
	_commentRepository ؟ . إنشاء ( CommentTest ! ) ؛
	المهمة <imation> Animelfound = _animelrepository !​​ . FindByidAsync ( animeltest !. id ) ؛​
	الرسوم المتحركة . continuewith ( _ = > { Assert . that ( animelfound . النتيجة ، IS .​​​​​​​
	المهمة <imanation> animelnotfound = _animelRepository .​​ findbyidasync ( do_not_insret_animel !. id ) ؛​
	animelnotfound . continuewith ( _ => { Assert . that ( animelfound . result ، IS . null ) ؛ } ) ؛
	المهمة <some> commentFound = _commentRepository !​​ . FindByidAsync ( CommentTest !. commentId ) ؛​
	تعليق . continuewith ( _ = > { Assert . that ( commentFound . النتيجة ، IS .​​​​​​​
	المهمة <category> categoryfound = _categoryRepository !​​ . FindByidAsync ( فئة !. فئة ) ؛​
	فئة . continuewith ( _ = > { Assert . that ( categoryfound . result ، is .​​​​​​​
	}