- قسمت اول - معرفی و نصب
- قسمت دوم - آشنایی با Pipelineها
- قسمت سوم - آشنایی با Redirection
- قسمت چهارم - نوشتن اولین اسکریپت
- قسمت پنجم - اسکریپت بلاک و توابع
- قسمت ششم - ایجاد Cmdletها توسط #C
- قسمت هفتم - غنیسازی PowerShell
- قسمت هشتم - ماژولها
- قسمت نهم - آشنایی با Crescendo
- قسمت دهم - بررسی مشکلات به همراه پرچم فرمت
- قسمت یازدهم - یک مثال
- قسمت دوازدهم - آشنایی با GitHub Actions و بررسی یک مثال
- قسمت سیزدهم - ساخت یک Static Site Generator ساده توسط PowerShell و GitHub Actions
به روز رسانیهای خوشبینانهی UI
پیاده سازی اعمال CRUD توسط Axios در قسمت قبل، به همراه یک مشکل مهم است: اعمال کار با شبکه و سرور، زمانبر هستند و مدتی طول میکشد تا پاسخ عملیات از سمت سرور دریافت شود. در این بین اگر خطایی رخ دهد، مابقی کدهای نوشته شدهی در متدهایی مانند Update و Delete، اجرا نمیشوند. به این حالت «به روز رسانی بدبینانهی UI» گفته میشود. در حالت خوشبینانه، فرض بر این است که در اکثر موارد، فراخوانی سرور با موفقیت به پایان میرسد. در یک چنین حالتی، ابتدا UI به روز رسانی میشود و سپس فراخوانیهای سمت سرور صورت میگیرند. اگر این فراخوانی با شکست مواجه شد، مجددا UI را به حالت قبلی آن باز میگردانیم:
handleDelete = async post => { const posts = this.state.posts.filter(item => item.id !== post.id); this.setState({ posts }); await axios.delete(`${apiEndpoint}/${post.id}`); };
اما اگر در این بین خطایی رخ داد، چه باید کرد؟ باید آخرین تغییر انجام شده را به حالت اول باز گرداند. انجام یک چنین کاری در React سادهاست. چون ما state را به صورت مستقیم ویرایش نمیکنیم، همیشه میتوان ارجاعی را به state قبلی، ذخیره و سپس در صورت نیاز آنرا بازیابی کرد:
handleDelete = async post => { const originalPosts = this.state.posts; const posts = this.state.posts.filter(item => item.id !== post.id); this.setState({ posts }); // Optimistic Update try { await axios.delete(`${apiEndpoint}/${post.id}`); } catch (ex) { alert("An error occurred when deleting a post!"); this.setState({ posts: originalPosts }); // Undo changes } };
مدیریت خطاهای رخ دادهی در حین فراخوانی سرور
تا اینجا مشاهده کردیم که یک روش مدیریت خطاها در کدهای Axios، قرار دادن آنها در یک قطعه کد try/catch است. در اینجا نیز باید بتوان بین خطاهای پیش بینی شده و نشده، تفاوت قائل شد.
- خطاهای پیش بینی شده: برای مثال اگر درخواست حذف رکوردی را دادیم که در بانک اطلاعاتی موجود نیست، انتظار داریم سرور، خطای 404 یا return NotFound را بازگشت دهد و یا 400 که معادل bad request است و در حالت ارسال دادههایی غیرمعتبر، رخ میدهد. در این موارد بهتر است خطاهایی خاص را به کاربران نمایش داد؛ برای مثال رکورد درخواستی وجود ندارد یا پیشتر حذف شدهاست.
- خطاهای پیش بینی نشده: این نوع خطاها نباید و یا قرار نیست در شرایط عادی رخ دهند. برای مثال اگر شبکه در دسترس نیست، امکان ارتباط با سرور نیز میسر نخواهد بود و یا حتی ممکن است خطایی در کدهای سمت سرور، سبب بروز خطایی شده باشد. این نوع خطاها ابتدا باید لاگ شوند تا با بررسیهای آتی آنها، بتوان مشکلات پیش بینی نشده را بهتر برطرف کرد. همچنین در یک چنین مواردی، باید یک پیام خطای خیلی عمومی را به کاربر نمایش داد؛ برای مثال «یک خطای پیش بینی نشده رخ دادهاست.».
برای مدیریت این دو حالت باید به جزئیات شیء ex، در بدنهی catch، دقت کرد که دارای دو خاصیت request و response است. اگر ex.response تنظیم شده بود، یعنی دریافت خروجی از سرور موفقیت آمیز بودهاست. اگر سرور در دسترس نباشد و یا برنامهی سمت سرور کرش کرده باشد، ex.response نال خواهد بود. اگر ex.request نال نبود، یعنی ارسال درخواست به سمت سرور با موفقیت انجام شدهاست. برای مثال جهت بررسی خطای مورد انتظار 404، میتوان در قسمت catch(ex) به صورت زیر عمل کرد:
try { await axios.delete(`${apiEndpoint}/${post.id}`); } catch (ex) { if (ex.response && ex.response.status === 404) { alert("This post has already been deleted!"); } else { console.log("Error", ex); alert("An unexpected error occurred when deleting a post!"); } this.setState({ posts: originalPosts }); // Undo changes }
عموما خطاهای پیشبینی شده را لاگ نمیکنیم؛ چون ممکن است کاربر، یک صفحه را در چندین برگه باز کرده باشد و در یکی، رکوردی را حذف کند. در این حال، این رکورد هنوز در برگههای دیگر موجود است و اگر مجددا درخواست حذف آنرا صادر کند، مشکل خاصی از دیدگاه برنامه رخ ندادهاست و نیازی به پیگیریهای آتی را ندارد. یعنی صرفا یک client error است.
مدیریت سراسری خطاهای رخ دادهی در حین فراخوانی سرور
برای مدیریت خطاها، نیاز است یک چنین try/catchهایی را در تمام قسمتهای برنامه که با سرور کار میکنند، قرار دهیم. برای کاهش این کدهای تکراری، از interceptors کتابخانهی Axios استفاده میشود. در این کتابخانه میتوان در جاهائیکه درخواستی به سمت سرور ارسال میشود و یا پاسخی از سمت سرور دریافت میشود، قطعه کدهایی سراسری را قرار داد و بر روی درخواست و یا پاسخ، تغییراتی را اعمال کرد و یا حتی اطلاعات مربوطه را لاگ کرد؛ به این نوع قطعه کدها، interceptor گفته میشود و برای تعریف آنها میتوان از axios.interceptors.request و یا axios.interceptors.response، خارج از کلاس جاری استفاده کرد. برای مثال بر روی شیء axios.interceptors.response، میتوان متد use را فراخوانی کرد که دو پارامتر را که هر کدام یک callback function هستند، میپذیرد. اولی در صورت موفقیت آمیز بودن response فراخوانی میشود و دومی در صورت شکست آن. اگر نیازی به هر کدام نبود، میتوان آنرا به null مقدار دهی کرد. اگر مدیریت قسمت شکست علمیات مدنظر است، نیاز خواهد بود در پایان این callback function، یک Rejected Promise را بازگشت داد تا ادامهی برنامه، به درستی مدیریت شود. در این حالت اگر خطایی رخ دهد، ابتدا این interceptor فراخوانی میشود و سپس کنترل به بدنهی catch منتقل خواهد شد:
import "./App.css"; import axios from "axios"; import React, { Component } from "react"; axios.interceptors.response.use(null, error => { console.log("interceptor called."); return Promise.reject(error); }); const apiEndpoint = "https://localhost:5001/api/posts"; class App extends Component {
axios.interceptors.response.use(null, error => { const expectedError = error.response && error.response.status >= 400 && error.response.status < 500; if (!expectedError) { console.log("Error", error); alert("An unexpected error occurred when deleting a post!"); } return Promise.reject(error); });
یک نکته: استفاده از try/catchها فقط برای بازگشت UI به حالت قبلی و یا نمایش خطایی خاص به کاربر توصیه میشوند. اگر از روش «به روز رسانیهای خوشبینانهی UI» استفاده نمیکنید و همچنین خطاهای ویژهای بجز خطای عمومی لاگ شدهی در interceptor فوق مدنظر شما نیست، نیازی هم به try/catch نخواهد بود و پس از بروز خطا، قسمتهای بعدی کد اجرا نمیشوند؛ اما خطای عمومی فوق نمایش داده خواهد شد.
ایجاد یک HTTP Service با قابلیت استفادهی مجدد
تا اینجا تعریف interceptor را پیش از کلاس کامپوننت جاری قرار دادهایم که هم سبب شلوغی این ماژول شدهاست و هم در صورت نیاز به آن در سایر برنامهها، باید همین قطعه کد را مجددا در آنها کپی کرد. به همین جهت پوشهی جدید src\services را ایجاد کرده و سپس فایل src\services\httpService.js را در آن با محتوای زیر ایجاد میکنیم:
import axios from "axios"; axios.interceptors.response.use(null, error => { const expectedError = error.response && error.response.status >= 400 && error.response.status < 500; if (!expectedError) { console.log("Error", error); alert("An unexpected error occurred when deleting a post!"); } return Promise.reject(error); }); export default { get: axios.get, post: axios.post, put: axios.put, delete: axios.delete };
سپس به app.js مراجعه کرده و این ماژول را با یک نام دلخواه import میکنیم:
import http from "./services/httpService";
ایجاد یک ماژول Config
بهبود دیگری را که میتوانیم اعمال کنیم، انتقال const apiEndpoint تعریف شده، به یک ماژول مجزا است؛ تا اگر نیاز به استفادهی از آن در قسمتهای دیگری نیز وجود داشت، به سادگی بتوان آنرا مدیریت کرد. به همین جهت فایل جدید src\config.json را با محتوای زیر ایجاد میکنیم:
{ "apiEndpoint" : "https://localhost:5001/api/posts" }
import config from "./config.json";
نمایش بهتر خطاها به کاربر توسط کتابخانهی react-toastify
بجای alert توکار مرورگرها، میتوان یک صفحهی دیالوگ زیباتر را برای نمایش خطاها درنظر گرفت. به همین جهت ابتدا کتابخانهی react-toastify را نصب میکنیم:
> npm i react-toastify --save
import { ToastContainer } from "react-toastify"; import "react-toastify/dist/ReactToastify.css";
render() { return ( <React.Fragment> <ToastContainer />
import { toast } from "react-toastify"; // ... axios.interceptors.response.use(null, error => { // ... if (!expectedError) { // ... toast.error("An unexpected error occurrred."); }
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: sample-22-backend-part-03.zip و sample-22-frontend-part-03.zip
var collection = ['a', 1, /3/, {}];
collection[0];
collection.length
var numbers = [1, 2, 3]; _.each(numbers, function (num) { write(num); });
var ary = [1, 5, 10]; var match = ary.find(item => item > 8);
var match = ary.findIndex(item => item > 8);
ary.find('a'); // خروجی ["a", "a", "a"]
var ary = [1, 5, 10, 5, 6]; ary.fill('a', 2, 3)
// خروجی [ 1, 5, "a", 5, 6 ]
[1, 2, 3, 4, 5].copyWithin(0, 3);
// [4, 5, 3, 4, 5]
[1, 2, 3, 4, 5].copyWithin(0, 3, 4); // خروجی // [4, 2, 3, 4, 5]
var ary = new Array(1, 2);
var ary = new Array(1, 2, 3);
var ary = new Array(3);
var Ofary = Array.of(3);
var set = new Set(); set.add(1); set.add(2); set.add(3); console.log(set.size); // logs 3
var set = new Set([1, 2, 3]); console.log(set.size); // logs 3
var set = new Set(); set.has(1); // false set.add(1); set.has(1); // true set.clear(); set.has(1); // false set.add(1); set.add(2); set.size; // 2 set.delete(2); set.size; // 1
var set = new Set(); set.add('Vahid'); set.add('Sirwan'); var i = 0; set.forEach(item => i++); console.log(i);
var set = new Set(); set.add('Vahid'); set.add('Sirwan'); var i = 0; for(let item of set) { i++; } console.log(i);
var set = new Set(); set.add("Sirwan"); set.add(1); set.add("Afifi"); var setIter = set.entries(); console.log(setIter.next().value); // ["Sirwan", "Sirwan"] console.log(setIter.next().value); // [1, 1] console.log(setIter.next().value); // ["Afifi", "Afifi"]
var map = new Map(); map.set('name', 'Sirwan'); map.get('name'); // Sirwan
var map = new Map([['name', 'Sirwan'], ['age', 27]]); map.has('age'); // true map.get('age'); // 27 map.get('name'); // Sirwan
var map = new Map(); map.set(1, true); map.has("1"); // false map.set("1", true); map.has("1"); // true
var map = new Map([['name', 'Sirwan'], ['age', 27]]); var i = 0; map.forEach(function (value, key) { i++; }); console.log(i); // log 2
for (var [key, value] of map) { i++; }
var newArray = new Array(); newArray["name"] = "Sirwan"; newArray["lastName"] = "Afifi";
let user1 = { name: "Vahid" }; let user2 = { name: "Sirwan" }; let result = {}; result[user1] = 10; result[user2] = 20; console.log(result[user1]); // logs 20 console.log(result[user2]); // logs 20
result["[object object]"] = 10; result["[object object]"] = 20; console.log(result["[object object]"]); // logs 20 console.log(result["[object object]"]); // logs 20
- WeakMap و WeakSet فاقد پراپرتیهای size, entries, values و متد foreach هستند.
- WeakMap همچنین فاقد keys است.
پیشنیازها
«بررسی روش آپلود فایلها در ASP.NET Core»
«ارسال فایل و تصویر به همراه دادههای دیگر از طریق jQuery Ajax »
- در مطلب اول، روش دریافت فایلها از کلاینت، در سمت سرور و ذخیره سازی آنها در یک برنامهی ASP.NET Core بررسی شدهاست که کلیات آن در اینجا نیز صادق است.
- در مطلب دوم، روش کار با FormData استاندارد بررسی شدهاست. هرچند در مطلب جاری از jQuery استفاده نمیشود، اما نکات نحوهی کار با شیء FormData استاندارد، در اینجا نیز یکی است.
برپایی پروژههای مورد نیاز
ابتدا یک پوشهی جدید مانند UploadFilesSample را ایجاد کرده و در داخل آن دستور زیر را اجرا میکنیم:
dotnet new react
سپس در این پوشه، پوشهی ClientApp پیشفرض آنرا حذف میکنیم؛ چون کمی قدیمی است. همچنین فایلهای کنترلر و سرویس آب و هوای پیشفرض آنرا به همراه پوشهی صفحات Razor آن، حذف و پوشهی خالی wwwroot را نیز به آن اضافه میکنیم.
همچنین بجای تنظیم پیش فرض زیر در فایل کلاس آغازین برنامه:
spa.UseReactDevelopmentServer(npmScript: "start");
spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");
اکنون در ریشهی پروژهی ASP.NET Core ایجاد شده، دستور زیر را صادر میکنیم تا پروژهی کلاینت React را با فرمت جدید آن ایجاد کند:
> create-react-app clientapp
> cd clientapp > npm install --save bootstrap axios react-toastify
- برای استفاده از شیوهنامههای بوت استرپ، بستهی bootstrap نیز در اینجا نصب میشود که برای افزودن فایل bootstrap.css آن به پروژهی React خود، ابتدای فایل clientapp\src\index.js را به نحو زیر ویرایش خواهیم کرد:
import "bootstrap/dist/css/bootstrap.css";
- برای نمایش پیامهای برنامه از کامپوننت react-toastify استفاده میکنیم که پس از نصب آن، با مراجعه به فایل app.js نیاز است importهای لازم آنرا اضافه کنیم:
import { ToastContainer } from "react-toastify"; import "react-toastify/dist/ReactToastify.css";
render() { return ( <React.Fragment> <ToastContainer />
ایجاد کامپوننت React فرم ارسال فایلها به سمت سرور
پس از این مقدمات، فایل جدید clientapp\src\components\UploadFileSimple.jsx را ایجاد کرده و به صورت زیر تکمیل میکنیم:
import React, { useState } from "react"; import axios from "axios"; import { toast } from "react-toastify"; export default function UploadFileSimple() { const [description, setDescription] = useState(""); const [selectedFile1, setSelectedFile1] = useState(); const [selectedFile2, setSelectedFile2] = useState(); return ( <form> <fieldset className="form-group"> <legend>Support Form</legend> <div className="form-group row"> <label className="form-control-label" htmlFor="description"> Description </label> <input type="text" className="form-control" name="description" onChange={event => setDescription(event.target.value)} value={description} /> </div> <div className="form-group row"> <label className="form-control-label" htmlFor="file1"> File 1 </label> <input type="file" className="form-control" name="file1" onChange={event => setSelectedFile1(event.target.files[0])} /> </div> <div className="form-group row"> <label className="form-control-label" htmlFor="file2"> File 2 </label> <input type="file" className="form-control" name="file2" onChange={event => setSelectedFile2(event.target.files[0])} /> </div> <div className="form-group row"> <button className="btn btn-primary" type="submit" > Submit </button> </div> </fieldset> </form> ); }
- توسط آن یک textbox به همراه دو فیلد ارسال فایل، به فرم اضافه شدهاند.
- مرحلهی بعد، دسترسی به فایلهای انتخابی کاربر و همچنین مقدار توضیحات وارد شدهاست. به همین جهت با استفاده از useState Hook، روش دریافت و تنظیم این مقادیر را مشخص کردهایم:
const [description, setDescription] = useState(""); const [selectedFile1, setSelectedFile1] = useState(); const [selectedFile2, setSelectedFile2] = useState();
- پس از طراحی state این فرم، مرحلهی بعدی، استفاده از متدهای set تمام useStateهای فوق است. برای مثال در مورد یک textbox معمولی، میتوان آنرا به صورت inline تعریف کرد و با هر بار تغییری در محتوای آن، این رخداد را به متد setDescription ارسال نمود تا مقدار وارد شده را به متغیر حالت description انتساب دهد:
<input type="text" className="form-control" name="description" onChange={event => setDescription(event.target.value)} value={description} />
<input type="file" className="form-control" name="file1" onChange={event => setSelectedFile1(event.target.files[0])} />
تشکیل مدل ارسال دادهها به سمت سرور
در فرمهای معمولی، عموما دادهها به صورت یک شیء JSON به سمت سرور ارسال میشوند؛ اما در اینجا وضع متفاوت است و به همراه توضیحات وارد شده، دو فایل باینری نیز وجود دارند.
در حالت ارسال متداول فرمهایی که به همراه المانهای دریافت فایل هستند، ابتدا یک ویژگی enctype با مقدار multipart/form-data به المان فرم اضافه میشود و سپس این فرم به سادگی قابلیت post-back به سمت سرور را پیدا میکند:
<form enctype="multipart/form-data" action="/upload" method="post"> <input id="file-input" type="file" /> </form>
let file = document.getElementById("file-input").files[0]; let formData = new FormData(); formData.append("file", file); fetch('/upload/image', {method: "POST", body: formData});
در یک برنامهی React نیز باید دقیقا چنین مراحلی طی شوند. تا اینجا کار دسترسی به مقدار files[0] و تشکیل متغیرهای حالت فرم را انجام دادهایم. در مرحلهی بعد، شیء FormData را تشکیل خواهیم داد:
// ... export default function UploadFileSimple() { // ... const handleSubmit = async event => { event.preventDefault(); const formData = new FormData(); formData.append("description", description); formData.append("file1", selectedFile1); formData.append("file2", selectedFile2); toast.success("Form has been submitted successfully!"); setDescription(""); }; return ( <form onSubmit={handleSubmit}> </form> ); }
ارسال مدل دادههای فرم React به سمت سرور
پس از تشکیل شیء FormData در متد مدیریت کنندهی handleSubmit، اکنون با استفاده از کتابخانهی axios، کار ارسال این اطلاعات را به سمت سرور انجام خواهیم داد:
// ... export default function UploadFileSimple() { const apiUrl = "https://localhost:5001/api/SimpleUpload/SaveTicket"; // ... const [isUploading, setIsUploading] = useState(false); const handleSubmit = async event => { event.preventDefault(); const formData = new FormData(); formData.append("description", description); formData.append("file1", selectedFile1); formData.append("file2", selectedFile2); try { setIsUploading(true); const { data } = await axios.post(apiUrl, formData, { headers: { "Content-Type": "multipart/form-data" }} }); toast.success("Form has been submitted successfully!"); console.log("uploadResult", data); setIsUploading(false); setDescription(""); } catch (error) { setIsUploading(false); toast.error(error); } }; return ( // ... ); }
در قطعه کد فوق، متغیر جدید حالت isLoading را نیز مشاهده میکنید. از آن میتوان برای فعال و غیرفعال کردن دکمهی submit فرم در زمان ارسال اطلاعات به سمت سرور، استفاده کرد:
<button disabled={ isUploading } className="btn btn-primary" type="submit" > Submit </button>
اعتبارسنجی سمت کلاینت فایلهای ارسالی به سمت سرور
در اینجا شاید نیاز باشد نوع و یا اندازهی فایلهای انتخابی توسط کاربر را تعیین اعتبار کرد. به همین جهت متدی را برای اینکار به صورت زیر تهیه میکنیم:
const isFileValid = selectedFile => { if (!selectedFile) { // toast.error("Please select a file."); return false; } const allowedMimeTypes = [ "image/png", "image/jpeg", "image/gif", "image/svg+xml" ]; if (!allowedMimeTypes.includes(selectedFile.type)) { toast.error(`Invalid file type: ${selectedFile.type}`); return false; } const maxFileSize = 1024 * 500; const fileSize = selectedFile.size; if (fileSize > maxFileSize) { toast.error( `File size ${(fileSize / 1024).toFixed( 2 )} KB must be less than ${maxFileSize / 1024} KB` ); return false; } return true; };
اکنون برای استفادهی از این متد دو راه وجود دارد:
الف) استفاده از آن در متد مدیریت کنندهی submit اطلاعات:
const handleSubmit = async event => { event.preventDefault(); if (!isFileValid(selectedFile1) || !isFileValid(selectedFile2)) { return; }
ب) استفادهی از آن جهت غیرفعال کردن دکمهی submit:
<button disabled={ isUploading || !isFileValid(selectedFile1) || !isFileValid(selectedFile2) } className="btn btn-primary" type="submit" > Submit </button>
نمایش درصد پیشرفت آپلود فایلها
کتابخانهی axios، امکان دسترسی به میزان اطلاعات آپلود شدهی به سمت سرور را به صورت یک رخداد فراهم کردهاست که در ادامه از آن برای نمایش درصد پیشرفت آپلود فایلها استفاده میکنیم:
const startTime = Date.now(); const { data } = await axios.post(apiUrl, formData, { headers: { "Content-Type": "multipart/form-data" }, onUploadProgress: progressEvent => { const { loaded, total } = progressEvent; const timeElapsed = Date.now() - startTime; const uploadSpeed = loaded / (timeElapsed / 1000); setUploadProgress({ queueProgress: Math.round((loaded / total) * 100), uploadTimeRemaining: Math.ceil((total - loaded) / uploadSpeed), uploadTimeElapsed: Math.ceil(timeElapsed / 1000), uploadSpeed: (uploadSpeed / 1024).toFixed(2) }); } });
const [uploadProgress, setUploadProgress] = useState({ queueProgress: 0, uploadTimeRemaining: 0, uploadTimeElapsed: 0, uploadSpeed: 0 });
const showUploadProgress = () => { const { queueProgress, uploadTimeRemaining, uploadTimeElapsed, uploadSpeed } = uploadProgress; if (queueProgress <= 0) { return <></>; } return ( <table className="table"> <thead> <tr> <th width="15%">Event</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td> <strong>Elapsed time</strong> </td> <td>{uploadTimeElapsed} second(s)</td> </tr> <tr> <td> <strong>Remaining time</strong> </td> <td>{uploadTimeRemaining} second(s)</td> </tr> <tr> <td> <strong>Upload speed</strong> </td> <td>{uploadSpeed} KB/s</td> </tr> <tr> <td> <strong>Queue progress</strong> </td> <td> <div className="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow={queueProgress} style={{ width: queueProgress + "%" }} > {queueProgress}% </div> </td> </tr> </tbody> </table> ); };
{showUploadProgress()}
در اینجا از کامپوننت progress-bar خود بوت استرپ برای نمایش درصد آپلود فایلها استفاده شدهاست. اگر style آنرا هر بار با مقدار جدید queueProgress به روز رسانی کنیم، سبب نمایش پویای این progress-bar خواهد شد.
یک نکته: اگر میخواهید درصد پیشرفت آپلود را در حالت آزمایش local بهتر مشاهده کنید، دربرگهی network، سرعت را بر روی 3G تنظیم کنید (مانند تصویر ابتدای بحث)؛ در غیراینصورت همان ابتدای کار به علت بالا بودن سرعت ارسال فایلها، 100 درصد را مشاهده خواهید کرد.
دریافت فرم React درخواست پشتیبانی، در سمت سرور و ذخیرهی فایلهای آن
بر اساس نحوهی تشکیل FormData سمت کلاینت:
const formData = new FormData(); formData.append("description", description); formData.append("file1", selectedFile1); formData.append("file2", selectedFile2);
using Microsoft.AspNetCore.Http; namespace UploadFilesSample.Models { public class Ticket { public int Id { set; get; } public string Description { set; get; } public IFormFile File1 { set; get; } public IFormFile File2 { set; get; } } }
پس از آن کنترلر ذخیره سازی اطلاعات Ticket را مشاهده میکنید:
using System.IO; using System.Threading.Tasks; using Microsoft.AspNetCore.Hosting; using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Mvc; using UploadFilesSample.Models; namespace UploadFilesSample.Controllers { [Route("api/[controller]")] [ApiController] public class SimpleUploadController : Controller { private readonly IWebHostEnvironment _environment; public SimpleUploadController(IWebHostEnvironment environment) { _environment = environment; } [HttpPost("[action]")] public async Task<IActionResult> SaveTicket([FromForm]Ticket ticket) { var file1Path = await saveFileAsync(ticket.File1); var file2Path = await saveFileAsync(ticket.File2); //TODO: save the ticket ... get id return Created("", new { id = 1001 }); } private async Task<string> saveFileAsync(IFormFile file) { const string uploadsFolder = "uploads"; var uploadsRootFolder = Path.Combine(_environment.WebRootPath, "uploads"); if (!Directory.Exists(uploadsRootFolder)) { Directory.CreateDirectory(uploadsRootFolder); } //TODO: Do security checks ...! if (file == null || file.Length == 0) { return string.Empty; } var filePath = Path.Combine(uploadsRootFolder, file.FileName); using (var fileStream = new FileStream(filePath, FileMode.Create)) { await file.CopyToAsync(fileStream); } return $"/{uploadsFolder}/{file.Name}"; } } }
- تزریق IWebHostEnvironment در سازندهی کلاس کنترلر، سبب میشود تا از طریق خاصیت WebRootPath آن، به wwwroot دسترسی پیدا کنیم و فایلهای نهایی را در آنجا ذخیره سازی کنیم.
- همانطور که ملاحظه میکنید، هنوز هم model binding کار کرده و میتوان شیء Ticket را به نحو متداولی دریافت کرد:
public async Task<IActionResult> SaveTicket([FromForm]Ticket ticket)
const { data } = await axios.post(apiUrl, formData, { headers: { "Content-Type": "multipart/form-data" }} });
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: UploadFilesSample.zip
برای اجرای آن، پس از صدور فرمان dotnet restore که سبب بازیابی وابستگیهای سمت کلاینت نیز میشود، ابتدا به پوشهی clientapp مراجعه کرده و فایل run.cmd را اجرا کنید. با اینکار react development server بر روی پورت 3000 شروع به کار میکند. سپس به پوشهی اصلی برنامهی ASP.NET Core بازگشت شده و فایل dotnet_run.bat را اجرا کنید. این اجرا سبب راه اندازی وب سرور برنامه و همچنین ارائهی برنامهی React بر روی پورت 5001 میشود.
در نگارشهای اخیر داتنت، NET CLI. به همراه تغییرات قابل توجهی بودهاست که در این مطلب و نظرات آن، موارد مهم این تغییرات را بررسی خواهیم کرد.
console logger بهبود یافتهی داتنت 8
یکی از تغییرات بسیار جالب توجه و مفید NET CLI. در داتنت 8، امکان دسترسی به خروجی لاگهای ساختار یافتهی اعمال خط فرمان آن است:
اگر پروژهی خود را با استفاده از دستور dotnet build، کامپایل میکنید، خروجی پیشفرض این دستور خط فرمان، کلی و بدون ارائهی جزئیات است؛ اما میتوان آنرا در داتنت 8، به شکل تصویر فوق، تغییر داد و به این مزایا رسید:
- امکان مشاهدهی زمان کامپایل هر قسمت به صورت جداگانه
- امکان مشاهدهی پویای درصد انجام عملیات
- امکان مشاهدهی جزئیات کامپایل هر target framework به صورت مجزا
- دسترسی به یک خروجی رنگی و زیباتر
این خروجی را که به صورت پیشفرض فعال نیست، میتوان به دو صورت:
الف) سراسری و با اجرای دستور PowerShell زیر:
[Environment]::SetEnvironmentVariable("MSBUILDTERMINALLOGGER", "auto", "User")
که متغیر محیطی MSBUILDTERMINALLOGGER را به auto تنظیم میکند،
ب) و یا با استفاده از سوئیچ tl-- به ازای هر دستور dotnet build، به صورت جداگانهای فعال کرد:
dotnet build --tl
یک نکته: این قابلیت جالب و مهم، در دات نت 9، به صورت پیشفرض فعال است و نیازی به تنظیم خاصی ندارد.
ایجاد فاکتور فروش
var salePrice = attributes.RowData.TableRowData .GetSafeStringValueOf<Transaction>(x => x.SalePrice, nullValue: "0") .PadLeft(numColumns, ' ');
در تابع RenderingCell را باید به چه صورت تغییر دهم چون من از نوع AnonymousTypeList استفاده میکنم.
ممنونم
شروع به کار با Postman
پس از نصب و اجرای Postman، در ابتدا درخواست میکند که اکانتی را در سایت آنها ایجاد کنید. البته این مورد اختیاری است و امکان ذخیره سازی بهتر کارها را فراهم میکند. همچنین در اولین بار اجرای برنامه، یک صفحهی دیالوگ انتخاب گزینههای مختلف را نمایش میدهد که میتوانید نمایش آتی آنرا با برداشتن تیک Show this window on launch، غیرفعال کنید.
رابط کاربری Postman، از چندین قسمت تشکیل میشود:
1) Request builder
در قسمت سمت راست و بالای رابط کاربری Postman میتوان انواع و اقسام درخواستها را جهت ارسال به یک Web API، ساخت و ایجاد کرد. توسط آن میتوان HTTP method، آدرس، بدنه، هدرها و کوکیهای یک درخواست را تنظیم کرد. برای مثال در اینجا httpbin.org را وارد کرده و بر روی دکمهی send کلیک کنید:
2) قسمت نمایش Response
پس از ارسال درخواست، بلافاصله، نتیجهی نهایی را در ذیل قسمت ساخت درخواست، میتوان مشاهده کرد:
در اینجا status code بازگشتی از سرور و همچنین response body را مشاهده میکنید. به علاوه نوع خروجی را نیز HTML تشخیص دادهاست و با توجه به اینکه این درخواست، به یک وب سایت معمولی بودهاست، طبیعی میباشد.
همچنین در این خروجی، سه برگهی pretty/raw/preview نیز قابل مشاهده هستند. حالت pretty آنرا که به همراه syntax highlighting است، مشاهده میکنید. اگر حالت نمایش raw را انتخاب کنید، حالت متنی و اصل خروجی بازگشتی از سمت سرور را مشاهده خواهید کرد. برگهی preview آن، این خروجی را شبیه به یک مرورگر نمایش میدهد.
3) قسمت History
با ارسال این درخواست، در سمت چپ صفحه، تاریخچهی این عملیات نیز درج میشود:
4) رابط کاربری چند برگهای
برای ارسال یک درخواست جدید، یا میتوان مجددا یکی از گزینههای History را انتخاب کرد و آنرا ارسال نمود و یا میتوان در همان قسمت سمت راست و بالای رابط کاربری، بر روی دکمهی + کلیک و برگهی جدیدی را جهت ایجاد درخواستی جدید، باز کرد:
در اینجا درخواستی را به endpoint جدید https://httpbin.org/get ارسال کردهایم که در آن نوع پروتکل HTTPS نیز صریحا ذکر شدهاست. اگر به خروجی دریافتی از سرور دقت کنید، اینبار نوع بازگشتی را JSON تشخیص دادهاست که خروجی متداول بسیاری از HTTP Restful APIs است. در این حالت، انتخاب نوع نمایش pretty/raw/preview آنچنان تفاوتی را ایجاد نمیکند و همان حالت pretty که syntax highlighting را نیز به همراه دارد، مناسب است.
ارسال کوئری استرینگها توسط Postman
برای ارسال درخواستی به همراه کوئری استرینگها مانند https://httpbin.org/get?param1=val1¶m2=val2، میتوان به صورت زیر عمل کرد:
یا میتوان مستقیما URL فوق را وارد کرد و سپس بر روی دکمهی send کلیک نمود و یا در ذیل این قسمت، در برگهی Params نیز این کوئری استرینگها به صورت key/valueهایی ظاهر میشوند که وارد کردن آنها به این نحو سادهتر است؛ خصوصا اگر تعداد این پارامترها زیاد باشد، تغییر پارامترها و آزمایش آنها توسط این رابط کاربری گرید مانند، به سهولت قابل انجام است. همچنین جائیکه علامت check-mark را مشاهده میکنید، میتوان اشارهگر ماوس را قرار داد تا آیکن تغییر ترتیب پارامترها نیز ظاهر شود. به این ترتیب توسط drag & drop میتوان ترتیب این ردیفها را تغییر داد:
اگر نیازی به پارامتری ندارید، میتوانید با عبور اشارهگر ماوس از روی یک ردیف، علامت ضربدر حذف کلی آن ردیف را نیز مشاهده کنید و یا با برداشتن تیک هر کدام میتوان به سادگی و بسیار سریع، بجای حذف یک پارامتر، آنرا غیرفعال و یک URL جدید را تولید و آزمایش کرد که برای آزمایش دستی حالتهای مختلف یک API، صرفهجویی زمانی قابل توجهی را فراهم میکند.
ذخیره سازی عملیات انجام شده
تا اینجا اگر به رابط کاربری تولید شده دقت کنید، بالای هر برگه، یک علامت دایرهای نارنجی رنگ، قابل مشاهدهاست که به معنای عدم ذخیره سازی آن برگهاست.
در همینجا بر روی دکمهی Save کنار دکمهی Send کلیک کنید. اگر دقت کنید، دکمهی Save دیالوگ ظاهر شده غیرفعال است:
علت اینجا است که در Postman نمیتوان یک تک درخواست را به صورت مستقل ذخیره کرد. Postman درخواستها را در مجموعههای خاص خودش (collections) مدیریت میکند؛ چیزی شبیه به پوشهی bookmarks، در یک مرورگر. بنابراین در همینجا بر روی لینک Create collection کلیک کرده و برای مثال نام گروه دلخواهی را مانند httpbin وارد کنید. سپس بر روی دکمهی check-mark کنار آن کلیک نمائید تا این مجموعه ایجاد شود.
اکنون پس از ایجاد این مجموعه و انتخاب آن، دکمهی Save to httpbin در پایین صفحه ظاهر میشود.
به صورت پیشفرض، نام فیلد درخواست، در این صفحهی دیالوگ، همان آدرس درخواست است که قابلیت ویرایش را نیز دارد. بنابراین برای مثال فیلد request name را به Get request تغییر داده و سپس بر روی دکمهی Save to httpbin کلیک کنید.
نتیجهی این عملیات را در برگهی Collections سمت چپ صفحه میتوان مشاهده کرد. در این حالت اگر درخواست مدنظری را انتخاب کنید و سپس جزئیات آنرا ویرایش کنید، مجددا همان علامت دایرهای نارنجی رنگ، بالای برگهی ساخت درخواست ظاهر میشود که بیانگر حالت ذخیره نشدهی این درخواست است. اکنون اگر بر روی دکمهی Save کنار Send کلیک کنید، در همان آیتم گروه جاری انتخابی، به صورت خودکار ذخیره و بازنویسی خواهد شد.
ارسال درخواستهایی از نوع POST
برای آزمایش ارسال یک درخواست از نوع Post، مجددا بر روی دکمهی + کنار آخرین برگهی باز شده کلیک میکنیم تا یک برگهی جدید باز شود. سپس در ابتدا، نوع درخواست را از Get پیشفرض، به Post تغییر میدهیم:
در این حالت آدرس https://httpbin.org/post را وارد کرده و سپس برگهی body را که پس از انتخاب حالت Post فعال شدهاست، انتخاب میکنیم:
در اینجا برای مثال گزینهی x-www-form-urlencoded، همان حالتی است که اطلاعات را از طریق یک فرم واقع در صفحات وب به سمت سرور ارسال میکنیم. اما اگر برای مثال نیاز باشد تا اطلاعات را با فرمت JSON، به سمت Web API ای ارسال کنیم، نیاز است گزینهی raw را انتخاب کرد و سپس قالب پیشفرض آنرا که text است به JSON تغییر داد:
در اینجا برای مثال یک payload ساده را ایجاد کرده و سپس بر روی دکمهی send کلیک کنید تا به عنوان بدنهی درخواست، به سمت Web API ارسال شود:
که نتیجهی آن چنین خروجی از سمت سرور خواهد بود:
در یک قسمت آن، raw data ما مشخص است و در قسمتی دیگر، اطلاعات با فرمت JSON، به درستی تشخیص دادهاست.
در ادامه بر روی دکمهی Save این برگه کلیک کنید. در صفحهی باز شده، نام پیشفرض آنرا که آدرس درخواست است، به Post request تغییر داده، گروه httpbin را انتخاب و سپس بر روی دکمهی Save to httpbin کلیک کنید:
اکنون مجموعهی httpbin به همراه دو درخواست است:
برای آزمایش آن، تمام برگههای باز را با کلیک بر روی دکمهی ضربدر آنها ببندید. در ادامه اگر بر روی هر کدام از آیتمهای این مجموعه کلیک کنید، جزئیات آن قابل بازیابی خواهد بود.
در مطلب جاری، برای اینکه یک گردش کاری، بین درخواستها صورت گیرد، ترتیب اجرای آنها را به صورت دستی، با drag & drop آنها در مجموعهای که در آن قرار داشتند، مشخص کردیم. اینکار را توسط کدنویسی نیز میتوان انجام داد و در این حالت گردشهای کاری پیچیدهتری را میتوان خلق کرد. برای مثال، ابتدا اجرای درخواست 1، بعدر درخواست 3، بعد بازگشت به 2، بعد بازگشت به 1 و سپس ادامهی کار و یا حتی توقف آن.
برای مشخص سازی اجرای درخواست بعدی، پس از پایان درخواست جاری، میتوان از متد زیر استفاده کرد:
postman.setNextRequest("Request name");
Request name نیز همان نامی است که در حین ذخیره سازی یک درخواست در مجموعهای، برای آن مشخص کردهایم. اگر در تشخیص آن دچار مشکل هستید، در قسمت Tests، مقدار آنرا لاگ کنید:
console.log(pm.info.requestName);
نکته: اگر در اینجا بجای نام درخواست، مقدار null تنظیم شود، سبب خاتمهی اجرای گردش کاری خواهد شد.
Typography در طراحی وب
- Arial
- Courier New
- Helvetica
- Times New Roman
- Trebuchet
- Georgia
- Verdana
3. کد جاوا اسکریپت خود را تولید کنید (تمام سرویس دهندگان این امکان را پیاده سازی کرده اند).
4. قطعه کد جاوا اسکریپت تولید شده را، در قسمت <head> فایل (Layout.cshtml (Razor_ یا (Site.Master (ASPX کپی کنید.
5. CSS Selectorهای لازم برای فونت مورد نظر را تولید کنید.
6. کد css تولید شده را در فایل Site.css کپی کنید. در مثال جاری فونت کل اپلیکیشن را تغییر میدهیم. برای اینکار، خانواده فونت "bistro-script-web" را به تگ body اضافه میکنیم.
نکته: فونت cursive بعنوان fallback تعریف شده. یعنی در صورتی که بارگذاری و رندر فونت مورد نظر با خطا مواجه شد، از این فونت استفاده میشود. بهتر است فونتهای fallback به مقادیری تنظیم کنید که در اکثر پلتفرمها وجود دارند.
همین! حالا میتوانیم تغییرات اعمال شده را مشاهده کنیم. بصورت پیش فرض قالب پروژهها از فونت "Segoe UI" استفاده میکنند، که خروجی زیر را رندر میکند.
استفاده از فونت جدید "Bistro Script Web" وب سایت را مانند تصویر زیر رندر خواهد کرد.
همانطور که میبینید استفاده از فونتهای وب بسیار ساده است. اما بهتر است از اینگونه فونتها برای کل سایت استفاده نشود و تنها روی المنتهای خاصی مانند سر تیترها (h1,h2,etc) اعمال شوند.