ng generate component [name] یا ng g c [name]
<template> <v-app> <v-toolbar app> <v-toolbar-title> <span>Vuetify</span> <span>MATERIAL DESIGN</span> </v-toolbar-title> <v-spacer></v-spacer> <v-btn flat href="https://github.com/vuetifyjs/vuetify/releases/latest" target="_blank" > <span>Latest Release</span> </v-btn> </v-toolbar> <v-content> <HelloWorld/> </v-content> </v-app> </template> <script> export default { name: 'App', components: { }, data () { return { // } } } </script>
<template> <v-container v-if="loading"> <div> <v-progress-circular indeterminate :size="150" :width="8" color="green"> </v-progress-circular> </div> </v-container> <v-container v-else grid-list-xl> <v-layout wrap> <v-flex xs4 v-for="(item, index) in wholeResponse" :key="index" mb-2> <v-card> <v-img :src="item.Poster" aspect-ratio="1" ></v-img> <v-card-title primary-title> <div> <h2>{{item.Title}}</h2> <div>Year: {{item.Year}}</div> <div>Type: {{item.Type}}</div> <div>IMDB-id: {{item.imdbID}}</div> </div> </v-card-title> <v-card-actions> <v-btn flat color="green" @click="singleMovie(item.imdbID)" >View</v-btn> </v-card-actions> </v-card> </v-flex> </v-layout> </v-container> </template> <script> import movieApi from '@/services/MovieApi' export default { data () { return { wholeResponse: [], loading: true } }, mounted () { movieApi.fetchMovieCollection('indiana') .then(response => { this.wholeResponse = response.Search this.loading = false }) .catch(error => { console.log(error) }) }, methods: { singleMovie (id) { this.$router.push('/movie/' + id) } } } </script> <style scoped> .v-progress-circular margin: 1rem </style>
<template> <v-container v-if="loading"> <div> <v-progress-circular indeterminate :size="150" :width="8" color="green"> </v-progress-circular> </div> </v-container> <v-container v-else> <v-layout wrap> <v-flex xs12 mr-1 ml-1> <v-card> <v-img :src="singleMovie.Poster" aspect-ratio="2" ></v-img> <v-card-title primary-title> <div> <h2>{{singleMovie.Title}}-{{singleMovie.Year}}</h2> <p>{{ singleMovie.Plot}} </p> <h3>Actors:</h3>{{singleMovie.Actors}} <h4>Awards:</h4> {{singleMovie.Awards}} <p>Genre: {{singleMovie.Genre}}</p> </div> </v-card-title> <v-card-actions> <v-btn flat color="green" @click="back">back</v-btn> </v-card-actions> </v-card> </v-flex> </v-layout> <v-layout row wrap> <v-flex xs12> <div> <v-dialog v-model="dialog" width="500"> <v-btn slot="activator" color="green" dark> View Ratings </v-btn> <v-card> <v-card-title primary-title > Ratings </v-card-title> <v-card-text> <table style="width:100%" border="1" > <tr> <th>Source</th> <th>Ratings</th> </tr> <tr v-for="(rating,index) in this.ratings" :key="index"> <td align="center">{{ratings[index].Source}}</td> <td align="center"><v-rating :half-increments="true" :value="ratings[index].Value"></v-rating></td> </tr> </table> </v-card-text> <v-divider></v-divider> <v-card-actions> <v-spacer></v-spacer> <v-btn color="primary" flat @click="dialog = false" > OK </v-btn> </v-card-actions> </v-card> </v-dialog> </div> </v-flex> </v-layout> </v-container> </template> <script> import movieApi from '@/services/MovieApi' export default { props: ['id'], data () { return { singleMovie: '', dialog: false, loading: true, ratings: '' } }, mounted () { movieApi.fetchSingleMovie(this.id) .then(response => { this.singleMovie = response this.ratings = this.singleMovie.Ratings this.ratings.forEach(function (element) { element.Value = parseFloat(element.Value.split(/\/|%/)[0]) element.Value = element.Value <= 10 ? element.Value / 2 : element.Value / 20 } ) this.loading = false }) .catch(error => { console.log(error) }) }, methods: { back () { this.$router.push('/') } } } </script> <style scoped> .v-progress-circular margin: 1rem </style>
<template> <v-container v-if="loading"> <div> <v-progress-circular indeterminate :size="150" :width="8" color="green"> </v-progress-circular> </div> </v-container> <v-container v-else-if="noData"> <div> <h2>No Movie in API with {{this.name}}</h2> </div> </v-container> <v-container v-else grid-list-xl> <v-layout wrap> <v-flex xs4 v-for="(item, index) in movieResponse" :key="index" mb-2> <v-card> <v-img :src="item.Poster" aspect-ratio="1" ></v-img> <v-card-title primary-title> <div> <h2>{{item.Title}}</h2> <div>Year: {{item.Year}}</div> <div>Type: {{item.Type}}</div> <div>IMDB-id: {{item.imdbID}}</div> </div> </v-card-title> <v-card-actions> <v-btn flat color="green" @click="singleMovie(item.imdbID)" >View</v-btn> </v-card-actions> </v-card> </v-flex> </v-layout> </v-container> </template> <script> // در همه کامپوننتها جهت واکشی اطلاعات ایمپورت میشود import movieApi from '@/services/MovieApi' export default { // route پارامتر مورد استفاده در props: ['name'], data () { return { // آرایه ای برای دریافت فیلمها movieResponse: [], // جهت نمایش لودینگ در زمان بارگذاری اطلاعات loading: true, // مشخص کردن آیا اطللاعاتی با سرچ انجام شده پیدا شده یا خیر noData: false } }, // تعریف متدهایی که در برنامه استفاده میکنیم methods: { // این تابع باعث میشود که // route // تعریف شده با نام // Movie // فراخوانی شود و آدرس بار هم تغییر میکنید به آدرسی شبیه زیر // my-site/movie/tt4715356 singleMovie (id) this.$router.push('/movie/' + id) }, fetchResult (value) { movieApi.fetchMovieCollection(value) .then(response => { if (response.Response === 'True') { this.movieResponse = response.Search this.loading = false this.noData = false } else { this.noData = true this.loading = false } }) .catch(error => { console.log(error) }) } }, // جز توابع // life cycle // vue.js // میباشد و زمانی که تمپلیت رندر شد اجرا میشود // همچنین با هر بار تغییر در // virtual dom // این تابع اجرا میشود mounted () { this.fetchResult(this.name) }, // watchها // کار ردیابی تغییرات را انجام میدهند و به محض تغییر مقدار پراپرتی // name // کد مورد نظر در بلاک زیر انجام میشود watch: { name (value) { this.fetchResult(value) } } } </script> <style scoped> .v-progress-circular margin: 1rem </style>
import axios from 'axios'
import axios from 'axios' export default { fetchMovieCollection (name) { return axios.get('&s=' + name) .then(response => { return response.data }) }, fetchSingleMovie (id) { return axios.get('&i=' + id) .then(response => { return response.data }) } }
axios.defaults.baseURL = 'http://www.omdbapi.com/?apikey=b76b385c&page=1&type=movie&Content-Type=application/json'
import Vue from 'vue' import VueRouter from 'vue-router' // برای رجیستر کردن کامپوننتها در بخش روتر، آنها را ایمپورت میکنیم import LatestMovie from '@/components/LatestMovie' import Movie from '@/components/Movie' import SearchMovie from '@/components/SearchMovie' Vue.use(VueRouter) export default new VueRouter({ routes: [ { // مسیری هست که برای این کامپوننت در نظر گرفته شده(صفحه اصلی)بدون پارامتر path: '/', // نام روت name: 'LatestMovie', // نام کامپوننت مورد نظر component: LatestMovie }, { // پارامتری هست که به این کامپوننت ارسال میشه id // برای دستیابی به این کامپوننت نیاز هست با آدرسی شبیه زیر اقدام کرد // my-site/movie/tt4715356 path: '/movie/:id', name: 'Movie', // در کامپوننت جاری یک پراپرتی وجود دارد //id که میتوان با نام // به آن دسترسی پیدا کرد props: true, component: Movie }, { path: '/search/:name', name: 'SearchMovie', props: true, component: SearchMovie } ], // achieve URL navigation without a page reload // When using history mode, the URL will look "normal," e.g. http://oursite.com/user/id. Beautiful! // در آدرس # قرار نمیگیرد mode: 'history' })
npm install
طی مقاله چک لیست تولید برنامه Asp.net mvc و بررسی امنیتی ایجکس هنگام استفاده در مورد چک لیست امنیتی
سایت سرفصلهای مهم عنوان و بررسی شده است که یکی از موارد، مقاوم ساختن وب اپلیکشن در برابر حملات CSRF میباشد. اینگونه حملات بر پایه این استراتژی شکل میگیرند که با
ارسال درخواستی به نیابت از سمت سیستم/مرورگر کاربر تایید هویت شده، سایت مقصد را مجبور
به انجام عملی کند. برای مثال اگر شما در سایت a.com یک
کاربر تایید شده باشید و هم اکنون در سایت فوق نیز لاگین باشید، مهاجم با ارسال یک برنامه/صفحه یا موارد مشابه و در قالب src یک
عکس یا با ترغیب شما با کلیک بر روی یک لینک با href آلوده یا موارد
مشابه، از سمت مرورگر شما درخواستی را به سمت سایت a.com ارسال میکند .
این درخواست ممکن است شامل حذف اطلاعات، تغییر مشخصات، پرداخت هزینه یا موارد مشابه باشد. جهت مقابله با این حمله، یکی از موارد مهم، استفاده همیشگی از Html.AntiForgeryToken() در تمامی فرمهای ورود اطلاعات است. همچنین استفاده همیشگی از متد Post و بررسی تایید مبدا درخواستهای ایجکسی، بررسی http referrer ، محدود کردن طول عمر کوکی، استفاده از کپچهای قوی مانند کپچای گوگل میتواند تا حد زیادی وب اپلیکیشن را در مورد اینگونه حملات، مصون کند.
در این بین یکی از موارد دیگر، اضافه کردن AntiForgeryToken به درخواستهای ایجکسی سایت میباشد. جهت حصول این منظور، راههای مختلفی موجود است. یکی از راه حلها استفاده از یک هلپر جهت تولید توکن مورد نظر است.
ساختار
هلپر مورد نظر به شرح زیر است :
public static class AntiForgeryToken { public static MvcHtmlString AntiForgeryTokenForAjaxPost(this HtmlHelper helper) { var antiForgeryInputTag = helper.AntiForgeryToken().ToString(); // Above gets the following: <input name="__RequestVerificationToken" type="hidden" value="some value" /> var removedStart = antiForgeryInputTag.Replace(@"<input name=""__RequestVerificationToken"" type=""hidden"" value=""", ""); var tokenValue = removedStart.Replace(@""" />", ""); if (antiForgeryInputTag == removedStart || removedStart == tokenValue) throw new InvalidOperationException("Oops! The Html.AntiForgeryToken() method seems to return something I did not expect."); return new MvcHtmlString($@"{"__RequestVerificationToken"}:""{tokenValue}"""); } }
در مرحله بعد طبق الگوی زیر، درخواست ایجکسی به همراه توکن تولید شده و به کنترلر ارسال خواهد شد:
function AddToCart(pid) { $.ajax({ url: '@Url.Action("AddToBasket","Shop")', data: { 'pid': pid,@Html.AntiForgeryTokenForAjaxPost() }, type: 'post', success:function(e) { //do something } }); }
در مرحله آخر، باید کنترلر مورد نظر شامل ویژگیهای [HttpPost] [ValidateAntiForgeryToken] باشد تا صحت توکن تولیدی را بررسی کند و در صورت نامعتبر بودن، از اجرای دستورات جلوگیری گردد.
بررسی ASP.NET Core
If you stumble into this with no idea who I am or why I’m arrogant enough to think I’m qualified to potentially criticize the ASP.Net Core internals, I’m the primary author of both StructureMap (the IoC container) and an alternative “previous generation” OSS web development framework called FubuMVC that tackled a lot of the same problems that ASP.Net Core addresses now that were not part of older ASP.Net MVC or Web API.
آموزش MEF#2(استفاده از MEF در Asp.Net MVC)
@model Plugin1.Models.Post @{ Layout = "~/Views/Shared/_Layout.cshtml"; } @Model.Title
If Not a And b Then ... Else ... EndIf
if(!(a) && b) { ... } else { }
معرفی واژهی کلیدی جدید not در C# 9.0
در ابتدا اینترفیس نمونهای را به همراه دو کلاس مشتق شدهی از آن درنظر بگیرید:
public interface ICommand { } public class Command1 : ICommand { } public class Command2 : ICommand { }
ICommand command = new Command1(); if (!(command is Command2)) { }
if (command is not Command2) { }
معرفی واژههای کلیدی جدید and و or در C# 9.0
واژههای کلیدی جدید and و or نیز درک و نوشتن عبارات pattern matching را بسیار ساده میکنند. برای نمونه قطعه کد متداول زیر را درنظر بگیرید:
if ((command is ICommand) && !(command is Command2)) { }
if (command is ICommand and not Command2) { }
و یا حتی در اینجا در صورت نیاز میتوان از واژهی کلیدی جدید or نیز استفاده کرد:
if (command is Command1 or Command2) { }
امکان اعمال واژههای کلیدی جدید and، or و not به سایر نوعها نیز وجود دارند
تا اینجا مثالهایی را که بررسی کردیم، در مورد بررسی نوع اشیاء بود. اما میتوان این واژههای کلیدی جدید در C# 9.0 را به هر نوع ممکنی نیز اعمال کرد. برای نمونه، مثال سادهی زیر را که در مورد بررسی اعداد است، درنظر بگیرید:
var number = new Random().Next(1, 10); if (number > 2 && number < 8) { }
if (number is > 2 and < 8) { }
یک مثال دیگر: متد زیر را در نظربگیرید که با استفاده از && و || متداول #C نوشته شدهاست:
public static bool IsLetterOrSeparator(char c) => (c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z') || c == '.' || c == ',';
public static bool IsLetterOrSeparator(char c) => c is (>= 'a' and <= 'z') or (>= 'A' and <= 'Z') or '.' or ',';
امکان اعمال واژههای کلیدی جدید and، or و not به switchها نیز وجود دارد
برای نمونه قطعه کد if/else دار متداول زیر را درنظر بگیرید که قابلیت تبدیل به یک سوئیچ را نیز دارد:
var number = new Random().Next(1, 10); if (number <= 0) { Console.WriteLine("Less than or equal to 0"); } else if (number > 0 && number <= 10) { Console.WriteLine("More than 0 but less than or equal to 10"); } else { Console.WriteLine("More than 10"); }
// C#9.0 switch (number) { case <= 0: Console.WriteLine("Less than or equal to 0"); break; case > 0 and <= 10: Console.WriteLine("More than 0 but less than or equal to 10"); break; default: Console.WriteLine("More than 10"); break; }
// C#7.0 switch (number) { case int value when value <= 0: Console.WriteLine("Less than or equal to 0"); break; case int value when value > 0 && value <= 10: Console.WriteLine("More than 0 but less than or equal to 10"); break; default: Console.WriteLine("More than 10"); break; }
و یا حتی میتوان سوئیچ C# 9.0 را توسط switch expression بهبود یافتهی C# 8.0 نیز به شکل زیر بازنویسی کرد:
var message = number switch { <= 0 => "Less than or equal to 0", > 0 and <= 10 => "More than 0 but less than or equal to 10", _ => "More than 10" };
انواع pattern matchingهای اضافه شدهی به C# 9.0
در این مطلب سعی شد مفاهیم pattern matching اضافه شدهی به C# 9.0، ذیل عنوان واژههای کلیدی جدید آن بحث شوند؛ اما هر کدام دارای نامهای خاصی هم هستند:
الف) relational patterns: امکان استفادهی از <, >, <= and >= را در الگوها میسر میکنند. مانند نمونههای سوئیچی که نوشته شد.
ب) logical patterns: امکان استفادهی از واژههای کلیدی and، or و not را در الگوها ممکن میکنند.
ج) not pattern: امکان استفادهی از واژهی کلیدی not را در عبارات if میسر میکند.
د) Simple type pattern: در مثالهای زیر، پس از انطباق با یک الگو، کاری با متغیر یا شیء مرتبط نداریم. در نگارشهای قبلی برای صرفنظر کردن از آن، ذکر _ ضروری بود؛ اما در C#9.0 میتوان آنرا نیز ذکر نکرد:
private static int GetDiscount(Product p) => p switch { Food => 0, // Food _ => 0 before C# 9 Book b => 75, // Book b _ => 75 before C# 9 _ => 25 };