ممنون بابت این دوره. شما اشاره کردین که قرار است محدودیت "خروجی کوئری SQL، تنها باید معادل یکی از کلاسهای موجودیتهای شما باشد" در نسخهی 1.1 EF Core برطرف شود و با توجه به اینکه در حال حاضر نسخه نسخه 1.1.1 EF Core منتشر شده چطور میتوان از این امکان استفاده کرد؟
ذخیره سازی فایلهای باینری در بانک اطلاعاتی هیچگاه ایدهی خوبی نبوده. این وضعیت با ارائهی SqlFileStream به همراه SQL Server 2008 بهبود یافت و به این صورت تنها یک اشارهگر به فایل در بانک اطلاعاتی ذخیره میشود و نه اصل فایل. پس از آن FileTable به همراه SQL Server 2012 ارائه شد که نسخهی بهبود یافتهی FileStream به شمار میرود و توسط آن امکان دسترسی به متادیتای فایل، درون SQL Server و همچنین امکان کار با فایلها در خارج از SQL Server هم پشتیبانی میشوند. بنابراین اگر از SQL Server 2012 به بعد استفاده میکنید، روش ترجیح داده شده، کار با FileTable است: یک مثال کامل از نحوهی کار با FileTable در NET Core.
+ پشتیبانی کامل از FileStream جزئی از NET Core 3x. خواهد بود.
پیشوند «PERMISSION:» برای شناسایی سیاستهایی که میبایست به صورت خودکار به سیستم معرفی و ثبت شوند، استفاده میشود. نیازی به ذخیرهسازی این پیشوند نیست.
PERMISSION:Users_Create --> Users_Create
پاسخ به بازخوردهای پروژهها
خطای Provider
پروژه با EF 6 نیست و نیاز به به روز رسانی داره اگر از EF 6 میخواهید استفاده کنید: ارتقاء به Entity framework 6 و استفاده از بانکهای اطلاعاتی غیر از SQL Server
به عنوان تمرین، همان برنامهی طراحی گریدی را که تا قسمت 14 تکمیل کردیم، با معرفی مسیریابی بهبود خواهیم بخشید. برای این منظور یک NavBar بوت استرپی را به بالای صفحه اضافه میکنیم که دارای سه لینک movies ،customers و rentals است. به همین جهت نیاز به دو کامپوننت مقدماتی customers و rentals نیز وجود دارد که تنها یک h1 را نمایش میدهند. به علاوه منوی راهبری برنامه نیز باید بر اساس مسیر فعال جاری، با رنگ مشخصی، فعال بودن مسیریابی گزینهی انتخابی را مشخص کند. در این برنامه اگر کاربر، آدرس نامعتبری را وارد کرد، باید به صفحهی not-found هدایت شود. همچنین میخواهیم تمام عناوین فیلمهای نمایش داده شدهی در جدول، تبدیل به لینکهایی به صفحهی جدید جزئیات آنها شوند. در این صفحه باید یک دکمهی Save هم وجود داشته باشد تا با کلیک بر روی آن، به صورت خودکار به صفحهی movies هدایت شویم.
برپایی پیشنیازها
ابتدا کتابخانهی react-router-dom را نصب میکنیم:
سپس کامپوننت App را با BrowserRouter آن در فایل index.js محصور میکنیم؛ تا کار انتقال مدیریت تاریخچهی مرور صفحات در مرورگر، به درخت کامپوننتهای React انجام شود:
ایجاد کامپوننتهای جدید مورد نیاز
برای تکمیل نیازمندیهایی که در مقدمه عنوان شد، این کامپوننتهای جدید را ایجاد میکنیم:
کامپوننت بدون حالت تابعی src\components\customers.jsx با این محتوا:
کامپوننت بدون حالت تابعی src\components\rentals.jsx با این محتوا:
کامپوننت بدون حالت تابعی src\components\notFound.jsx با این محتوا:
کامپوننت بدون حالت تابعی src\components\movieForm.jsx با این محتوا:
ثبت مسیریابیهای مورد نیاز برنامه
پس از نصب کتابخانهی مسیریابی و راه اندازی آن، اکنون نوبت به تعریف مسیریابیهای مورد نیاز برنامه در فایل app.js است:
- در اینجا ابتدا چهار مسیریابی جدید را جهت نمایش صفحات کامپوننتهایی که ایجاد کردیم، تعریف و سپس نکتهی «مدیریت مسیرهای نامعتبر درخواستی» قسمت قبل را نیز با افزودن کامپوننت Redirect، پیاده سازی کردهایم. به علاوه پیشتر نمایش کامپوننت Movies را داخل container تعریف شده داشتیم که اکنون با وجود این مسیریابیها، نیازی به تعریف المان آن نیست و از return تعریف شده، حذف شدهاست.
تا اینجا اگر برنامه را اجرا کنیم، بلافاصله به http://localhost:3000/not-found هدایت میشویم. از این جهت که هنوز مسیریابی را برای / یا ریشهی سایت که در ابتدا نمایش داده میشود، تنظیم نکردهایم. به همین جهت Redirect زیر را پیش از آخرین Redirect تعریف شده اضافه میکنیم تا با درخواست ریشهی سایت، به آدرس /movies هدایت شویم:
و هانطور که در بخش 1 این قسمت بررسی کردیم، چون این مسیریابی با تمام آدرسهای شروع شدهی با / تطابق پیدا میکند، وجود Switch در اینجا ضروری است؛ تا پس از انطباق با اولین مسیر ممکن، کار مسیریابی به پایان برسد. به علاوه با تعریف این Redirect، اگر مثلا آدرس نامعتبر http://localhost:3000/xyz را درخواست کنیم، به آدرس movies/ هدایت میشویم؛ چون / با xyz/ تطابق پیدا کرده و کار در همینجا به پایان میرسد. به همین جهت ذکر ویژگی exact در تعریف این Redirect ویژه ضروری است؛ تا صرفا به ریشهی سایت پاسخ دهد:
افزودن منوی راهبری به برنامه
ابتدا فایل جدید src\components\navBar.jsx را ایجاد میکنیم؛ با این محتوا:
توضیحات:
- ساختار کلی NavBar ای را که ملاحظه میکنید، دقیقا از مثالهای رسمی مستندات بوت استرپ 4 گرفته شدهاست و تمام classهای آن با className جایگزین شدهاند.
- سپس تمام anchorهای موجود در یک منوی راهبری بوت استرپ را به Link و یا NavLink تبدیل کردهایم تا برنامه به صورت SPA عمل کند؛ یعنی با کلیک بر روی هر لینک، بارگذاری کامل صفحه در مرورگر صورت نگیرد و تنها محل و قسمتی که توسط کامپوننتهای Route مشخص شده، به روز رسانی شوند. تفاوت NavLink با Link در کتابخانهی react-router-dom، افزودن خودکار کلاس active به المانی است که بر روی آن کلیک شدهاست. به این ترتیب بهتر میتوان تشخیص داد که هم اکنون در کجای منوی راهبری قرار داریم.
- پس از تبدیل anchorها به Link و یا NavLink، مرحلهی بعد، تبدیل hrefهای لینکهای قبلی به ویژگی to است که هر کدام باید به یکی از مسیریابیهای تنظیم شده، مقدار دهی گردد.
پس از تعریف کامپوننت منوی راهبری سایت، به app.js بازگشته و این کامپوننت را پیش از مسیریابیهای تعریف شده اضافه میکنیم:
در اینجا چون نیاز به بازگشت دو المان NavBar و main وجود داشت، از React.Fragment برای محصور کردن آنها استفاده کردیم.
به علاوه به فایل index.css برنامه مراجعه کرده و padding این navBar را صفر میکنیم تا از بالای صفحه و بدون فاصلهای نمایش داده شود و container اصلی نیز اندکی از پایین آن فاصله پیدا کند:
با این تغییر، اکنون ظاهر برنامه به صورت زیر در خواهد آمد:
اگر دقت کنید چون آدرس http://localhost:3000/movies در حال نمایش است، در منوی راهبری، گزینهی متناظر با آن، با رنگی دیگر مشخص (فعال) شدهاست.
لینک کردن عناوین فیلمهای نمایش داده شده به کامپوننت movieForm
برای تبدیل عناوین نمایش داده شدهی در جدول فیلمها به لینک، به کامپوننت src\components\moviesTable.jsx مراجعه کرده و تغییرات زیر را اعمال میکنیم:
- در قدم اول باید بجای ذکر خاصیت Title در آرایهی ستونهای جدول:
یک محتوای لینک شده را نمایش دهیم:
در اینجا خاصیت content اضافه شدهاست تا یک المان React را مانند Link، بازگشت دهد و چون میخواهیم id هر فیلم نیز در اینجا ذکر شود، آنرا به صورت arrow function تعریف کردهایم تا شیء movie را گرفته و لینک به آنرا تولید کند. در اینجا از یک template literal برای تولید پویای رشتهی منتسب به to استفاده کردهایم.
همچنین این Link را هم باید در بالای این ماژول import کرد:
تا اینجا عناوین فیلمها را تبدیل به لینکهایی کردیم:
تعریف مسیریابی نمایش جزئیات یک فیلم انتخابی
اگر به تصویر فوق دقت کنید، به آدرسهایی مانند http://localhost:3000/movies/5b21ca3eeb7f6fbccd47181a رسیدهایم که به همراه id هر فیلم هستند. اکنون میخواهیم کلیک بر روی این لینکها را جهت فعالسازی صفحهی نمایش جزئیات فیلم، تنظیم کنیم. به همین جهت به فایل app.js مراجعه کرده و مسیریابی زیر را به ابتدای Switch تعریف شده اضافه میکنیم:
که نیاز به این import را هم دارد:
تکمیل کامپوننت نمایش جزئیات یک فیلم
اکنون میخواهیم صفحهی نمایش جزئیات فیلم، به همراه نمایش id فیلم باشد و همچنین با کلیک بر روی دکمهی Save آن، کاربر را به صفحهی movies هدایت کند. به همین جهت فایل src\components\movieForm.jsx را به صورت زیر ویرایش میکنیم:
توضیحات:
- چون این کامپوننت، یک کامپوننت تابعی بدون حالت است، props را باید از طریق آرگومان خود دریافت کند و البته در همینجا امکان Object Destructuring خواصی که از آن نیاز داریم، مهیا است؛ مانند { match, history } که ملاحظه میکنید.
- سپس شیء match، امکان دسترسی به params ارسالی به صفحه را مانند id فیلم، میسر میکند.
- با استفاده از شیء history و متد push آن میتوان علاوه بر به روز رسانی تاریخچهی مرورگر، به مسیر مشخص شده بازگشت که در همینجا و به صورت inline، تعریف شدهاست.
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: sample-17.zip
برپایی پیشنیازها
ابتدا کتابخانهی react-router-dom را نصب میکنیم:
npm i react-router-dom --save
import { BrowserRouter } from "react-router-dom"; //... ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById("root") );
برای تکمیل نیازمندیهایی که در مقدمه عنوان شد، این کامپوننتهای جدید را ایجاد میکنیم:
کامپوننت بدون حالت تابعی src\components\customers.jsx با این محتوا:
import React from "react"; const Customers = () => { return <h1>Customers</h1>; }; export default Customers;
کامپوننت بدون حالت تابعی src\components\rentals.jsx با این محتوا:
import React from "react"; const Rentals = () => { return <h1>Rentals</h1>; }; export default Rentals;
کامپوننت بدون حالت تابعی src\components\notFound.jsx با این محتوا:
import React from "react"; const NotFound = () => { return <h1>Not Found</h1>; }; export default NotFound;
کامپوننت بدون حالت تابعی src\components\movieForm.jsx با این محتوا:
import React from "react"; const MovieForm = () => { return ( <div> <h1>Movie Form</h1> <button className="btn btn-primary">Save</button> </div> ); }; export default MovieForm;
ثبت مسیریابیهای مورد نیاز برنامه
پس از نصب کتابخانهی مسیریابی و راه اندازی آن، اکنون نوبت به تعریف مسیریابیهای مورد نیاز برنامه در فایل app.js است:
import "./App.css"; import React from "react"; import { Redirect, Route, Switch } from "react-router-dom"; import Customers from "./components/customers"; import Movies from "./components/movies"; import NotFound from "./components/notFound"; import Rentals from "./components/rentals"; function App() { return ( <main className="container"> <Switch> <Route path="/movies" component={Movies} /> <Route path="/customers" component={Customers} /> <Route path="/rentals" component={Rentals} /> <Route path="/not-found" component={NotFound} /> <Redirect to="/not-found" /> </Switch> </main> ); } export default App;
تا اینجا اگر برنامه را اجرا کنیم، بلافاصله به http://localhost:3000/not-found هدایت میشویم. از این جهت که هنوز مسیریابی را برای / یا ریشهی سایت که در ابتدا نمایش داده میشود، تنظیم نکردهایم. به همین جهت Redirect زیر را پیش از آخرین Redirect تعریف شده اضافه میکنیم تا با درخواست ریشهی سایت، به آدرس /movies هدایت شویم:
<Redirect from="/" to="/movies" />
<Redirect from="/" exact to="/movies" />
افزودن منوی راهبری به برنامه
ابتدا فایل جدید src\components\navBar.jsx را ایجاد میکنیم؛ با این محتوا:
import React from "react"; import { Link, NavLink } from "react-router-dom"; const NavBar = () => { return ( <nav className="navbar navbar-expand-lg navbar-light bg-light"> <Link className="navbar-brand" to="/"> Home </Link> <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation" > <span className="navbar-toggler-icon" /> </button> <div className="collapse navbar-collapse" id="navbarNavAltMarkup"> <div className="navbar-nav"> <NavLink className="nav-item nav-link" to="/movies"> Movies </NavLink> <NavLink className="nav-item nav-link" to="/customers"> Customers </NavLink> <NavLink className="nav-item nav-link" to="/rentals"> Rentals </NavLink> </div> </div> </nav> ); }; export default NavBar;
- ساختار کلی NavBar ای را که ملاحظه میکنید، دقیقا از مثالهای رسمی مستندات بوت استرپ 4 گرفته شدهاست و تمام classهای آن با className جایگزین شدهاند.
- سپس تمام anchorهای موجود در یک منوی راهبری بوت استرپ را به Link و یا NavLink تبدیل کردهایم تا برنامه به صورت SPA عمل کند؛ یعنی با کلیک بر روی هر لینک، بارگذاری کامل صفحه در مرورگر صورت نگیرد و تنها محل و قسمتی که توسط کامپوننتهای Route مشخص شده، به روز رسانی شوند. تفاوت NavLink با Link در کتابخانهی react-router-dom، افزودن خودکار کلاس active به المانی است که بر روی آن کلیک شدهاست. به این ترتیب بهتر میتوان تشخیص داد که هم اکنون در کجای منوی راهبری قرار داریم.
- پس از تبدیل anchorها به Link و یا NavLink، مرحلهی بعد، تبدیل hrefهای لینکهای قبلی به ویژگی to است که هر کدام باید به یکی از مسیریابیهای تنظیم شده، مقدار دهی گردد.
پس از تعریف کامپوننت منوی راهبری سایت، به app.js بازگشته و این کامپوننت را پیش از مسیریابیهای تعریف شده اضافه میکنیم:
import NavBar from "./components/navBar"; // ... function App() { return ( <React.Fragment> <NavBar /> <main className="container"> // ... </main> </React.Fragment> ); } export default App;
به علاوه به فایل index.css برنامه مراجعه کرده و padding این navBar را صفر میکنیم تا از بالای صفحه و بدون فاصلهای نمایش داده شود و container اصلی نیز اندکی از پایین آن فاصله پیدا کند:
body { margin: 0; padding: 0 0 0 0; font-family: sans-serif; } .navbar { margin-bottom: 30px; } .clickable { cursor: pointer; }
اگر دقت کنید چون آدرس http://localhost:3000/movies در حال نمایش است، در منوی راهبری، گزینهی متناظر با آن، با رنگی دیگر مشخص (فعال) شدهاست.
لینک کردن عناوین فیلمهای نمایش داده شده به کامپوننت movieForm
برای تبدیل عناوین نمایش داده شدهی در جدول فیلمها به لینک، به کامپوننت src\components\moviesTable.jsx مراجعه کرده و تغییرات زیر را اعمال میکنیم:
- در قدم اول باید بجای ذکر خاصیت Title در آرایهی ستونهای جدول:
class MoviesTable extends Component { columns = [ { path: "title", label: "Title" },
class MoviesTable extends Component { columns = [ { path: "title", label: "Title", content: movie => <Link to={`/movies/${movie._id}`}>{movie.title}</Link> },
همچنین این Link را هم باید در بالای این ماژول import کرد:
import { Link } from "react-router-dom";
تعریف مسیریابی نمایش جزئیات یک فیلم انتخابی
اگر به تصویر فوق دقت کنید، به آدرسهایی مانند http://localhost:3000/movies/5b21ca3eeb7f6fbccd47181a رسیدهایم که به همراه id هر فیلم هستند. اکنون میخواهیم کلیک بر روی این لینکها را جهت فعالسازی صفحهی نمایش جزئیات فیلم، تنظیم کنیم. به همین جهت به فایل app.js مراجعه کرده و مسیریابی زیر را به ابتدای Switch تعریف شده اضافه میکنیم:
<Route path="/movies/:id" component={MovieForm} />
import MovieForm from "./components/movieForm";
تکمیل کامپوننت نمایش جزئیات یک فیلم
اکنون میخواهیم صفحهی نمایش جزئیات فیلم، به همراه نمایش id فیلم باشد و همچنین با کلیک بر روی دکمهی Save آن، کاربر را به صفحهی movies هدایت کند. به همین جهت فایل src\components\movieForm.jsx را به صورت زیر ویرایش میکنیم:
import React from "react"; const MovieForm = ({ match, history }) => { return ( <div> <h1>Movie Form {match.params.id} </h1> <button className="btn btn-primary" onClick={() => history.push("/movies")} > Save </button> </div> ); }; export default MovieForm;
- چون این کامپوننت، یک کامپوننت تابعی بدون حالت است، props را باید از طریق آرگومان خود دریافت کند و البته در همینجا امکان Object Destructuring خواصی که از آن نیاز داریم، مهیا است؛ مانند { match, history } که ملاحظه میکنید.
- سپس شیء match، امکان دسترسی به params ارسالی به صفحه را مانند id فیلم، میسر میکند.
- با استفاده از شیء history و متد push آن میتوان علاوه بر به روز رسانی تاریخچهی مرورگر، به مسیر مشخص شده بازگشت که در همینجا و به صورت inline، تعریف شدهاست.
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: sample-17.zip
در مورد کاهش حجم فایلهای XAP سیلورلایت زمانیکه از اسمبلیهای کتابخانههای دیگر مانند Silverlight toolkit استفاده میشود، در این فصل بحث شده است و راه حل، استفاده از گزینهی reduce XAP size by using application library caching است. به این صورت کاربران دیگر به ازای هر بار مشاهدهی سایت نیازی نخواهند داشت تا یک سری کتابخانهی کمکی را که هیچ تغییری در آنها حاصل نخواهد شد، دریافت کنند و اطلاعات آنها از cache مرورگر خوانده میشود. این مورد با کتابخانهها و ابزارهای کمکی تولید شده توسط مایکروسافت کار میکند. اما اگر خودتان یک Silverlight library را تولید کنید، چنین اتفاقی رخ نخواهد داد و باز هم فایل اسمبلی کتابخانهی شما درون فایل XAP اصلی برنامه قرار گرفته و خبری از caching مجزای آن نیست. چرا اینطور است؟ چکار باید کرد؟!
علت آن بر میگردد به نحوهی پیاده سازی library caching در VS.NET و Silverlight . برای این منظور چند مرحله باید طی شود تا این قابلیت برای کتابخانههای ساخت خودمان نیز فعال گردد:
الف) به کتابخانهی خود باید امضای دیجیتال اضافه کنید:
اینکار با استفاده از امکانات خود VS.NET بسیار ساده است. به خواص پروژه مراجعه کنید. سپس برگهی Signing را باز کرده و گزینهی Sign the assembly را انتخاب کنید (شکل زیر). در قسمت choose a strong name key file ، گزینهی new را انتخاب کرده و پس از وارد کردن یک نام دلخواه و گذر واژهای، فایل pfx امضای دیجیتال اسمبلی شما تولید خواهد شد. اکنون تنها کافی است یکبار دیگر برنامه را کامپایل کنید.
ب) به یک فایل extMap.xml هم نیاز است:
هنگام پیاده سازی قابلیت library caching ، VS.NET به دنبال فایلی به نام AssemblyFileName.extmap.xml دقیقا در کنار فایل اسمبلی مورد نظر میگردد. ساختار عمومی این فایل XML به صورت زیر است:
<?xml version="1.0"?>
<manifest xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<assembly>
<name>SLHelper</name>
<version>1.0.0.0</version>
<publickeytoken>f265933def965412</publickeytoken>
<relpath>SLHelper.dll</relpath>
<extension downloadUri="SLHelper.zip" />
</assembly>
</manifest>
نام، شماره نگارش، مسیر قرارگیری فایل اسمبلی مورد نظر و همچنین نام نهایی آن حین جدا سازی آن از XAP برنامه باید مشخص گردد. گزینهی publickeytoken مهمترین تنظیم این فایل است و قسمت الف را به همین منظور نیاز داشتیم. این عدد را به سادگی با استفاده از برنامهی reflector میتوان بدست آورد (شکل زیر).
جهت ساده سازی قسمت (ب)، برنامهی کمکی را از آدرس ذیل میتوانید دریافت کنید:
Utility: Extmap Maker
برای مطالعه بیشتر
Silverlight 3: Cached Assemblies and you can to
پیشتر در مورد HTTP Client جدید Angular، مطلب «ارتقاء به HTTP Client در Angular 4.3» را بررسی کردیم. یکی دیگر از قابلیتهای HttpClient که روش اصلی دسترسی به اطلاعات از راه دور در Angular 5 نیز میباشد، امکان تعریف Interceptors سفارشی برای آن است. به کمک Interceptors میتوان به تمامی درخواستهای HTTP ارسالی و پاسخهای دریافتی از سرور گوش فرا داد و در این بین منطق ویژهای را پیاده سازی کرد؛ مانندcaching ،logging و غیره. در مطلب جاری قصد داریم از این قابلیت برای نمایش یک loading bar مشخص کنندهی شروع و پایان تمامی درخواستهای HTTP استفاده کنیم.
دریافت و نصب پیشنیازها
برای نمایش loading bar در بالای صفحه، از کامپوننت ng2-slim-loading-bar استفاده خواهیم کرد. دمویی از آنرا در اینجا میتوانید مشاهده کنید.
برای نصب آن، ابتدا دستور ذیل را در ریشهی پروژه اجرا کنید:
پس از آن فایل angular-cli.json. را گشوده و فایل css آنرا تعریف نمائید:
در ادامه به فایل app.module.ts مراجعه کرد و ماژول آنرا نیز به نحو ذیل به برنامه معرفی کنید:
پس از این مقدمات، هرجایی که نیاز به استفادهی از آن با کدنویسی باشد، ابتدا سرویس SlimLoadingBarService آنرا به سازندهی کلاس کامپوننت مدنظر تزریق میکنیم و سپس از متدهای start ،stop و complete آن میتوان استفاده کرد.
همچنین برای نمایش این کامپوننت باید selector آن را در فایل app.component.html در بالای صفحه اضافه کرد:
تدارک یک LoaderInterceptor برای استفاده از ng2-slim-loading-bar
در ادامه میخواهیم هر زمانیکه در سراسر برنامه، درخواست HTTP ایی شروع شد، این کامپوننت نمایش داده شود و در پایان درخواست و یا درصورت بروز خطایی، پایان یابد و مخفی شود. برای این منظور یک Interceptor جدید را به صورت ذیل به پوشهی Core برنامه اضافه میکنیم:
با این کدها:
توضیحات:
- برای پیاده سازی یک interceptor جدید، نیاز است کلاس سرویسی را که HttpInterceptor را پیاده سازی میکند، ایجاد کنیم. برای تکمیل این پیاده سازی نیاز است متد intercept را با امضایی که مشاهده میکنید، تعریف کنیم:
- در اینجا پارامتر req به خود درخواست Http اشاره میکند.
- کار پارامتر next تنظیم و بازگشت یک HttpEvent observable توسط متد handle آن است.
برای نمونه در اینجا ابتدا سرویس SlimLoadingBarService به سازندهی کلاس interceptor تزریق شدهاست. سپس توسط آن میتوان به متدهای start و complete این کامپوننت دسترسی یافت. برای مثال در ابتدای کار گوش فرادادن به درخواست جاری، متد start فراخوانی شدهاست و سپس زمانیکه پاسخی از سرور دریافت شده و یا خطایی رخداده، متد complete آن فراخوانی شدهاست.
ثبت و معرفی LoaderInterceptorService به سیستم
برای معرفی interceptor تهیه شده، به فایل app.module.ts مراجعه کرد و قسمت providers آنرا به نحو ذیل تکمیل میکنیم:
آزمایش برنامه
اکنون اگر قسمتهای مختلف برنامه را که با HttpClient جدید کار میکنند بررسی کنید، متوجه خواهید شد که با شروع هر درخواست، loading bar قرمزی در بالای صفحه ظاهر میشود و در پایان درخواست، به صورت خودکار مخفی میگردد. نکتهی مهم این روش عدم نیاز به تغییری در قسمتهای مختلف برنامه است. این interceptor سراسری است و به صورت یکسانی بر روی کل برنامه تاثیر میگذارد.
دریافت و نصب پیشنیازها
برای نمایش loading bar در بالای صفحه، از کامپوننت ng2-slim-loading-bar استفاده خواهیم کرد. دمویی از آنرا در اینجا میتوانید مشاهده کنید.
برای نصب آن، ابتدا دستور ذیل را در ریشهی پروژه اجرا کنید:
npm install ng2-slim-loading-bar --save
"styles": [ "../node_modules/ng2-slim-loading-bar/style.css", "styles.css" ],
import {SlimLoadingBarModule} from 'ng2-slim-loading-bar'; @NgModule({ imports: [ //... SlimLoadingBarModule.forRoot() ] }) export class AppModule { }
پس از این مقدمات، هرجایی که نیاز به استفادهی از آن با کدنویسی باشد، ابتدا سرویس SlimLoadingBarService آنرا به سازندهی کلاس کامپوننت مدنظر تزریق میکنیم و سپس از متدهای start ،stop و complete آن میتوان استفاده کرد.
import {SlimLoadingBarService} from 'ng2-slim-loading-bar';
<ng2-slim-loading-bar></ng2-slim-loading-bar>
تدارک یک LoaderInterceptor برای استفاده از ng2-slim-loading-bar
در ادامه میخواهیم هر زمانیکه در سراسر برنامه، درخواست HTTP ایی شروع شد، این کامپوننت نمایش داده شود و در پایان درخواست و یا درصورت بروز خطایی، پایان یابد و مخفی شود. برای این منظور یک Interceptor جدید را به صورت ذیل به پوشهی Core برنامه اضافه میکنیم:
ng g s core/interceptors/LoaderInterceptor --spec false
import { Injectable } from "@angular/core"; import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from "@angular/common/http"; import { Observable } from "rxjs/Observable"; import "rxjs/add/operator/do"; import { SlimLoadingBarService } from "ng2-slim-loading-bar"; @Injectable() export class LoaderInterceptorService implements HttpInterceptor { constructor(private loadingBar: SlimLoadingBarService) { } intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { // start our loader here this.loadingBar.start(); return next.handle(req).do( (event: HttpEvent<any>) => { if (event instanceof HttpResponse) { this.loadingBar.complete(); } }, (err: any) => { this.loadingBar.complete(); }); } }
- برای پیاده سازی یک interceptor جدید، نیاز است کلاس سرویسی را که HttpInterceptor را پیاده سازی میکند، ایجاد کنیم. برای تکمیل این پیاده سازی نیاز است متد intercept را با امضایی که مشاهده میکنید، تعریف کنیم:
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
- کار پارامتر next تنظیم و بازگشت یک HttpEvent observable توسط متد handle آن است.
برای نمونه در اینجا ابتدا سرویس SlimLoadingBarService به سازندهی کلاس interceptor تزریق شدهاست. سپس توسط آن میتوان به متدهای start و complete این کامپوننت دسترسی یافت. برای مثال در ابتدای کار گوش فرادادن به درخواست جاری، متد start فراخوانی شدهاست و سپس زمانیکه پاسخی از سرور دریافت شده و یا خطایی رخداده، متد complete آن فراخوانی شدهاست.
ثبت و معرفی LoaderInterceptorService به سیستم
برای معرفی interceptor تهیه شده، به فایل app.module.ts مراجعه کرد و قسمت providers آنرا به نحو ذیل تکمیل میکنیم:
@NgModule({ providers: [ { provide: HTTP_INTERCEPTORS, useClass: LoaderInterceptorService, multi: true } ] }) export class AppModule {}
آزمایش برنامه
اکنون اگر قسمتهای مختلف برنامه را که با HttpClient جدید کار میکنند بررسی کنید، متوجه خواهید شد که با شروع هر درخواست، loading bar قرمزی در بالای صفحه ظاهر میشود و در پایان درخواست، به صورت خودکار مخفی میگردد. نکتهی مهم این روش عدم نیاز به تغییری در قسمتهای مختلف برنامه است. این interceptor سراسری است و به صورت یکسانی بر روی کل برنامه تاثیر میگذارد.
WithRequiredDependent مربوط به EF 6.x است و از EF Core حذف شدهاست (در اینجا HasOne و WithOne مطابق مقالهی فوق ارائه شدهاند که واضحتر هستند). نسخهی سازگار با EF 6.x آن در اینجا پیشتر مطرح شدهاست.
پاسخ به پرسشها
چطور باید برای سایت dntips.ir پیشنهاد و نظر ارسال کرد؟
ممنون از پاسختان
خواستم نظری در خصوص tagها بدم. اگر امکان داره Unique باشند. نمونه های زیر در بخش Tag توسط منوی باز شونده پیشنهاد شده:
- Codefirst, EF Code First, EF CodeFirst
- efcore, Ef core
تشکر