فشرده سازی با فرمت 7z
Install-Package Squid-Box.SevenZipSharp
انتشار VS2010
لطفا بیشتر توضیح بدید
لیست تازههای IIS 7.5
عدم استفاده از HttpContext
Install-Package Parbad -Version 1.3.0-beta2
public partial class PersonallyEntities : DbContext { public PersonallyEntities() : base("name=PersonallyEntities") { } }
"name=PersonallyEntities"
metadata=res://*/Model1.csdl|res://*/Model1.ssdl|res://*/Model1.msl;provider=System.Data.SqlClient;provider connection string="data source=.;initial catalog=Personally;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework"
public static string BuildEntityConnection(string connectionString) { var entityConnection = new EntityConnectionStringBuilder { Provider = "System.Data.SqlClient", ProviderConnectionString = connectionString, Metadata = "res://*" }; return entityConnection.ToString(); }
public partial class PersonallyEntities : DbContext { public PersonallyEntities(string connectionString) : base(connectionString) { } }
: base(connectionString)
var entityConnectionString = BuildeEntityConnection("Data Source=localhost;Initial Catalog=Personally; Integrated Security=True"); var PersonallyDb = new PersonallyEntities(entityConnectionString);
دریافت نصاب آفلاین Visual Studio 2012 نسخه Ultimate
فقط یک مشکل هست که حجمش بالاست . یعنی هیچ راهی نداره که بشه بصورت پکیج دانلود کرد یا لااقل اگر روی یک سیستم دانلود شد بشه یه جوری اون فایلها را به سیستم دیگه منتقل کرد که ویژوال استدیو اونها رو بشناسه و دوباره مجبور به دانلود نباشیم
اگر ممکنه راهی براش پیدا کنین
مقدمه:
شروع را با نصب ویژوال استودیوی نسخه رایگان 2013 برای وب و یا نسخهی 2013 آغاز میکنیم. برای راهنمایی استفاده ازDropbox, GitHub, Linkedin, Instagram, buffer salesforce STEAM, Stack Exchange, Tripit, twitch, Twitter, Yahoo و بیشتر اینجا کلیک کنید.توجه:
برای استفاده از Google OAuth 2 و دیباگ به صورت لوکال بدون اخطار SSL، شما میبایستی نسخهی ویژوال استودیو 2013 آپدیت 3 و یا بالاتر را نصب کرده باشید.ساخت اولین پروژه:
ویژوال استودیو را اجرا نماید. در سمت چپ بر روی آیکن Web کلیک کنید تا آیتم ASP.NET Web Application در دات نت 4.5.1 نمایش داده شود. یک نام را برای پروژه انتخاب نموده و OK را انتخاب نماید.در دیالوگ بعدی آیتم MVC را انتخاب و اطمینان داشته باشید Individual User Accounts که با انتخاب Change Authentication به صورت دیالوگ برای شما نمایش داده میشود، انتخاب گردیده و در نهایت بر روی OK کلیک کنید.
فعال نمودن حساب کاربری گوگل و اعمال تنظیمات اولیه:
در این بخش در صورتیکه حساب کاربری گوگل ندارید، وارد سایت گوگل شده و یک حساب کاربری را ایجاد نماید. در غیر اینصورت اینجا کلیک کنید تا وارد بخش Google Developers Console شوید.در بخش منو بر روی ایجاد پروژه کلیک کنید تا پروژهای جدید ایجاد گردد.
در دیالوگ باز شده نام پروژه خودتان را وارد کنید و دکمهی Create را زده تا عملیات ایجاد پروژه انجام شود. در صورتیکه با موفقیت پیش رفته باشید، این صفحه برای شما بارگزاری میگردد.
فعال سازی Google+API
در سمت چپ تصویر بالا آیتمی با نام APIs & auth خواهید دید که بعد از کلیک بر روی آن، زیر مجموعهای برای این آیتم فعال میگردد که میبایستی بر روی APIs کلیک و در این قسمت به جستجوی آیتمی با نام Google+ API پرداخته و در نهایت این آیتم را برای پروژه فعال سازید.
ایجاد یک Client ID :
در بخش Credentials بر روی دکمهی Create new Client ID کلیک نماید.
در دیالوگ باز شده از شما درخواست میشود تا نوع اپلیکشن را انتخاب کنید که در اینجا میبایستی آیتم اول (Web application ) را برای گام بعدی انتخاب کنید و با کلیک بر روی Configure consent screen به صفحهی Consent screen هدایت خواهید شد. فیلدهای مربوطه را به درستی پر کنید (این بخش به عنوان توضیحات مجوز ورود بین سایت شما و گوگل است).
در نهایت بعد از کلیک بر روی Save به صفحهی Client ID بازگشت داده خواهید شد که در این صفحه با این دیالوگ برخورد خواهید کرد.
پروژهی MVC خودتان را اجرا و لینک و پورت مربوطه را کپی کنید ( http://localhost:5063 ).
در Authorized JavaScript Origins لینک را کپی نماید و در بخش Authorized redirect URls لینک را مجدد کپی نماید. با این تفاوت که بعد از پورت signin-google را هم قرار دهید. ( http://localhost:5063/signin-google )
حال بر روی دکمهی Create Client ID کلیک کنید.
پیکربندی فایل Startup.Auth :
فایل web.config را که در ریشهی پروژه قرار دارد باز کنید. در داخل تگ appSettings کد زیر را کپی کنید. توجه شود بجای دو مقدار value، مقداری را که گوگل برای شما ثبت کرده است، وارد کنید.
<appSettings> <!--Google--> <add key="GoogleClientId" value="555533955993-fgk9d4a9999ehvfpqrukjl7r0a4r5tus.apps.googleusercontent.com" /> <add key="GoogleClientSecretId" value="QGEF4zY4GEwQNXe8ETwnVHfz" /> </appSettings>
فایل Startup.Auth را باز کنید و دو پراپرتی و یک سازندهی بدون ورودی را تعریف نماید. توضیحات بیشتر به صورت کامنت در کد زیر قرار گرفته است.
//فضا نامهای استفاده شده در این کلاس using System; using System.Configuration; using Microsoft.AspNet.Identity; using Microsoft.AspNet.Identity.Owin; using Microsoft.Owin; using Microsoft.Owin.Security.Cookies; using Microsoft.Owin.Security.Google; using Owin; using Login.Models; //فضا نام جاری پروژه namespace Login { /// <summary> /// در ریشه سایت فایلی با نام استارت آپ که کلاسی هم نام این کلاس با یک تابع و یک ورودی از نوع اینترفیس تعریف شده است ///که این دو کلاس به صورت پارشال مهروموم شده اند /// </summary> public partial class Startup { /// <summary> /// این پراپرتی مقدار کلایت ای دی رو از وب دات کانفیگ در سازنده بدون ورودی در خودش ذخیره میکند /// </summary> public string GoogleClientId { get; set; } /// <summary> /// این پراپرتی مقدار کلایت سیکرت ای دی رو از وب دات کانفیگ در سازنده بدون ورودی در خودش ذخیره میکند /// </summary> public string GoogleClientSecretId { get; set; } /// <summary> /// سازنده بدون ورودی /// به ازای هر بار نمونه سازی از کلاس، سازندههای بدون ورودی کلاس هر بار اجرا خواهند شد، توجه شود که میتوان از /// سازندههای استاتیک هم استفاده کرد، این سازنده فقط یک بار، در صورتی که از کلاس نمونه سازی شود ایجاد میگردد /// </summary> public Startup() { //Get Client ID from Web.Config GoogleClientId = ConfigurationManager.AppSettings["GoogleClientId"]; //Get Client Secret ID from Web.Config GoogleClientSecretId = ConfigurationManager.AppSettings["GoogleClientSecretId"]; } ///// <summary> ///// سازنده استاتیک کلاس ///// </summary> //static Startup() //{ //در صورتی که از این سازنده استفاده شود میبایست پراپرتیهای تعریف شده در سطح کلاس به صورت استاتیک تعریف گردد تا //بتوان در این سازنده سطح دسترسی گرفت // GoogleClientId = ConfigurationManager.AppSettings["GoogleClientId"]; // GoogleClientSecretId = ConfigurationManager.AppSettings["GoogleClientSecretId"]; //} // For more information on configuring authentication, please visit http://go.microsoft.com/fwlink/?LinkId=301864 public void ConfigureAuth(IAppBuilder app) { // Configure the db context, user manager and signin manager to use a single instance per request app.CreatePerOwinContext(ApplicationDbContext.Create); app.CreatePerOwinContext<ApplicationUserManager>(ApplicationUserManager.Create); app.CreatePerOwinContext<ApplicationSignInManager>(ApplicationSignInManager.Create); // Enable the application to use a cookie to store information for the signed in user // and to use a cookie to temporarily store information about a user logging in with a third party login provider // Configure the sign in cookie app.UseCookieAuthentication(new CookieAuthenticationOptions { AuthenticationType = DefaultAuthenticationTypes.ApplicationCookie, LoginPath = new PathString("/Account/Login"), Provider = new CookieAuthenticationProvider { // Enables the application to validate the security stamp when the user logs in. // This is a security feature which is used when you change a password or add an external login to your account. OnValidateIdentity = SecurityStampValidator.OnValidateIdentity<ApplicationUserManager, ApplicationUser>( validateInterval: TimeSpan.FromMinutes(30), regenerateIdentity: (manager, user) => user.GenerateUserIdentityAsync(manager)) } }); app.UseExternalSignInCookie(DefaultAuthenticationTypes.ExternalCookie); // Enables the application to temporarily store user information when they are verifying the second factor in the two-factor authentication process. app.UseTwoFactorSignInCookie(DefaultAuthenticationTypes.TwoFactorCookie, TimeSpan.FromMinutes(5)); // Enables the application to remember the second login verification factor such as phone or email. // Once you check this option, your second step of verification during the login process will be remembered on the device where you logged in from. // This is similar to the RememberMe option when you log in. app.UseTwoFactorRememberBrowserCookie(DefaultAuthenticationTypes.TwoFactorRememberBrowserCookie); //Initialize UseGoogleAuthentication app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions() { ClientId = GoogleClientId, ClientSecret = GoogleClientSecretId }); } } }
حال پروژه را اجرا کرده و به صفحهی ورود کاربر رجوع نمائید. همانگونه که در تصوبر زیر مشاهده میکنید، دکمهای با مقدار نمایشی گوگل در سمت راست، در بخش Use another service to log in اضافه شده است که بعد از کلیک بر روی آن، به صفحهی هویت سنجی گوگل ریداریکت میشوید.
در اینجا از کاربر سوال پرسیده میشود که آیا به سایت پذیرنده اجازه داده شود که اطلاعات و ایمیل شما ارسال گردند که بعد از انتخاب دکمهی Accept، لاگین انجام گرفته و اطلاعات ارسال میگردد.
توجه: رمز عبور شما به هیچ عنوان برای سایت پذیرنده ارسال نمیگردد.
لاگین با موفقیت انجام شد.
در مطلب بعدی سایر سایتهای اجتماعی قرار خواهند گرفت.
بوت استرپ (نگارش 3) چیست؟
تازههای بوت استرپ 3 کدامند؟
- بوت استرپ 3 جهت کار با صفحههای نمایش کوچک دستگاههای موبایل به شدت بهینه سازی شده است و به همین جهت به آن mobile-first CSS framework نیز میگویند.
- در نگارش 2 بوت استرپ، حداقل دو نوع گرید واکنشگرا و غیر واکنشگرا قابل تعریف بودند. در نگارش سوم آن، تنها یک نوع گرید جدید واکنشگرا در این فریم ورک وجود دارد که میتواند چهار نوع سایز از بزرگ تا کوچک را شامل شود.
- بوت استرپ 3 با IE7 به قبل و همچنین فایرفاکس 3.6 و پایینتر دیگر سازگار نیست. البته برای پشتیبانی از IE8، نیاز به اندکی تغییرات نیز وجود خواهد داشت که در قسمتهای بعد این جزئیات را بیشتر بررسی خواهیم کرد. به عبارت دیگر بدون این تغییرات، بوت استرپ 3 در حالت پیش فرض با IE9 به بعد سازگار است.
- در بوت استرپ 3 برخلاف نگارش قبلی آن که لیستی از آیکنهای خود را در قالب چند فایل PNG image sprite که آیکنها را به صورت فشرده در کنار هم قرار داده بود، اینبار تنها از Font icons استفاده میکند. به این ترتیب تغییر اندازه این آیکنها با توجه به برداری بودن نمایش قلمها و همچنین قابلیت اعمال رنگ به آنها نیز بسیار سادهتر میگردد.
سؤال: آیا نیاز است از یک فریم ورک CSS واکنشگرا استفاده شود؟
در سالهای قبل، عموما طراحی وب بر اساس تهیه یا خرید یک سری قالبهای از پیش آماده شده، شکیل صورت میگرفتهاست. این قالبها به سرعت با برنامه، یکپارچه شده و حداکثر قلم یا رنگهای آنهارا اندکی تغییر میدادیم و یا اینکه خودمان کل این مسیر را از صفر طی میکردیم. این پروسه سفارشی، بسیار سنگین بوده و مشکل مهم آن، عدم امکان استفاده مجدد از طراحیهای انجام شده میباشد که نهایتا در دراز مدت هزینهی بالایی را برای ما به همراه خواهند داشت. اما با استفاده از فریم ورکهای CSS واکنشگرا به این مزایا خواهیم رسید:
- قسمت عمدهای از کار پیشتر برای شما انجام شده است.
برای مثال نیازی نیست تا حتما برای طرحبندی صفحه، سیستم گرید خاص خودتان را طراحی کنید و یا اینکه مانند سالهای دور، به استفاده از HTML tables پناه ببرید.
- قابلیت سفارشی سازی بسیار بالایی دارند.
برای مثال با استفاده از فناوریهایی مانند less میتوان بوت استرپ را تا حد بسیار زیادی سفارشی سازی کرد. به این ترتیب دیگر یک سایت بوت استرپ، شبیه به بوت استرپ به نظر نخواهد رسید! شاید عدهای عنوان کنند که تمام سایتهای بوت استرپ یک شکل هستند، اما واقعیت این است که این سایتها تنها از قابلیتهای سفارشی سازی بوت استرپ و less استفاده نکردهاند.
دریافت بوت استرپ 3
سایت رسمی دریافت بوت استرپ، آدرس ذیل میباشد:
البته ما از این نگارش خام استفاده نخواهیم کرد و نیاز است برای کارهای سایتهای فارسی، از نگارش راست به چپ آن استفاده کنیم. بنابراین اگر از ویژوال استودیو استفاده میکنید، میتوانید به یکی از دو بسته نیوگت ذیل مراجعه نمائید:
https://www.nuget.org/packages/Twitter.Bootstrap.RTL.Less/3.0.0
https://www.nuget.org/api/v2/package/Twitter.Bootstrap.RTL.Less/3.0.0
اگر بوت استرپ اصل را از سایت اصلی آن دریافت کنید، شامل تعداد فایلها و پوشههای بسیار بیشتری است نسبت به نمونه RTL فوق. اما فایلهای نهایی آن که مورد استفاده قرار خواهند گرفت، درون پوشه dist یا توزیع آن قرار گرفتهاند و آنچنان تفاوتی با نگارش RTL ندارند. فقط در نگارش اصل، فایلهای min و فشرده شده نیز همراه این بسته هستند که در نگارش RTL لحاظ نشدهاند. این موضوع در آینده به نفع ما خواهد بود. از این لحاظ که اگر از سیستم bundling & minification مربوط بهASP.NET استفاده کنید (جهت تولید خودکار فایلهای min در زمان اجرا)، این سیستم به صورت پیش فرض از فایلهای min موجود استفاده میکند و ممکن است مدتی سردرگم باشید که چرا تغییراتی را که به فایل CSS بوت استرپ اعمال کردهام، در سایت اعمال نمیشوند. به علاوه امکان اعمال تغییرات و حتی دیباگ فایلهای غیرفشرده خصوصا جاوا اسکریپتی آن نیز بسیار سادهتر و مفهومتر است.
جهت مطالعه مباحث تکمیلی در مورد نحوه فشرده سازی فایلهای CSS یا JS میتوانید به مقالات ذیل، در سایت جاری مراجعه نمائید:
علاوه بر اینها در نگارش سوم بوت استرپ، تعدادی فایل CSS جدید به نام قالب یا theme نیز اضافه شدهاند که همراه نسخه RTL نیست. برای مثال اگر به پوشه bootstrap-3.0.0.zip\bootstrap-3.0.0\dist\css مراجعه کنید، فایل bootstrap-theme.css نیز قابل مشاهده است. به این ترتیب قالبی و لایهای بر روی مقادیر پیش فرض موجود در فایل bootstrap.css اعمال خواهند شد؛ برای مثال اعمال طراحی تخت یا flat مدرن آن به دکمهها و عناصر دیگر این مجموعه.
شروع یک فایل HTML با بوت استرپ
تا اینجا فرض بر این است که فایلهای بوت استرپ را دریافت کردهاید. در ادامه قصد داریم، نحوه معرفی این فایلها را در یک فایل ساده HTML بررسی کنیم.
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Website</title> <link href="Content/css/bootstrap-rtl.css" rel="stylesheet"> <link href="Content/css/custom.css" rel="stylesheet"> </head> <body> </body> </html>
اگر سایت شما از تعاریف CSS سفارشی دیگری نیز استفاده میکند، تعاریف آنها باید پس از بوت استرپ، ذکر گردند.
افزودن اسکریپتهای بوت استرپ 3
برای کار با اسکریپتهای بوت استرپ 3 نیاز است ابتدا jQuery را به صورت جداگانه دریافت کنیم. در حال حاضر اگر به سایت جیکوئری مراجعه کنید با دو نگارش 1.x و 2.x این کتابخانه مواجه خواهید شد. اگر نیاز به پشتیبانی از IE 8 را در محل کار خود دارید، باید از نگارش 1.x استفاده کنید. نگارش آخر 1.x کتابخانه جیکوئری را از طریق CDN آن همواره میتوان مورد استفاده قرار داد:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
پس از تعریف جیکوئری، تعریف اسکریپتهای بوت استرپ قرار میگیرد (چون وابسته است به جیکوئری). فایل bootstrap-rtl.js شامل تمام زیر فایلهای مورد نیاز نیز میباشد:
<script src="Scripts/bootstrap-rtl.js"></script>
این فایل 4 کیلوبایتی را نیز باید به تعاریف اسکریپتهای مورد نیاز، اضافه کرد:
<script src="Scripts/respond.min.js"></script>
تا اینجا ساختار صفحه HTML تهیه شده جهت استفاده از امکانات بوت استرپ 3، شکل زیر را خواهد داشت:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Website</title> <link href="Content/css/bootstrap-rtl.css" rel="stylesheet"> <link href="Content/css/custom.css" rel="stylesheet"> <script src="Scripts/respond.min.js"></script> </head> <body> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="Scripts/bootstrap-rtl.js"></script> </body> </html>
فایلهای نهایی این قسمت را از اینجا نیز میتوانید دریافت کنید:
bs3-sample01.zip
برپایی پیشنیازها
در اینجا برای بررسی مسیریابی، یک پروژهی جدید React را ایجاد میکنیم.
> create-react-app sample-15 > cd sample-15 > npm start
> npm install --save bootstrap
import "bootstrap/dist/css/bootstrap.css";
همچنین کتابخانهی ثالث بسیار معروف react-router-dom را نیز نصب میکنیم:
> npm i react-router-dom --save
افزودن مسیریابی به برنامه
پس از نصب کتابخانهی react-router-dom، برای افزودن آن به برنامه و فعالسازی مسیریابی، به فایل index.js مراجعه کرده و import آنرا به ابتدای فایل اضافه میکنیم:
import { BrowserRouter } from "react-router-dom";
ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById("root") );
ثبت و معرفی مسیریابیها
در ادامه باید مسیریابیهای خود را ثبت کنیم؛ به این معنا که بر اساس URL خاصی، چه کامپوننتی باید رندر شود. به همین جهت پوشهی جدید src\components را ایجاد کرده و کامپوننت src\components\navbar.jsx را که یک کامپوننت تابعی بدون حالت است، در آن تعریف میکنیم:
import React from "react"; const NavBar = () => { return ( <nav className="navbar bg-dark navbar-dark navbar-expand-sm"> <div className="navbar-nav"> <a className="nav-item nav-link" href="/"> Home </a> <a className="nav-item nav-link" href="/products"> Products </a> <a className="nav-item nav-link" href="/posts/2018/06"> Posts </a> <a className="nav-item nav-link" href="/admin"> Admin </a> </div> </nav> ); }; export default NavBar;
سپس به فایل app.js مراجعه کرده و ساختار آنرا به صورت زیر، جهت درج این NavBar، ویرایش میکنیم تا سبب رندر و نمایش منوی راهبری در مرورگر شود:
import "./App.css"; import React, { Component } from "react"; import NavBar from "./components/navbar"; class App extends Component { render() { return ( <div> <NavBar /> </div> ); } } export default App;
import "./App.css"; import React, { Component } from "react"; import { Route } from "react-router-dom"; import Dashboard from "./components/admin/dashboard"; import Home from "./components/home"; import NavBar from "./components/navbar"; import Posts from "./components/posts"; import Products from "./components/products"; class App extends Component { render() { return ( <div> <NavBar /> <div className="container"> <Route path="/products" component={Products} /> <Route path="/posts" component={Posts} /> <Route path="/admin" component={Dashboard} /> <Route path="/" component={Home} /> </div> </div> ); } } export default App;
کامپوننت جدید src\components\products.jsx جهت رندر لیست آرایهی اشیاء product:
import React, { Component } from "react"; class Products extends Component { state = { products: [ { id: 1, name: "Product 1" }, { id: 2, name: "Product 2" }, { id: 3, name: "Product 3" } ] }; render() { return ( <div> <h1>Products</h1> <ul> {this.state.products.map(product => ( <li key={product.id}> <a href={`/products/${product.id}`}>{product.name}</a> </li> ))} </ul> </div> ); } } export default Products;
کامپوننت بدون حالت تابعی src\components\home.jsx با این محتوا:
import React from "react"; const Home = () => { return <h1>Home</h1>; }; export default Home;
کامپوننت بدون حالت تابعی src\components\posts.jsx با این محتوا:
import React from "react"; const Posts = () => { return ( <div> <h1>Posts</h1> Year: , Month: </div> ); }; export default Posts;
کامپوننت بدون حالت تابعی src\components\admin\dashboard.jsx در پوشهی جدید admin با این محتوا:
import React from "react"; const Dashboard = ({ match }) => { return ( <div> <h1>Admin Dashboard</h1> </div> ); }; export default Dashboard;
معرفی کامپوننت Switch
<div className="container"> <Route path="/products" component={Products} /> <Route path="/posts" component={Posts} /> <Route path="/admin" component={Dashboard} /> <Route path="/" component={Home} /> </div>
یک روش حل این مشکل، استفاده از ویژگی exact است:
<Route path="/" exact component={Home} />
راه دوم رفع این مشکل، استفاده از کامپوننت Switch است. به همین جهت ابتدا این کامپوننت را import میکنیم:
import { Route, Switch } from "react-router-dom";
class App extends Component { render() { return ( <div> <NavBar /> <div className="container"> <Switch> <Route path="/products" component={Products} /> <Route path="/posts" component={Posts} /> <Route path="/admin" component={Dashboard} /> <Route path="/" component={Home} /> </Switch> </div> </div> ); } }
بنابراین هنگام کار با Switch، ترتیب مسیریابیهای تعریف شده مهم است و باید از یک مسیریابی ویژه شروع شده و به یک مسیریابی عمومی مانند / ختم شود.
معرفی کامپوننت Link
تا اینجا اگر برنامه را اجرا کرده باشید و پیشتر سابقهی کار با برنامههای SPA یا Single page applications را داشته باشید، یک مشکل دیگر را نیز احساس کردهاید: سیستم مسیریابی که تا کنون تعریف کردهایم، به صورت SPA عمل نمیکند. یعنی به ازای هربار کلیک بر روی لینکهای منوی راهبری سایت، یکبار دیگر به طور کامل برنامه از صفر بارگذاری مجدد میشود و تمام اسکریپتهای آن مجددا از سرور دریافت شده و رندر خواهند شد. این مورد را در برگهی network ابزارهای توسعه دهندگان مرورگر خود بهتر میتوانید مشاهده کنید. به ازای هر درخواست نمایش کامپوننتی، تعدادی درخواست HTTP به سمت سرور ارسال میشوند که برای دریافت صفحهی index و bundle.js برنامه هستند. اما در برنامههای SPA، مانند جمیل، با هربار کلیک بر روی لینکی، شاهد ریفرش و بارگذاری مجدد کل آن صفحه نیستیم و تنها اطلاعات موجود در قسمت container به روز میشوند.
یک نکته: در اینجا ممکن است دو درخواست websocket و info را نیز مشاهده کنید. این دو مرتبط به hot module reloading هستند که با ذخیرهی برنامه در ادیتور VSCode، بلافاصله سبب به روز رسانی و ریفرش برنامه در مرورگر میشوند.
برای رفع مشکل SPA نبودن برنامه، باید به کامپوننت NavBar مراجعه کرده و تمام anchorهای استاندارد تعریف شدهی در آنرا با کامپوننت Link جایگزین کنیم:
import React from "react"; import { Link } from "react-router-dom"; const NavBar = () => { return ( <nav className="navbar bg-dark navbar-dark navbar-expand-sm"> <div className="navbar-nav"> <Link className="nav-item nav-link" to="/"> Home </Link> <Link className="nav-item nav-link" to="/products"> Products </Link> <Link className="nav-item nav-link" to="/posts/2018/06"> Posts </Link> <Link className="nav-item nav-link" to="/admin"> Admin </Link> </div> </nav> ); }; export default NavBar;
با این تغییرات اگر برنامه را اجرا کنیم، اینبار با کلیک بر روی هر لینک، دیگر شاهد بارگذاری کامل صفحه در مرورگر نخواهیم بود؛ بلکه تنها قسمت container ای که کامپوننت Route مسیریابی در آن درج شدهاست، به روز رسانی میشود و این عملیات نیز بسیار سریع است؛ از این جهت که محتوای این کامپوننتها از همان bundle.js حاوی تمام کدهای برنامه تامین میشود و این فایل تنها یکبار در آغاز برنامه از سرور خوانده شده و سپس توسط مرورگر پردازش میشود. بنابراین در برنامههای SPA، برخلاف برنامههای وب معمولی، هربار که کاربر آدرس متفاوتی را انتخاب میکند، بارگذاری مجدد برنامه و خوانده شدن محتوای متناظر از سرور صورت نمیگیرد؛ این محتوا هم اکنون در bundle.js برنامه مهیا است و قابلیت استفادهی آنی را دارد.
اما کامپوننت Link چگونه کار میکند؟
کامپوننت لینک در نهایت همان anchorهای استاندارد را رندر میکند؛ اما به هر کدام یک onClick را نیز اضافه میکند که سبب جلوگیری از رفتار پیشفرض anchor میشود. به همین جهت مرورگر درخواست اضافهای را به سمت سرور ارسال نمیکند. در اینجا مدیریت کنندهی onClick، تنها Url بالای صفحه را در مرورگر تغییر میدهد. اکنون که Url تغییر کردهاست، یکی از مسیریابیهای تعریف شده، با این Url تطابق یافته و سپس کامپوننت متناظر با آنرا رندر میکند.
بررسی Route props
اگر بر روی لینک نمایش products در منوی راهبری سایت کلیک کرده و سپس به خروجی افزونهی react developer tools دقت کنیم (تصویر فوق)، مشاهده میکنیم که این کامپوننت هم اکنون تعدادی خاصیت را به صورت props در اختیار دارد؛ مانند history (امکان هدایت کاربر را به صفحهای دیگر دارد)، location (آدرس جاری برنامه) و match (اطلاعاتی در مورد الگوریتم تطابق مسیر). کار تنظیم این props، توسط کامپوننت Route ای که کار ثبت مسیریابیها را انجام میدهد، صورت میگیرد. به عبارتی کامپوننت Route، محصور کنندهی کامپوننتی است که آنرا به عنوان پارامتر، دریافت و در صورت تطابق با مسیر جاری، آنرا رندر میکند. همچنین در این بین کار تزریق خواص props یاد شده را نیز انجام میدهد.
ارسال props سفارشی در حین مسیریابی به کامپوننتها
همانطور که بررسی کردیم، کامپوننت Route، حداقل سه خاصیت props را به کامپوننتهایی که رندر میکند، تزریق خواهد کرد. اما در اینجا برای تزریق خواص سفارشی چگونه باید عمل کرد؟
در حین کار با کامپوننت Route، برای ارسال props اضافی، بجای استفاده از ویژگی component آن، باید از ویژگی render استفاده کرد:
<Route path="/products" render={() => <Products param1="123" param2="456" />} />
البته اگر به تصویر فوق دقت کنید، سایر خواص پیشینی که تزریق شده بودند مانند history، location و match، دیگر در اینجا حضور ندارند. برای رفع این مشکل باید تعریف arrow function انجام شده را به صورت زیر تغییر داد:
<Route path="/products" render={props => ( <Products param1="123" param2="456" {...props} /> )} />
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: sample-15-part-01.zip