یا اینکه میشود در حین آپلود توسط افزونه هم یک سری توضیحات اضافی رو ارسال کرد:
// JS up.settings.multipart_params = { description: $("#imageDescription").val() }; // C# string description = context.Request.Form["description"];
// JS up.settings.multipart_params = { description: $("#imageDescription").val() }; // C# string description = context.Request.Form["description"];
XmlException Was unhandeled The 'img' start tag on line 1 position 1604 does not match the end tag of 'a'. Line 1, position 1766
PM> Install-Package HtmlAgilityPack
HtmlDocument xhtml = Crawler.GetXHtmlFromUri("http://www.london2012.com/athlete/hadadi-ehsan-1077408/"); HtmlNode tempNode = xhtml.DocumentNode.SelectSingleNode("//table[@class='athleteBio']/tbody/tr[4]");
string temp = tempNode.FirstChild.FirstChild.InnerText.Replace(" ", "").Trim(); athlete.Birthday = DateTime.Parse(temp.Substring(0, 10), new CultureInfo("en-GB"));
tempNode = xhtml.DocumentNode.SelectSingleNode("//div[@class='athletePhotoMedals']/div/div/img"); athlete.LargePhotoUri = tempNode.GetAttributeValue("src", "");
3) اگر دو کامپوننت مجزا (Sibling Component) قصد به اشتراک گذاری اطلاعاتی را داشتند تکلیف چیست؟ (هر چند با استفاده از یک کامپوننت Parent مشترک مقدور میباشد)
استفاده از Event Bus:
با استفاده از EventBus، بسیاری از معایب مطرح شده در روش قبلی را نخواهیم داشت:
تعریف Event Bus: یک Design Pattern ^ ,^ می باشد. در Vue.js یک نمونه از vue را بصورت سراسری (global) ایجاد میکنیم و درکامپوننتهایی که نیاز به ارتباط دارند، آن را فراخوانی (import) و با استفاده از متدهای emit$ و on$، ارتباط را ایجاد میکنیم.
یک فایل جاوا اسکریپتی را با نامی دلخواه (eventBus.js) در فولدر src ایجاد میکنیم و یک نمونه از Vue را در آن وهله سازی میکنیم:
import Vue from 'vue' export default new Vue()
در کامپوننت Shop-Button-Add، کد زیر را در قسمت script اضافه میکنیم:
import EventBus from "../eventBus";
کد تابع buttonClicked را بشکل زیر تغییر میدهیم:
buttonClicked() { EventBus.$emit("shop-button-clicked", this.item); }
در کامپوننت App.vue هم کد زیر را در قسمت script اضافه میکنیم:
import EventBus from "./eventBus";
و در تابع mounted که از توابع life cycle مربوط به Vue.js میباشد، کد زیر را اضافه میکنیم:
mounted() { EventBus.$on("shop-button-clicked", item => { this.updateCart(item); }); }
مقایسهی روش استفاده از EventBus با روش قبلی :
مراحل انجام کار در روش قبلی:
دو کامپوننت ارتباط داشتند Shop-Button-Add و App.vue:
1) در کامپوننت Shop-Button-Add با زدن دکمه Add To Cart متد buttonClicked اجرا میشد.
2) متد buttonClicked یک سیگنال به کامپوننت Parent خود (Shop-Item) ارسال مینمود.
this.$emit('button-clicked')
3) در کامپوننت Shop-Item مشخص شده بود در صورت ارسال سیگنال از Shop-Button-Add، متد addToCart اجرا شود.
<Shop-Button-Add @button-clicked="addToCart(item)" :item="item"> <p>Add To Cart</p> </Shop-Button-Add>
4) اجرای متد addToCart در کامپوننت Shop-Item یک سیگنال را به کامپوننت App.vue به همراه دیتای مورد نظر ارسال مینمود.
addToCart(item) { this.$emit('update-cart', item) }
5) در کامپوننت App.vue مشخص شده بود با ارسال سیگنال از کامپوننت Shop-Item، متد updateCart اجرا شود.
<shop-item v-for="item in this.items" :item="item" :key="item.id" @update-cart="updateCart"> </shop-item>
6) در نهایت کار بروزرسانی سبد خرید با اجرای متد updateCart انجام میشد:
updateCart(e) { this.cart.push(e); this.total = this.shoppingCartTotal; }
نتیجه گیری:
مزایای استفاده از Event Bus :
1) کم شدن مراحل ارتباط بین کامپوننتها
2) حل مشکل ارتباطی بین Sibling Component
3) نوشتن کد کمتر
کد سبد خرید به روش مقالهی جاری-استفاده از EventBus
نکته: برای اجرای برنامه و دریافت پکیجهای مورد استفاده در مثال جاری، نیاز است دستور زیر را اجرا کنید:
npm install
همچنین نیاز هست تا پکیچ node-sass را نیز با دستور زیر برای این مثال نصب کنید.
npm install node-sass
نسخه جدید برنامه مدیریت بستههای دات نت هم آماده شد. میتونین از اینجا دانلودش کنین. (2.5MB)
طبق آمار خود سایت نوگت تا حالا بیش از 14.6 میلیون بار بستههای اون توسط کاربران دانلود شدن و بیش از 7000 بسته متمایز در این گالری موجوده!
یکی از مشکلاتی که تو این نسخه رفع شده موردی بود که در ارتباطات کند اینترنت بوجود میومد (^). تو کنسول این افزونه پس از وارد کردن قسمتی از نام یک بسته با فشردن کلید TAB نام تمام بستههایی که اول اسمشون اون عبارت تایپ شده باشه، لیست میشه (Tab Completion).
این عملیات در نسخههای قبلی با استفاده از یک درخواست HTML به OData (^) انجام میشد که دادههایی بیش از حد نیاز رو برمیگردوند. اما تو این نسخه این عملیات با استفاده از یک درخواست سریع JSON انجام میشه. (^)
من خودم این ویژگی رو تست کردم و افزایش سرعتش قابل ملاحظه بود!
یکی دیگه بهبودهای حاصله در دریافت بستههای وابسته نسبت به نسخه دات نت فریمورک در پروژه هدف هستش. یعنی میشه تنظیماتی روی بستههای نوگت اعمال کرد تا به صورت هوشمندانه نسخه متناسب با دات نت فریمورک مورد استفاده رو دانلود و نصب کنه.
اگه به صفحه مربوط به مشکلات و درخواستهای کاربران برای این افزونه (^) مراجعه کنین میبینید این دو موردکه تو این نسخه برطرف شدن بیشترین تقاضا رو داشتن. مورد اول با توجه به سرعت پایین اینترنت برای خود من خیلی کاربردیه.
نکته: اگر از VS 2010 SP1 استفاده میکنین هنگام به روز رسانی نوگت با استفاده از Extension Manager خود VS ممکنه با خطا مواجه بشین. اصولا بهترین روش نصب نوگت ابتدا unistall کردن نسخه قدیمی این افزونه از طریق appwiz.cpl و سپس نصب نسخه جدید با اجرای فایل vsix. هست (در هر دو قسمت نیاز به دسترسی administrator دارین).
و در نهایت:
You can develop your own package and share it via the NuGet Gallery. (^)
ویرایش:
متاسفانه دیروز وقت نکردم نتایج آزمایش با Fiddler رو اینجا بزارم.
مورد اول (Tab Completion) رو با سه نسخه از نوگت (1.6 و 1.8 و 2.0) برای دو عبارت jque و signa تست کردم و نتایج بدست اومده به شرح زیره. در زیر url درخواست مربوطه به همراه حجم دیتای دریافتی آورده شده:
نوگت 1.6:
nuget ver 1.6 jque: GET https://nuget.org/api/v2/Packages()?$orderby=DownloadCount%20desc,Id&$filter=startswith(tolower(Id),'jque')%20and%20IsLatestVersion&$skip=0&$top=90 HTTP/1.1 53691 bytes signa: GET https://nuget.org/api/v2/Packages()?$orderby=DownloadCount%20desc,Id&$filter=startswith(tolower(Id),'signa')%20and%20IsLatestVersion&$skip=0&$top=90 HTTP/1.1 11536 bytes
نوگت 1.8:
nuget ver 1.8 jque: GET https://nuget.org/api/v2/Packages()?$orderby=DownloadCount%20desc,Id&$filter=startswith(tolower(Id),'jque')%20and%20IsLatestVersion&$skip=0&$top=90 HTTP/1.1 53694 bytes signa: GET https://nuget.org/api/v2/Packages()?$orderby=DownloadCount%20desc,Id&$filter=startswith(tolower(Id),'signa')%20and%20IsLatestVersion&$skip=0&$top=90 HTTP/1.1 11536 bytes
نوگت 2.0:
nuget ver 2.0 jque: GET https://nuget.org/api/v2/package-ids?partialId=jque HTTP/1.0 598 bytes signa: GET https://nuget.org/api/v2/package-ids?partialId=signa HTTP/1.0 457 bytes
پاسخ سرور به عبارت signa در نسخه 2.0:
HTTP/1.1 200 OK Cache-Control: private Content-Type: application/json; charset=utf-8 Server: Microsoft-IIS/7.0 X-AspNetMvc-Version: 3.0 X-AspNet-Version: 4.0.30319 X-Powered-By: ASP.NET Date: Thu, 28 Jun 2012 07:23:06 GMT Connection: close Content-Length: 457 ["SignalR","SignalR.Client","SignalR.Client.Silverlight","SignalR.Client.Silverlight5","SignalR.Client.WP7","SignalR.EventStream","SignalR.Hosting.AspNet","SignalR.Hosting.Common","SignalR.Hosting.Owin","SignalR.Hosting.Self","SignalR.Js","SignalR.MicroSliver","SignalR.Ninject","SignalR.RabbitMq","SignalR.Reactive","SignalR.Redis","SignalR.Sample","SignalR.Server","SignalR.StructureMap","SignalR.WebSockets","SignalR.WindowsAzureServiceBus","Signals.js"]
میبینید که غیرقابل مقایسه هستن! و همونوطور که آقای هنسلمن (^) در مورد نسخههای قدیمی گفتن: «دادههای بیش از حد نیاز رو برمیگردونن»
نسخههای قبل از 2.0 همگی از odata استفاده میکردن و دادههای برگشتی تماما encrypt شدهاند. اما در نسخه 2.0 دادههای برگشتی از نوع JSON هست (به Fiddler مراجعه کنین تا تفاوت واقعی رو ببینین. البته برای اینکه دادههای encrypt شده رو در fiddler ببینین باید طبق راهنمایی خودش از تنظیمات مربوط به decrypt ترافیک https استفاده کنین)
این روش تا زمانیکه برنامهی ما برای اجرا شدن، تنها از یک سرور استفاده کند، بهترین انتخاب خواهد بود؛ چرا که به دلیل نزدیک بودن، سریعترین بازخورد را نیز به درخواستها ارائه میدهد.
اما شرایطی را فرض کنید که برنامه از چندین سرور برای اجرا شدن استفاده میکند و به طبع هر سرور درخواستهای خودش را داراست که ما باید برای هر یک بصورت جداگانهای یک کش In-Memory را در حافظه Ram هرکدام ایجاد کنیم.
فرض کنید دیتای ما 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 باشد. بخشی از دیتا در Server 1 کش میشود (1 , 3 , 5 , 9) و بخشی دیگر در Server 2 کش خواهد شد (2 , 4 , 6 ,7 , 8 , 10).
در اینجا مشکلات و ضعف هایی به وجود خواهد آمد :
روش هایی وجود دارد که بتوان از سیستم Local Caching در حالت چند سروری هم استفاده کرد و این مشکلات را از بین برد، اما روش استاندارد در حالت چند سروری، استفاده از Distributed Cacheها است.
روش دوم : Distributed Caching
در این روش برنامهی ما برای اجرا شدن از چندین سرور شبکه شده به هم، در حال استفاده هست و Cache برنامه، توسط سرورها به اشتراک گذاشته شده.
در این حالت سرورهای ما از یک کش عمومی استفاده میکنند که مزایای آن شامل :
■ درخواستها به چندین سرور مختلف از هم ارسال شده، اما دیتای کش بصورت منسجم در هریک وجود خواهد داشت.
■ با خراب شدن یا Down شدن یک سرور، کش موجود در سرورهای دیگر پاک نمیشود و کماکان قابل استفاده است.
■ به حافظه Ram یک سرور محدود نیست و مشکلات زیادی همچون کمبود سخت افزاری و محدودیتهای حافظهی Ram را تا حد معقولی کاهش میدهد.
طریقه استفاده از Cache در Asp.Net Core :
public void ConfigureServices(IServiceCollection services) { services.AddMvc(); services.AddMemoryCache(); }
public class HomeController : Controller { private readonly IMemoryCache _cache; public HomeController(IMemoryCache cache) { _cache = cache; } .... }
public IActionResult Set() { _cache.Set("CacheKey", data , TimeSpan.FromDays(1)); return View(); }
در پارامتر اول این متد (CacheKey)، یک کلید، برای اطلاعاتی که میخواهیم کش کنیم قرار میدهیم. دقت کنید که این کلید، شناسهی دیتای شماست و باید طوری آن را در نظر گرفت که با صدا زدن این کلید از سرویس کش، همان دیتای مورد نظر را برگشت دهد (هر Object دیتا، باید کلید Unique خود را داشته باشد).
در پارامتر دوم، دیتای مورد نظر را که میخواهیم کش کنیم، به متد میدهیم و در پارامتر سوم نیز زمان اعتبار و تاریخ انقضای دیتای کش شده را وارد میکنیم؛ به این معنا که دیتای کش شده، بعد از مدت زمان گفته شده، از حافظه کش(Ram) حذف شود و برای دسترسی دوباره و کش کردن دوباره اطلاعات، نیاز به خواندن مجدد از دیتابیس باشد.
public IActionResult Get() { string data = _cache.Get("CacheKey"); return View(data); }
تنها پارامتر ورودی این متد، کلید از قبل نسبت داده شده به اطلاعات کش هست که با استفاده از یکسان بودن کلید در ورودی این متد و کلید Set شده از قبل در حافظه Ram، دیتا مربوط به آن را برگشت میدهد.
public IActionResult Set() { DateTime data; // Look for cache key. if (!_cache.TryGetValue( "CacheKey" , out data)) { // Key not in cache, so get data. data= DateTime.Now; // Save data in cache and set the relative expiration time to one day _cache.Set( "CacheKey" , data, TimeSpan.FromDays(1)); } return View(data); }
این متد ابتدا بررسی میکند که کلیدی با نام "CacheKey" وجود دارد یا خیر؟ در صورت عدم وجود، آن را میسازد و دیتای مورد نظر را به آن نسبت میدهد.
public IActionResult GetOrCreate() { var data = _cache.GetOrCreate( "CacheKey" , entry => entry.SlidingExpiration = TimeSpan.FromSeconds(3); return View(data); }); return View(data); }
در اینجا absolute expiration به این معنا است که یک زمان قطعی را برای منقضی شدن کشها مشخص میکند؛ به عبارتی میگوییم کش با کلید فلان، در تاریخ و ساعت فلان حذف شود. اما در sliding expiration یک بازه زمانی برای منقضی شدن کشها مشخص میکنیم؛ یعنی میگوییم بعد از گذشت فلان دقیقه از ایجاد کش، آن را حذف کن و اگر در طی این مدت مجددا خوانده شد، طول مدت زمان آن تمدید خواهد شد.
این تنظیمات را میتوانید در قالب یک option زمان Set کردن یک کش، به آن بدهید.
MemoryCacheEntryOptions options = new MemoryCacheEntryOptions(); options.AbsoluteExpiration = DateTime.Now.AddMinutes(1); options.SlidingExpiration = TimeSpan.FromMinutes(1); _cache.Set("CacheKey", data, options );
در مثال بالا هردو option اضافه شده یک کار را انجام میدهند؛ با این تفاوت که absolute expiration تاریخ now را گرفته و یک دقیقه بعد را به آن اضافه کرده و تاریخ انقضای کش را با آن تاریخ set میکند. اما sliding expiration از حالا بمدت یک دقیقه اعتبار دارد.
این اولویت بندیها زمانی کاربرد خواهند داشت که حافظه اختصاصی Ram، برای کشها پر شده باشد و در این حالت سیستم کشینگ بصورت خودمختار، کشهای با الویت پایین را از حافظه حذف میکند و کشهای با الویت بیشتر، در حافظه باقی میمانند. این با شماست که الویت را برای دیتاهای خود تعیین کنید؛ پس باید با دقت و فکر شده این کار را انجام دهید.
MemoryCacheEntryOptions options = new MemoryCacheEntryOptions(); // Low / Normal / High / NeverRemove options.Priority = CacheItemPriority.High; cache.Set("CacheKey", data, options);
به این صورت میتوانید الویتهای متفاوت را در قالب option به کشهای خود اختصاص دهید.
در این مقاله سعی شد مفاهیم اولیه Cache، طوری گفته شود، تا برای افرادی که میخواهند به تازگی این سیستم را بیاموزند و در پروژههای خود استفاده کنند، کاربردی باشد و درک نسبی را نسبت به مزایا و محدودیتهای این سیستم بدست آورند.
در قسمت دوم همین مقاله بطور تخصصیتر به این مبحث میپردازیم و یک پکیج آماده را معرفی میکنیم که خیلی راحتتر و اصولیتر کش را برای ما پیاده سازی میکند.