بایگانی مرداد ۱۳۹۹ :: سرور مجازی

redux-form یک روش عالی برای مدیریت اشکال است که توسط Redux تهیه شده است. در واقع یک کامپوننت مرتبه بالاتر (HOC) است که از re-redux استفاده می کند تا مطمئن شود فرم های HTML در React از Redux برای ذخیره تمام وضعیت آن استفاده میکنند.
redux-form مولفه های زیر را برای کمک به شما در ساخت برنامه های تان دارد:
formReducer (): تابعی است که می گوید چگونه می توانید فروشگاه Redux را بر اساس تغییراتی که از برنامه اعمال می شود به روز کنید. این تغییرات توسط اقدامات Redux شرح داده شده است. formReducer باید روی فرم Redux نصب شود.
reduxForm (): تابع reduxForm () یک جزء مرتبه بالاتر است که یک آبجکت پیکربندی می گیرد و همیشه یک عملکرد جدید را برمی گرداند. و برای دربرگیری مؤلفه فرم و پیوند تعامل کاربر با اقدامات ارسالی Redux استفاده می شود.
مؤلفه <Field />: مؤلفه ای که در داخل مؤلفه فرم پیچیده شما قرار دارد. به عنوان روشی برای اتصال عناصر ورودی در یک فرم به redux-form logic ارائه میشود. به عبارت دیگر، این راهی است که ما می توانیم ورودی را از آنچه کاربر تایپ می کند ، دریافت کنیم.
می توانید اطلاعات بیشتر در مورد API redux-form را در مستندات آن بخوانید.
در این آموزش ، از فرم redux برای ساختن فرم با اعتبار و اتصال آن به فروشگاه Redux استفاده خواهید کرد.
پیش نیازها
برای تکمیل این آموزش به یک محیط توسعه محلی برای Node.js. نیاز دارید. نحوه نصب Node.js و ایجاد محیط توسعه محلی را در این لینک دنبال کنید.
مرحله 1 – ایجاد پروژه
ما می خواهیم با بسته create-react-app، یک برنامه React بسازیم. create-react-app به شما امکان می دهد برنامه های React را بدون پیکربندی ساخت ایجاد کنید. با اجرای دستور ترمینال زیر می توانید از برنامه create-react-app استفاده کنید. این برنامه به صورت خودکار یک برنامه React را در یک پوشه با عنوان contact-redux ایجاد می کند.
⦁ $ npx create-react-app contact-redux
⦁
توجه به این نکته مهم است که npx فقط با نسخه های npm 5.2 و بالاتر کار می کند. اگر نسخه پایین تر از آن را دارید و هنوز هم دوست دارید از create-react-app در رایانه خود استفاده کنید، دستورات ترمینال زیر را برای نصب برنامه create-react-app و شروع یک برنامه React اجرا کنید.

⦁ $ npm install -g create-react-app
⦁
⦁ $ create-react-app contact-redux
به دایرکتوری بروید و سرور مجازی توسعه را شروع کنید تا اطمینان حاصل شود که همه چیز کار می کند. برای شروع برنامه جدید ایجاد شده React در حالت توسعه ، دستور زیر را اجرا کنید:
⦁ $ npm start
⦁
موارد زیر را در مرورگر خود مشاهده خواهید کرد:

اکنون یک برنامه React فعال و در حال اجرا است.
دستور زیر را اضافه کنید تا متعلقات لازم برای فرم را اضافه کنید.
⦁ npm install –save redux react-redux redux-form
⦁
⦁ redux – یک کانتینر حالت و شرطی لازم برای کارکرد redux-form است.
⦁ React -Redux – React Redux اتصالات رسمی React برای Redux است و همچنین شرط لازم برای کارکردن redux-form
⦁ redux-form – بسته مورد استفاده برای این آموزش.
پس از نصب ، می توانید روی فرم تماس با ما کار کنید.
مرحله 2 – ایجاد فرم
ما پیوند Bulma CDN را به فایل index.html اضافه خواهیم کرد تا یک ظاهر طراحی پیش فرض اضافه شود. فایل public/index.html را باز کنید و خط کد زیر را به برچسب head اضافه کنید:
public/index.html
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css”>

اکنون می خواهیم ویرایشهایی را در فایل src / App.js انجام دهیم. فایل src / App.js را باز کنید و خط کد زیر را در قسمت بالای فایل اضافه کنید.
src/App.js
import { reduxForm, Field } from ‘redux-form’;

سپس ، به تابع render () بروید و با کد زیر آن را اصلاح کنید:
src/App.js
render() {
return (
<div className=”App”>
<header className=”App-header”>
<img src={logo} className=”App-logo” alt=”logo” />
<h1 className=”App-title”>Welcome to React x redux-form</h1>
</header>
<div className=”container”>
<p className=”App-intro”>
Contact Form
</p>
<SignInForm />
</div>
</div>
);
}
متن مقدمه تغییر کرده است و از همه مهمتر یک مؤلفه <SignInForm /> را که در زیر ایجاد خواهیم کرد اضافه کردیم. این یک مؤلفه ساده خواهد بود که فرم مورد نیاز ما را برمی گرداند و آن را به مؤلفه redux-form وصل می کند. در همان فایل src / App.js ، قبل از اعلام class App extends Component ، این کد را در زیر تایپ کنید.
src/App.js
let SignInForm = props => {
return <form className=”form”>
<div className=”field”>
<div className=”control”>
<label className=”label”>First Name</label>
<Field className=”input” name=”firstName” component=”input” type=”text” placeholder=”First Name”/>
</div>
</div>

<div className=”field”>
<div className=”control”>
<label className=”label”>Email</label>
<Field className=”input” name=”email” component=”input” type=”email” placeholder=”Email Address”/>
</div>
</div>

<div className=”field”>
<div className=”control”>
<label className=”label”>Proficiency</label>
<div className=”select”>
<Field className=”input” name=”proficiency” component=”select”>
<option />
<option value=”beginner”>Beginner Dev</option>
<option value=”intermediate”>Intermediate Dev</option>
<option value=”expert”>Expert Dev</option>
</Field>
</div>
</div>
</div>

<div className=”field”>
<div className=”control”>
<label className=”checkbox”>
<Field name=”saveDetails” id=”saveDetails” component=”input” type=”checkbox”/>
Save Details
</label>
</div>
</div>

<div className=”field”>
<div className=”control”>
<label className=”label”>Message</label>
<Field className=”textarea” name=”message” component=”textarea” />
</div>
</div>

<div className=”field”>
<div className=”control”>
<button className=”button is-link”>Submit</button>
</div>
</div>

</form>;
};
در این کد فرم تماس با ما به صورت جزیی تنظیم می شود که از کاربر می خواهد اطلاعاتی مانند نام ، نام خانوادگی و سن را میخواهد. نکته جالب در این فرم مولفه Field است.
مولفه Field از بسته فرم redux تهیه می شود و نحوه نوشتن فیلد input است. مشخصه type تعیین می کند چه نوع ورودی باید باشد ، یعنی ورودی radio ، ورودی checkbox ، ورودی text یا ورودی email . مشخصه component تعیین می کند که چه نوع فیلد ورودی باید باشد ، می تواند برچسبهای input ، textarea یا select باشد و ویژگی prop همان چیزی است که برای شناسایی وضعیت فیلدهای فروشگاه redux که در زیر ایجاد خواهیم کرد ، استفاده خواهد شد.
بنابراین برای استفاده از فرم متصل به فرم redux ، باید یک نوع فروشگاه Redux ایجاد کنیم و این کاری است که در آینده انجام خواهیم داد.
مرحله 3 – راه اندازی فروشگاه Redux
ما به یک فروشگاه Redux احتیاج داریم که بتوانیم مؤلفه فرم (SignInForm) را که ایجاد کردیم به هم وصل کنیم. بیایید با وارد کردن بسته redux شروع کنیم. فایل src / index.js را باز کنید و خطوط کد زیر را اضافه کنید که در آن اساساً redux را وارد برنامه React میکنیم.
src/index.js
import { createStore, combineReducers } from ‘redux’;
import { Provider } from ‘react-redux’;
import { reducer as formReducer } from ‘redux-form’;

اولین خط کد createStore و combineReducers را وارد میکند. createStore کمک می کند تا یک فروشگاه Redux ایجاد کنید که وضعیت کامل برنامه شما را نگه میدارد و combineReducers به شما کمک می کند تا کلیه توابع کاهشی خود را در یک تابع کمکی منفرد مدیریت کنید که می تواند پس از آن به CreateStore منتقل شود. می توانید اطلاعات بیشتر در مورد این عملکردها را در صفحه مرجع Redux API مطالعه کنید.
خط دوم کد Provider را از react-redux تأمین می کند. Provider کمک می کند تا وضعیت فروشگاه به کلیه اجزای کانتینر موجود در برنامه منتقل شود و در ادامه نشان خواهیم داد که چگونه کار می کند.
خط سوم کد reducer به عنوان formReducer وارد میکند و این چیزی است که ما می خواهیم از آن استفاده کنیم تا فرم خود را به فروشگاه Redux وصل کنیم.
در مرحله بعد ، ما فروشگاه واقعی Redux را ایجاد می کنیم و با استفاده از مؤلفه Provider ، اطمینان حاصل می کنیم که برای همه اجزای کانتینر کاربرد دارد. فایل src / index.js را با بلوک کد زیر ویرایش کنید.
src/index.js
import React from ‘react’;
import ReactDOM from ‘react-dom’;

import { createStore, combineReducers } from ‘redux’;
import { Provider } from ‘react-redux’;
import { reducer as formReducer } from ‘redux-form’;

import ‘./index.css’;
import App from ‘./App’;
import registerServiceWorker from ‘./registerServiceWorker’;

const rootReducer = combineReducers({
form: formReducer,
});

const store = createStore(rootReducer);

ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById(‘root’)
);

registerServiceWorker();

در بلوک کد بالا ، ما از تابع CombineReducers استفاده می کنیم تا formReducer را از فرم به فروشگاه Redux وصل کنیم. در اصل برای به روزرسانی هر یک از حالت های ما در پاسخ به اقدامات ، که در این حالت ، تغییر فرم هستند ، مورد استفاده قرار می گیرد. خط بعدی کد برای ایجاد فروشگاه با استفاده از CreatStore از Redux استفاده می شود.
سپس این فروشگاه تازه ایجاد شده به کمک Provider که در قسمت کامپوننت برنامه است، در دسترس همه قسمتهای برنامه قرار میگیرد و همچنین خصیصه ای را قبول می کند که همانstore است که در بالا ایجاد شد.
بیایید به فرم برگردیم و در آخر آن را به فروشگاه وصل کنیم.
مرحله 4 – اتصال فرم به redux-form
ما مؤلفه فرم خود را داریم اما هنوز به فرم redux وصل نشده است. بیایید آن را تنظیم کنیم. این بلوک کد را درست زیر class App extends Component و بلافاصله پس از اعلان مؤلفه ارائه دهنده SignInForm ، تایپ کنید.
src/index.js
SignInForm = reduxForm({
form: ‘signIn’,
})(SignInForm);

در بلوک کد بالا ، SignInForm با استفاده از کامپوننت مرتبه بالاتر reduxForm به فرم متصل به redux تبدیل می شود. این بدان معنی است که فرم ما اکنون به فروشگاه قلاب شده است.
نکته مهم این است که فرم کلید پیکربندی ، به عنوان شناسه استفاده می شود و از آن برای تهیه نامی منحصر به فرد برای مؤلفه فرم گردد. اگر چند فرم وجود داشته باشد ، برای مدیریت بهتر حالتهای مختلف ، باید از اسامی جداگانه استفاده کنید.
نکته بعدی که باید انجام دهیم پیکربندی مواردی است که هنگام کلیک بر روی دکمه اتفاق می افتد. در یک برنامه ایده آل ، شما می خواهید داده ها را به یک API راه دور یا برخی از پایگاه های داده ارسال کنید اما به خاطر اهداف نمایشی ، ما داده های فرم را در کنسول مرورگر وارد خواهیم کرد. برای انجام این کار ، باید داده های فرم را از مشخصه ها بگیریم و آنها را در جایی ذخیره کنیم.
در داخل مولفه SignInForm ، خط کد زیر را درست بالای عبارت return اضافه کنید.
src/index.js
const { handleSubmit } = props;
return <form **onSubmit={handleSubmit}** className=”form”>

props موجود در فرم SignInForm به دسته handleSubmit تجزیه می شوند. در هنگام کلیک بر روی دکمه ارسال ، از تابع handSubmit در فرم به عنوان کنترل کننده رویداد onSubmit استفاده می شود.

سرانجام ، در داخل مولفه app در فایل src / App.js ، تابعی را ایجاد می کنیم که داده های فرم را به کنسول مرورگر وارد می کند. درست قبل از تابع render() ، بلوک کد زیر را به فایل اضافه کنید.
src/App.js
handleSignIn = values => {
console.log(values);
};
سپس تابع handSignIn را به عنوان کنترل کننده رویداد برای مؤلفه SignInForm اضافه کنید. redux-form به طور خودکار مشخص می کند که داده های بدست آمده از فرم ، که اساساً مؤلفه SignInForm است باید به لطف توابع handleSubmit فوق در کنسول وارد شوند.
src/App.js
<SignInForm onSubmit={this.handleSignIn} />

اکنون می توانید برنامه را با اجرای دستور پایانه npm start شروع کنید. فرم را پر کنید ، روی ارسال کلیک کنید و مقادیر وارد شده به کنسول را مشاهده خواهید کرد.

مرحله 5 – افزودن اعتبارات
وقتی صحبت از فرم های ساخت و ارسال redux-form با برخی از ویژگی های اعتبار سنجی به میان می آید، افزودن اعتبارات مهم است و اکنون قصد داریم آن را اجرا کنیم. در فایل src / App.js ، بلوک کد زیر را تایپ کنید.
src/App.js
const validate = val => {
const errors = {};
if (!val.firstName) {
console.log(‘First Name is required’);
errors.firstName = ‘Required’;
}
if (!val.lastName) {
console.log(‘Last Name is required’);
errors.lastName = ‘Required’;
}
if (!val.email) {
console.log(’email is required’);
errors.email = ‘Required’;
} else if (!/^.+@.+$/i.test(val.email)) {
console.log(’email is invalid’);
errors.email = ‘Invalid email address’;
}
if (!val.age) {
errors.age = ‘Required’
} else if (isNaN(Number(val.age))) {
errors.age = ‘Must be a number’
} else if (Number(val.age) < 18) {
errors.age = ‘Sorry, you must be at least 18 years old’
}
return errors;
};
تابع validate برای بررسی خطاهای اعتبار سنجی در فرم استفاده می شود. از پارامتر Val برای بررسی اعتبار سنجی فیلدهای مختلف استفاده می شود. ابتدا بررسی می کنیم که آیا آبجکت errors خالی است ، بدیهی است که آبجکت خالی به این معنی است که خطایی وجود ندارد. سپس از منطق شرطی استفاده می کنیم تا بررسی کنیم که آیا یک فیلد خالی است یا خیر ، اگر هست شما خطای مربوطه را وارد می کنید. در بلوک کد بالا ، ما فقط اعتبار سنجی برای نام ، نام خانوادگی ، ایمیل و سن را انجام می دهیم.
در شرط اعتبار سنجی ایمیل ، بررسی می کنیم که آیا خالی است یا خیر و همچنین اینکه آیا یک ایمیل معتبر با استفاده از regex استفاده کرده است و در اعتبارسنجی مشروط سن ، بررسی می کنیم که خالی است ، یا یک عدد است و آیا کاربر کمتر از 18 سال است.
در مرحله بعدی ، عملکرد اعتبارسنجی خود را به صورت redux ثبت خواهیم کرد تا بتواند از آن استفاده کند و آزمایش های اعتبار سنجی را انجام دهد. تابع validate را به مؤلفه مرتبه بالاتر redux-form اضافه کنید:
src/index.js
SignInForm = reduxForm({
form: ‘signIn’,
validate,
})(SignInForm);

اکنون که عملکرد اعتبارسنجی خود را آماده کرده ایم و در فرم Hux-redux ثبت شده است ، یک مؤلفه قابل استفاده مجدد ایجاد کنید که خطاها را در هر زمان وقوع، نشان دهد و از آن مؤلفه جدید ایجاد شده در فرم های ما استفاده کند.
src/index.js
const renderField = ({ input, label, type, meta: { touched, error, warning } }) => (
<div>
<div className=”control”>
<label className=”field”>{label}</label>
<input className=”input” {…input} placeholder={label} type={type}/>
{touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
</div>
</div>
)

مؤلفه renderField آبجکت input ، یک label ، نوع ورودی و meta را که خاصیت redux-form است در اختیار شما قرار می دهد. خط {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
به این معنی است که اگر هنگام کلیک/ تمرکز روی فیلد فرم ، خطایی وجود داشته باشد ، باید پیام خطایی نشان داده شود. همچنین در صورت بروز هرگونه خطا ، فرم ارسال نمی شود.
حال اگر فرم را بررسی کردید و سعی در وارد کردن ورودی های نامعتبر دارید یا از فیلدهایی که دارای تست های اعتبار سنجی هستند ، عبور میکنید ، باید پیام های خطا را دریافت کنید.

نتیجه
در این آموزش شما یک فرم با redux-form ساخته اید و آن را به فروشگاه Redux وصل کردید. بدون نیاز به اعتبار سنجی شماتیک خارجی، اعتبارات همزمان را در فرم اضافه کردید.
می توانید اطلاعات بیشتر در مورد redux-form را در سایت رسمی مطالعه کنید و برای آگاهی بیشتر می توانید از مثال های آنها استفاده کنید.
می توانید کد کامل این آموزش را در GitHub پیدا کنید.

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور – احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel – ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan – استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue – ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو – ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express – ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18 – تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8 – استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18 – نصب Linux، Nginx، MariaDB،PHP در Debian 10

کلمات کلیدی خرید سرور

برچسب‌ها:HOC, re-redux, Redux, redux-form

۰ نظر

behnam gol mohamadi

Angular (2+) در دسترس است ، و همه ما از این موضوع بسیار هیجان زده هستیم. با این حال ، برای برخی از ما ، هنوز پایگاههای بزرگ کد AngularJS (1.x) در محل کار وجود دارد. چگونه می توانیم برنامه خود را به نسخه جدید Angular منتقل کنیم – به ویژه اگر نتوانیم برای بازنویسی کامل شش ماه از توسعه مشخصه فاصله بگیریم؟
این جاست که کتابخانه ngUpgrade وارد عمل می شود. ngUpgrade ابزار رسمی است که به شما امکان می دهد برنامه خود را اندک اندک منتقل کنید. در واقع بهAngular اجازه میدهد تا زمانی که نیاز به ارتقاء آهسته دارید ، به صورت پهلو به پهلو و به همراه کد AngularJS شما اجرا شود.
در این راهنما ngUpgrade و Angular را نصب و راه اندازی می کنید. سپس اصول اولیه نوشتن مولفه ها را یاد خواهید گرفت.
(اگر طولانی بودن این راهنما شما را خسته میکند ، نگران نباشید. من یک ویدیوی کاملاً مفصل به نام Upgrading AngularJS تهیه کرده ام که همه این موارد را با جزئیات پوشش می دهد).
<a href=“https://www.upgradingangularjs.com?ref=scotch.io”\>

</a\>
نقطه شروع ما
برای شروع کار با ngUpgrade ، برنامه شما باید چند پیش شرط را برآورده کند:
1- کد سازماندهی شده توسط مشخصه (نه براساس نوع) و هر فایل فقط شامل یک آیتم (مانند یک بخشنامه یا سرویس)
2- تنظیم TypeScript
3- استفاده از بسته نرم افزاری ماژول (بیشتر افراد از Webpack استفاده می کنند)
4- استفاده از AngularJS 1.5+ با کنترلرهای جایگزین شده توسط مولفه ها
(اگر در هر یک از این موارد گمراه شدید ، ما همه آن ها را در قسمت های 1 و 2 این لینک پوشش می دهیم)
در حال حاضر ، یک دقیقه وقت بگذارید تا پروژه نمونه دوره را در GitHub کلون یا فورک کنید (فراموش نکنید که npm install را نصب کنید). این تعهد را بررسی کنید تا نقطه شروع ما را ببینید:
git checkout fdfcf0bc3b812fa01063fbe98e18f3c2f4bcc5b4
ما یک پروژه سفارش سیستم داریم که می توانیم از طریق ngUpgrade برای کار استفاده کنیم. با شروع این تعهد ، برنامه ما تمامی معیارهای فوق را رعایت می کند. ما از معماری مؤلفه ها ، TypeScript و Webpack استفاده می کنیم (حتی در زمینه توسعه و تولید نیز ساختارهایی داریم).
توجه: در بسیاری از برنامه های بزرگ AngularJS ، شما نمی توانید همه چیز را به یک منبع کاملاً جدید Git منتقل کنید و سالها سابقه را از بین ببرید. همچنین ممکن است از ساختار برنامه ای متفاوت از CLI استفاده کنید. اگر می توانید از CLI برای ارتقاء خود استفاده کنید ، پس این کار را انجام دهید. با این حال ، این راهنما ، تنظیم دستی را در اینجا به شما آموزش می دهد تا بتوانید کنترل کاملی بر روی به روزرسانی خود داشته باشید.

نصب Angular & ngUpgrade
ما آماده نصب Angular ، ngUpgrade و همه متعلقات هستیم. در پروژه نمونه ، پیش بروید و آرایه متعلقات pack.json خود را به روز کنید تا این گونه به نظر برسد:
“dependencies”: {
“@angular/common”: “^5.2.5”,
“@angular/compiler”: “^5.2.5”,
“@angular/core”: “^5.2.5”,
“@angular/forms”: “^5.2.5”,
“@angular/platform-browser”: “^5.2.5”,
“@angular/platform-browser-dynamic”: “^5.2.5”,
“@angular/router”: “^5.2.5”,
“@angular/upgrade”: “^5.2.5”,
“angular”: “1.6.6”,
“angular-route”: “1.6.6”,
“bootstrap”: “3.3.7”,
“core-js”: “^2.5.3”,
“jquery”: “^2.2.4”,
“lodash”: “4.17.4”,
“moment”: “~2.17.1”,
“reflect-metadata”: “^0.1.12”,
“rxjs”: “^5.5.6”,
“zone.js”: “^0.8.20″
}

(ما می خواهیم از این Angular 5 در این سری استفاده کنیم ، حتی اگر پروژه نمونه از نسخه 4 استفاده کند. نگران نباشید. مراحل یکسان هستند.)
ما می توانیم همه این بسته ها را با یک پرچم ذخیره در یک دستور طولانی در پایانه قرار دهیم ، اما از زمان استفاده میکنیم تا توضیح دهیم که هرکدام از این بسته ها چیست.
ابتدا کتابخانه های ما تحت فضای نام @angular :
⦁ @angular/common: اینها خدمات ، اتصالات و دستورالعمل های مورد نیاز Angular هستند. این بسته همچنین حاوی HttpClient جدید مشابه نسخه 4.3 است ، بنابراین ما دیگر نیازی به @ angular / http نداریم.
⦁ @angular/compiler : کامپایلر الگوی Angular است. قالب ها را می گیرد و آنها را به کدی تبدیل می کند که باعث می شود برنامه شما اجرا و ارائه شود. تقریباً هرگز نیازی به تعامل با آن ندارید.
⦁ @angular/core: بخشهای مهم زمان اجرای Angular هستند که توسط هر برنامه مورد نیاز است. این موارد مانند دکوراتورهای ابرداده (به عنوان مثال ، Component ، Injectable) ، تمام متعلقات ورودی و چرخه زندگی مولفه مانند OnInit متصل میشوند.
⦁ @angular/forms : همه چیزهایی است که برای فرم ها نیاز داریم ، خواه قالب یا واکنش پذیر.
⦁ @angular/platform-browser: همه چیزی که به قلمرو و مرورگر مربوط است ، به خصوص بخش هایی که در ارائه قلمرو کمک می کند. بسته ای است که شامل bootstrapStatic میباشد ، روشی که ما برای راه اندازی برنامه های کاربردی خود برای تولید استفاده می کنیم.
⦁ @angular/platform-browser-dynamic: این بسته شامل ارائه دهندگان و یک روش بوت استرپ دیگر برای برنامه هایی است که الگوهای مربوط به مشتری را کامپایل می کنند. بسته ای است که ما در هنگام توسعه از bootstrapping استفاده می کنیم و در ویدیوی دیگری تعویض بین این دو را پوشش خواهیم داد.
⦁ @angular/router: همانطور که ممکن است حدس بزنید ، فقط روتر Angular است.
⦁ @angular/upgrade: کتابخانه ngUpgrade است که به ما امکان می دهد برنامه AngularJS ما را به Angular منتقل کنیم.
بعد از همه بسته های Angular ، بسته های چندکاره ما که وابسته به Angular هستند ، آمده اند:
⦁ core-js متن جهانی یا پنجره ای را با ویژگی های خاصی از ES6 یا ES2015 متصل می کند.
⦁ reflect-metadata یک کتابخانه چند منظوره برای حاشیه نویسی است که از Angular در کلاس های خود استفاده می کند.
⦁ Rxjs: کتابخانه ای است که شامل همه مشاهداتی است که برای دستیابی به داده های خود از آنها استفاده خواهیم کرد.
⦁ zone.js یک قطعه چندگانه برای مشخصات Zone است ، که بخشی از نحوه مدیریت Angular در تشخیص تغییر میباشد.
بعضی اوقات ، اختلافاتی در رابطه با نسخه TypeScript که استفاده می کنید وجود دارد. این می تواند به دلیل RxJS ، کامپایلر Angular یا Webpack باشد. اگر با خطاهای تلفیقی عجیب و غریب مواجه شدید ، تحقیقاتی انجام دهید تا متوجه شوید که کدام یک از آنها به یک دامنه نسخه خاص از TypeScript برای نسخه ای که استفاده می کنید نیاز دارند.
ترمینال خود را باز کنید، در پوشه public پروژه وارد شوید و npm install را اجرا کنید (اگر ترجیح می دهید، میتوانید Yarn را نصب و از آن استفاده کنید). خواهید دید که تمام بسته های شما نصب شده است.
اکنون آماده هستیم تا با استفاده از بوت دوگانه AngularJS و Angular ، برنامه خود را به برنامه هیبریدی تبدیل کنیم.
تنظیم ngUpgrade
برای راه اندازی ngUpgrade ، باید یک سری مراحل انجام دهیم تا AngularJS و Angular بتوانند در کنار یکدیگر اجرا شوند.
مرحله 1: حذف Bootstrap از index.html
اولین کاری که باید انجام دهیم حذف دستورالعمل bootstrap از index.html است. اینگونه AngularJS به طور معمول با بارگذاری صفحه شروع می شود ، اما ما قصد داریم آن را از طریق Angular با استفاده از ngUpgrade بوت کنیم. بنابراین ، فقط index.html را باز کنید و آن برچسب data-ng-app را حذف کنید. (اگر در برنامه خود از DI جدی استفاده می کنید ، این برنامه را نیز در این مرحله حذف کنید.) فایل index.html شما اینگونه خواهد شد:
<html>
<head>
<title>Amazing, Inc. Order System</title>
</head>
<body>
<navigation></navigation>
<div class=”container” ng-view></div>
</body>
</html>

مرحله 2: تغییر ماژول AngularJS
حال باید تغییراتی در ماژول AngularJS ایجاد کنیم. app.ts را باز کنید. اولین کاری که باید انجام دهیم تغییر نام برنامه های app.ts به app.module.ajs.ts است تا نشان دهد که این ماژول برای AngularJS میباشد. این یک نام طولانی است ، اما در Angular می خواهیم نوع را در نام فایل خود داشته باشیم. در اینجا از app.module استفاده می کنیم و سپس ajs را اضافه می کنیم تا مشخص کنند که به جای app.module اصلی برای Angular (که در یک ثانیه انجام خواهیم داد) برای AngularJS است.
با توجه به برنامه فعلی ، ما فقط از AngularJS استفاده می کنیم ، بنابراین همه عبارات ورودی خود را در اینجا داریم و همه چیز را در ماژول Angular خود ثبت می کنیم. با این حال ، آنچه اکنون قصد داریم انجام دهیم انتققال این ماژول و وارد کردن آن به ماژول Angular جدید برای آماده سازی و راه اندازی آن است. بنابراین ، در خط 28 اجازه دهید یک ثابت رشته ای از نام برنامه خود ایجاد کنیم:
const MODULE_NAME = ‘app’;
سپس رشته برنامه خود را با نام ماژول در اعلان Angular.module جایگزین خواهیم کرد:
angular.module(MODULE_NAME, [‘ngRoute’])
// component and service registrations continue here

و در آخر ، باید ثابت خود را منتشر کنیم:
export default MODULE_NAME;
می توانید ماژول AngularJS تمام شده را در این مرحله ببینید.
مرحله 3: ایجاد ماژول برنامه Angular
ماژول AngularJS ما آماده است ، بنابراین ما اکنون آماده ساختن ماژول Angular هستیم. سپس ماژول AngularJS را وارد خواهیم کرد تا بتوانیم به صورت دستی آن را در اینجا بوت کنیم. این همان چیزی است که اجازه می دهد این دو چارچوب با هم اجرا شوند ، و ngUpgrade را قادر می سازد تا شکاف بین آنها را پر کند.
اولین کاری که باید انجام دهیم ایجاد یک فایل جدید در همان سطح ماژول AngularJS به نام app.module.ts است. اکنون برای اولین بار ، الگویی را می بینید که در طی ارتقاء برای شما آشنا می شود: ساخت و ارائه کلاس ، تزئین آن با حاشیه نویسی و وارد کردن همه متعلقات.
در ماژول برنامه جدید خود ، بیایید یک کلاس بنام AppModule ایجاد کنیم:
export class AppModule {
}

اکنون بیایید اولین یادداشت خود را (که به آن دکوراتور نیز می گویند) اضافه کنیم. حاشیه نویسی فقط بخشی از ابرداده است که Angular هنگام ساختن برنامه ما استفاده می کند. فراتر از کلاس جدید ، از حاشیه نویسی NgModule استفاده خواهیم کرد و در یک آبجکت گزینه ها وارد میکنیم:

@NgModule({})
export class AppModule {
}

اگر دنبال ویرایشگری مانند Visual Studio Code هستید ، می بینید که TypeScript گیج شده است زیرا نمی داند NgModule چیست. دلیل این امر آن است که ما باید آن را از کتابخانه هسته Angular وارد کنیم. بعد از دکوراتور، می توانیم این کار را با:
import { NgModule } from ‘@angular/core’;
انجام دهیم.
حال ، در ابجکت گزینه های ما برای ngModule ، باید یک سری ورودی را وارد کنیم. آرایه ورودی ها سایر NgModules را که این NgModule به آن بستگی دارد ، مشخص می کند. (این ورودی ها متفاوت از ورودی TypeScript در بالای فایل ما است.) در حال حاضر ، ما به BrowserModule و UpgradeModule احتیاج داریم:
import { NgModule } from ‘@angular/core’;

@NgModule({
imports: [
BrowserModule,
UpgradeModule
]
})
export class AppModule { }

البته ، ما آنهایی که در بالای فایل ما وارد نشده اند را نداریم ، بنابراین باید این کار را نیز انجام دهیم. بعد از اولین ورودی ، می توانیم اضافه کنیم:
import { BrowserModule } from ‘@angular/platform-browser’;
import { UpgradeModule } from ‘@angular/upgrade/static’;
یک UpgradeModule هم در upgrade و هم upgrade/static وجود دارد. ما می خواهیم از استاتیک استفاده کنیم زیرا گزارش خطای بهتری را ارائه می دهد و با کامپایل AOT کار می کند.
داربست اصلی ماژول ریشه را برای راه اندازی Angular دریافت کرده ایم و آماده هستیم تا بوت کردن را انجام دهیم.
مرحله 4: Bootstrapping در ماژول Angular
برای راه اندازی برنامه خود ، اولین کاری که باید انجام دهیم تزریق UpgradeModule با استفاده از یک تابع constructor است:
constructor(private upgrade: UpgradeModule){
}

در تابع constructor خود لازم نیست کاری انجام دهیم. نکته بعدی که انجام خواهیم داد ، رونویسی تابع doBootstrap است. بعد از constructor ، تایپ کنید:
ngDoBootstrap(){
}

در مرحله بعد ، از تابع bootstrap UpgradeModule استفاده خواهیم کرد. همان انضای بوت استرپ Angular را دارد ، اما برای ما چند کار اضافی انجام می دهد. ابتدا مطمئن شوید که Angular و AngularJS در نواحی صحیح اجرا می شوند ، و سپس یک ماژول اضافی را تنظیم می کند که اجازه می دهد AngularJS در Angular و Angular در AngularJS قابل مشاهده باشد. و در آخر اینکه ، API های قابلیت تست را سازگار می کند ، به طوری که Protrotor با برنامه های ترکیبی کار می کند ، که بسیار حائز هاهمیت است.
بیایید آن را اضافه کنیم:
ngDoBootstrap(){
this.upgrade.bootstrap(document.documentElement, [moduleName], {strictDi: true});
}

ما در ابتدا عنصر document و سپس ماژول AngularJS درون یک آرایه را وارد میکنیم. در آخر، می توانید نمونه ای از این مورد را ببینید ، ما یک آبجکت پیکربندی اضافه می کنیم تا بتوانیم تزریق متعلقات را انجام دهیم.
ممکن است بپرسید که نام ماژول از کجا آمده است. ما باید آن را با سایر عبارات خود وارد کنیم:
import moduleName from ‘./app.module.ajs’;
فایل app.module.ts ما تکمیل شده و اینگونه خواهد بود:
import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { UpgradeModule } from ‘@angular/upgrade/static’;
import moduleName from ‘./app.module.ajs’;

@NgModule({
imports: [
BrowserModule,
UpgradeModule
]
})
export class AppModule {
constructor(private upgrade: UpgradeModule) { }

ngDoBootstrap(){
this.upgrade.bootstrap(document.documentElement, [moduleName], {strictDi: true});
}
}

این الگویی خواهد بود که به مرور زمان برای شما آشنا می شود.
مرحله 5: ایجاد main.ts
اکنون که ماژول AngularJS و ماژول Angular خود را تنظیم کرده ایم ، به یک نقطه ورودی نیاز داریم که می خواهد این دو را جمع کرده و برنامه ما را اجرا کند. بیایید یک فایل جدید را تحت پوشه src با نام main.ts ایجاد کنیم.
در main.ts ، باید مواردی را وارد کنیم ، به Angular بگوییم که کدام نسخه از AngularJS را لود کند ، و سپس به آن بگوییم که ماژول Angular ما را راه اندازی کند. ابتدا باید دو کتابخانه چند نسخه ای و تابع platformBrowserDynamic را وارد کنیم:
import ‘zone.js’;
import ‘reflect-metadata’;
import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;

چرا platformBrowserDynamic به جای platformBrowser؟ Angular دو روش برای کامپایل دارد: یک گزینه دینامیکی و یک گزینه استاتیک. در گزینه دینامیکی (معروف به just-in-time یا JIT) ، کامپایلر Angular برنامه را در مرورگر کامپایل می کند و سپس برنامه را راه اندازی می کند. گزینه استاتیک (معروف به ahead-of-time یا AOT) یک برنامه بسیار کوچکتر تولید می کند که سریعتر راه اندازی می شود. این امر به این دلیل است که کامپایلر Angular بعنوان بخشی از فرآیند ساخت ، زودتر از زمان اجرا می شود. ما فقط می خواهیم از روش JIT در اینجا با سرور مجازی Webpack dev استفاده کنیم.
(در این دوره ما یک ماژول کامل را صرف راه اندازی AOT برای تولید می کنیم).
حال ما باید هر دو ماژول Angular و AngularJS را وارد کنیم و همچنین روشی را ارائه دهیم که به Angular بگویید از کدام نسخه AngularJS استفاده کند:
import { setAngularLib } from ‘@angular/upgrade/static’;
import * as angular from ‘angular’;

import { AppModule } from ‘./app.module’;

حال برای پایان این کار ، فقط باید setAngularLib را فراخوانی کنیم و در نسخه AngularJS خود وارد کنیم و باید platformBrowserDynamic را فراخوانی کنیم و به آن بگوییم که ماژول برنامه ما را راه اندازی کند. فایل نهایی به این صورت است:
import ‘zone.js’;
import ‘reflect-metadata’;
import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;
import { setAngularLib } from ‘@angular/upgrade/static’;
import * as angular from ‘angular’;
import { AppModule } from ‘./app.module’;

setAngularLib(angular);
platformBrowserDynamic().bootstrapModule(AppModule);

اکنون که این ستاپ را انجام دادیم ، فقط باید نقطه ورود Webpack را در پیکربندی خود تغییر دهیم.
مرحله ششم: بروزرسانی Webpack
خوشبختانه این روند بوت استرپ کردن یک برنامه ترکیبی برای شما منطقی شده است. ما یک فایل main.ts داریم که نقطه ورود ماست ، که کتابخانه AngularJS ما را تنظیم کرده و ماژول Angular ما را بوت می کند. سپس ، ماژول Angular ماژول AngularJS را بوت می کند. این همان چیزی است که اجازه می دهد هر دو چارچوب در کنار یکدیگر اجرا شوند.
اکنون آماده هستیم پیکربندی Webpack خود را تغییر دهیم تا با فایل main.ts ما و نه یکی از فایل های ماژول برنامه شروع شود. webpack.common.js را باز کنید (در زیر پوشه webpack-configs قرار دارد). در زیر module.exports ، برای entry ریشه برنامه خود را به main.ts تغییر خواهیم داد:
entry: {
app: ‘./src/main.ts’,
}

تست برنامه
اکنون ، آماده هستیم تا برنامه ترکیبی خود را در عمل مشاهده کنیم. با باز کردن یک ترمینال و اجرای این دستورات می توانید سرور مجازی dev را اجرا کنید:
cd server
npm start
cd ../public
npm run dev

خواهید دید که Webpack در حال لود شدن است و TypeScript ما با موفقیت کامپایل شده است.
بیایید مرورگر را در localhost:9000 بررسی کنیم: می بینید که برنامه ما هنوز روی سرور مجازی dev اجرا می شود.

بسته به نسخه مورد استفاده، ممکن است در کنسول هشدارهایی در مورد core-js مشاهده کنید ، اما نگران آنها نباشید ، روی کار ما تأثیری ندارند. همچنین می توانید سربرگ شبکه را باز کرده و vendor bundle و app bundle را ببینید:

بسته vendor کاملاً بزرگ است و به این دلیل است که 1) ما سرور مجازی Webpack dev را اجرا می کنیم ، بدان معنی که هیچ چیزی را حداقل نمی کند ، 2) ما در حال اجرای Angular در کامپایل پویا هستیم ، بنابراین کد کامپایلر را به مرورگر ارسال میکند. وقتی در مورد کامپایل AOT صحبت می کنیم این جریان رو به پایین را درست خواهیم کرد ، اما می توانیم همینجا بمانیم و ببینیم که همه داده های مان هنوز در حال لود شدن هستند.
اکنون Angular و AngularJS در کنار یکدیگر در حال اجرا هستند ، به این معنی که برنامه ترکیبی خود را با موفقیت تنظیم کرده ایم. این بدان معنی است که ما آماده هستیم تا نسخه برنامه خود را به صورت جز به جز ارتقا دهیم.
بازنویسی و تنزل رتبه اولین مؤلفه شما
مرحله 1: بازنویسی مؤلفه
ما برنامه خود را بوت کرده و در حالت ترکیبی اجرا نمودیم ، بنابراین آماده هستیم تا با انتقال هر بخش از برنامه خود ، کار را شروع کنیم. یکی از رویکردهای متداول انتخاب مسیر و سپس شروع به بازنویسی هر قطعه از پایین به بالا است ، که از چیزی شروع میشود که کمترین متعلقات را داشته باشد. این به ما امکان می دهد تا به طور تکراری برنامه خود را ارتقاء دهیم تا در هر نقطه ، چیزی داشته باشیم که قابل استفاده در تولید باشد.
بیایید از مسیر هوم شروع کنیم زیرا با تنها یک مولفه هوم کار آسانی خواهد بود. ابتدا مؤلفه هوم خود را به home.component.ts تغییر خواهیم داد.
حال باید مولفه هوم خود را به عنوان کلاس Angular بازنویسی کنیم. اولین کاری که باید انجام دهیم وارد کردن مؤلفه از کتابخانه هسته Angular در بالای فایل است:
import { Component } from ‘@angular/core’
نکته بعدی که انجام خواهیم داد این است که تابع homeComponentController را به یک کلاس تبدیل کنیم. همچنین می توانیم آن را با حروف بزرگ بنویسیم و controller را در انتهای نام حذف کنیم ، به طوری که فقط HomeComponent نامیده شود. دست آخر ، بگذارید از پرانتز خلاص شویم. و در انتها اینچونه خواهد بود:
class HomeComponent {
var vm = this;
vm.title = ‘Awesome, Inc. Internal Ordering System’;
}

اکنون بیایید آنچه را که درون کلاس است پاک کنیم. ما دیگر نیازی به اعلام vm نداریم زیرا از کلاس استفاده می کنیم. همچنین می توانیم یک ویژگی از title را به عنوان یک رشته اضافه کنیم و عنوان را روی یک تابع constructor تنظیم کنیم. کلاس ما اینگونه خواهد شد:
class HomeComponent {
title: string;
constructor(){
title = ‘Awesome, Inc. Internal Ordering System’;
}
}

همچنین نیاز به ارائه این کلاس و سپس حذف خط export default داریم.
حال باید از دکوراتور metadata کامپوننت که وارد کردیم استفاده کنیم تا به Angular بگوییم یک مولفه است. می توانیم آبجکت کامپوننت هوم را با دکوراتور کامپوننت و یک آبجکت options جایگزین کنیم:
@Component({
}

اولین گزینه دکوراتور مولفه ما selector است. که فقط برچسب HTML است که ما برای اشاره به این مؤلفه ، که فقط ” home ” خواهد بود ، استفاده خواهیم کرد. توجه داشته باشید که در Angular ، selector یک مورد رشته ای است. و متفاوت از AngularJS است ، که مولفه آن را در camel case نامگذاری می کنیم ، و سپس به یک برچسب HTML با خط فاصله ترجمه می کنیم. در اینجا ، ما می خواهیم دقیقاً برچسب مورد نظر خود را استفاده کنیم. در این حالت ، فقط آن را در ” home ” نگاه می داریم ، بنابراین چندان مهم نیست. پس از آن ، ما الگوی خود را مشخص خواهیم کرد ، دقیقاً مانند AngularJS ، بنابراین فقط می گویم: template: template. و کامپوننت تمام شده ما به شرح زیر است:
import { Component } from ‘@angular/core’;

const template = require(‘./home.html’);

@Component({
selector: ‘home’,
template: template
})
export class HomeComponent {
title: string;
constructor(){
this.title = ‘Awesome, Inc. Internal Ordering System’;
}
}

توجه: اگر در حال کار بر روی برنامه ای هستید که از کامپایلر AOT استفاده می کند ، بهتر است به جای کارهایی که در اینجا انجام می دهیم از patternUrl استفاده کنید و در Webpack تغییراتی ایجاد کنید. البته برای JIT و سرور مجازی توسعه کاملاً مناسب است.

مرحله 2: تنزل رتبه کامپوننت برای AngularJS
اکنون برای ” downgrade ” این مؤلفه باید از کتابخانه ngUpgrade استفاده کنیم. Downgrading به معنای ایجاد یک مولفه یا سرویس AngularJS در دسترس است. از طرف دیگر ” Upgrading ” به معنای تهیه یک مولفه یا سرویس AngularJS در دسترس برای Angular است. آن را در مقاله دیگری پوشش خواهیم داد. خوشبختانه ، تنزل رتبه بسیار آسان است.
ابتدا باید در بالای فایل به همراه ورودی های خود ، دو کار را انجام دهیم. نیاز به وارد کردن تابع downgradeComponent از کتابخانه ارتقاء Angular داریم. متغیری به نام Angular را اعلام کنیم تا بتوانیم این مؤلفه را در ماژول AngularJS خود ثبت کنیم. اینگونه به نظر می رسد:
import { downgradeComponent } from ‘@angular/upgrade/static’;
declare var angular: angular.IAngularStatic;
downgrade کردن مؤلفه کاملاً ساده است. در پایین مؤلفه ما ، این مؤلفه را به عنوان دستورالعمل ثبت خواهیم کرد. دستورالعمل خود ، که فقط home است ، وارد میکنیم ، همان selector در این مورد. پس از آن ، تابع downgradeComponent را از ngUpgrade عبور خواهیم کرد. این تابع مؤلفه Angular ما را به یک دستورالعمل AngularJS تبدیل می کند. سرانجام ، ما این آبجکت را به صورت angular.IDirectiveFactory به کار میگیریم. ثبت نام پایانی به شرح زیر است:
app.module(‘app’)
.directive(‘home’, downgradeComponent({component: HomeComponent} as angular.IDirectiveFactory);

اکنون یک مولفه Angular تنزل یافته داریم که برای برنامه AngularJS ما در دسترس است. شاید تعجب کنید که چرا به جای وارد کردن و ثبت آن در ماژول AngularJS ما ، آن دستورالعمل را در پایین این فایل ثبت کردیم. هدف نهایی این است که به محض اینکه همه برنامه ما تبدیل شد از شر آن فایل خلاص شویم ، بنابراین می خواهیم به تدریج همه چیز را از آن فایل حذف کنیم و سپس با لغو نصب AngularJS ، نهایتا آن را حذف کنیم. این کار برای برنامه های نمونه یا جابه جایی سریع بسیار مفید است (در یک ثانیه).
پیش بروید و app.module.ajs.ts را باز کنید و ورودی homeComponent را در خط 12 و ثبت مؤلفه در خط 37 را حذف کنید.
مطلب سریع در مورد کامپایل AOT
این روش تنزل رتبه – ثبت مؤلفه downgrade شده در فایل کامپوننت و حذف آن از فایل ماژول AngularJS برای توسعه کاملاً مناسب عمل می کند یا اگر به دنبال بازنویسی سریع برنامه قبل از استقرار برنامه خود هستید. با این حال ، کامپایلر Angular AOT برای تولید با این روش کار نخواهد کرد. بلکه همه ثبت نامهای تنزل رتبه ما در ماژول AngularJS را میخواهد.
تنزل رتبه یکسان است ، اما در عوض کارهای زیر را انجام میدهید:
1- downgradeComponent را در app.module.ajs.ts وارد کنید (قبلاً در آنجا angular را دریافت کردید ، بنابراین نیازی به اعلام آن نیستید).
2- ورودی HomeComponent را به import { HomeComponent } from ‘./home/home.component’; وارد کنید چرا که به یک ارائه نام دار سوییچ کرده ایم.
3- ثبت نام مؤلفه ها را به همان رجیستری که دقیقاً در بالا نشان داده شده تغییر دهید.
در این لینک و همچنین در دوره 3 ارتقاء AngularJS می توانید اطلاعات بیشتری در مورد تنظیم ngUpgrade برای AOT مطالعه کنید (یک ماژول کامل وجود دارد که مرحله به مرحله آن را بیان می کند).
مرحله 3: به روزرسانی الگو
پس از به روزرسانی یک مولفه ، باید حتماً الگوی آن را به روز کنیم تا با دستور جدید Angular مطابقت داشته باشد. در این حالت ، حداقل تغییراتی وجود دارد که باید در homeComponent انجام دهید. فقط باید ctrl $ را در خط دو حذف کنیم. اکنون الگو اینگونه به نظر می رسد:
<div class=”row”>
<h1>{{title}}</h1>
</div>

اکنون ما در برنامه ترکیبی خود یک مولفه هوم کاملاً کاربردی تقلیل یافته داریم.
مرحله 4: افزودن به ماژول برنامه Angular
بیایید مؤلفه Angular جدید خود را به ماژول Angular اضافه کنیم. app.module.ts را باز کنید. ابتدا باید مولفه هوم خود را فقط بعد از ورودی های دیگر ، وارد کنیم:
import { HomeComponent } from ‘./home/home.component’;
حال ، باید HomeComponent را به برنامه Angular خود اضافه کنیم. کلیه مؤلفه های Angular باید به آرایه declarations درNgModule ما اضافه شوند. بنابراین ، پس از خط 12 در آبجت گزینه ها ، آرایه جدیدی به نام declarations اضافه می کنیم و مؤلفه خود را اضافه می کنیم:
declarations: [
HomeComponent
]

همچنین باید یک آرایه enterComponent ایجاد کنیم و HomeComponent خود را به آن اضافه کنیم. کلیه مؤلفه های کاهش یافته باید به این آرایه entryComponents اضافه شوند. آن را بعد از declarations اضافه خواهیم کرد
entryComponents: [
HomeComponent
]

با این کار ، عملیات ما تمام شد.
بررسی اینکه آیا کار کند
بیایید همان دستورات قبلی را اجرا کنیم و مطمئن شویم که برنامه ما هنوز کار می کند. این دستورات دوباره آمده است:
cd server
npm start
cd ../public
npm run dev

به localhost: 9000 برگردید. می بینید که مؤلفه اصلی ما در حال لود شدن در مرورگر به عنوان یک مولفه بازنویسی Angular است! حتی می توانید برای مثبت اندیشی، به سربرگ منابع Devtools کروم بروید. webpack:// را باز کنید ، به پایین بروید ./src/home/home.component.ts ، و مطمئناً ، در آنجا وجود دارد!

نتیجه
در این راهنما موارد زیر را انجام دادید:
• نصب Angular و ngUpgrade
• تنظیم یک ماژول Angular
• بوت کردن Angular و AngularJS
• به روزرسانی Webpack
• بازنویسی و کاهش رتبه اولین مؤلفه خود
در ادامه این راهنما ، ما در مورد اصول اولیه بازنویسی و سرویس های تنزل رتبه صحبت خواهیم کرد.

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور – احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel – ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan – استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue – ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو – ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express – ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18 – تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8 – استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18 – نصب Linux، Nginx، MariaDB،PHP در Debian 10

کلمات کلیدی خرید سرور

برچسب‌ها:Angular, AngularJS, bootstrapping, ngUpgrade, TypeScript, Webpack

۰ نظر

behnam gol mohamadi

بسیاری از برنامه های وب و API ها از نوعی تأیید اعتبار برای محافظت از منابع استفاده می کنند و دسترسی خود را فقط برای کاربران تأیید شده محدود می کنند. این راهنما نحوه اجرای احراز هویت برای یک API را با استفاده از JSON Web Tokens (JWTs) و Passport ، یک میان افزار تأیید اعتبار برای Node مطرح می کند.
آشنایی با JSON Web Tokens
JSON Web Token (JWT) یک استاندارد باز است که روشی کم حجم و مختصر برای انتقال ایمن اطلاعات بین طرفین به عنوان یک شی JSON را تعریف می کند.
JWT ها به دلیل اینکه به صورت دیجیتالی امضا میشوند ، امن هستند و و اگر اطلاعات موجود در داخل به هر شکلی دستکاری شود، نشانه نامعتبر را ارائه می کند. در ادامه خواهیم دید که چگونه این کار امکان پذیر است.
JWT از سه تعریف جداگانه ساخته شده است: header (هدر)، Payload (لود) و Signature (امضا).
header: هدر نوع الگوریتم مورد استفاده برای تأیید نشانه و نوع نشانه را تعریف می کند:
{
“type” : “JWT”,
“alg” : “HS256”
}

* Payload : شامل ادعاها (Claims) میباشد. ادعاها اطلاعاتی در مورد کاربر به همراه سایر ابرداده های اضافی مانند موارد زیر است:
{
id : 1
name : ‘devgson’
iat : 1421211952
}

Signature: امضا اطلاعات را در header و Payload در فرمت base64 با یک کلید مخفی کدگذاری می کند. تمام این اطلاعات توسط الگوریتم مشخص شده در سربرگ امضا می شود. در مثال ما ، از HMACSHA256 استفاده می کنیم. امضا تأیید می کند که پیام ارسال شده در طول مسیر دستکاری نشده است.
HMACSHA256(
base64UrlEncode(header) + “.” +
base64UrlEncode(payload),
secret
)

توجه: از JWT نباید برای انتقال یا ذخیره اطلاعات ایمن استفاده شود ، زیرا هر کسی که قادر به رهگیری توکن باشد ، می تواند هدر و لود را در داخل آن رمزگشایی کند. تمام کاری که امضا انجام میدهد، تأیید این است که نشانه به هیچ وجه دستکاری نشده است. این امر نمی تواند مانع از دست یابی به توکن شود.

تنظیم Passport
Passport یک میان افزار تأیید اعتبار است که برای تأیید اعتبار درخواست ها استفاده می شود. این امکان را به توسعه دهندگان می دهد تا برای تأیید اعتبار کاربران از استراتژی های مختلفی استفاده کنند ، از جمله استفاده از یک پایگاه داده محلی یا اتصال به شبکه های اجتماعی از طریق API . در این راهنما ، ما از استراتژی محلی (ایمیل / رمز عبور) استفاده خواهیم کرد.
بیایید یک ساختار پوشه را برای فایل هایی که از آنها استفاده خواهیم کرد ایجاد کنیم:
-model
—model.js
-routes
—routes.js
—secure-routes.js
-auth
—auth.js
-app.js
-package.json

بسته های لازم را با این دستور نصب کنید:
⦁ npm install –save bcrypt body-parser express jsonwebtoken mongoose passport passport-local passport-jwt
⦁

برای درهم سازی رمزهای عبور کاربر به bcrypt ، برای امضای نشانه ها به jsonwebtoken ، برای اجرای استراتژی محلی به passport-local و برای دریافت و تأیید JWT به passport-jwt نیاز خواهیم داشت.
در اینجا نحوه کار برنامه آمده است:
• کاربر با sign up و log in وارد سیستم شده و پس از ورود کاربر به سیستم ، یک نشانه وب JSON به کاربر داده می شود.
• از کاربر انتظار می رود این نشانه را به صورت محلی ذخیره کند.
• این نشانه هنگام تلاش برای دستیابی به برخی از مسیرهای امن توسط کاربر ارسال می شود ، پس از تأیید این نشانه ، به کاربر اجازه دسترسی به مسیر داده میشود.
تنظیم پایگاه داده
اول از همه ، ما طرح کاربر را ایجاد می کنیم. کاربر فقط باید ایمیل و رمز عبور خود را ارائه کند ، این اطلاعات کافی است.
model/model.js

const mongoose = require(‘mongoose’)
const bcrypt = require(‘bcrypt’);
const Schema = mongoose.Schema;

const UserSchema = new Schema({
email : {
type : String,
required : true,
unique : true
},
password : {
type : String,
required : true
}
});
…

اکنون ما نمی خواهیم رمزهای عبور را با متن ساده ذخیره کنیم ، زیرا اگر یک حمله کننده موفق به دسترسی به بانک اطلاعاتی شود ، می تواند رمز عبور را بخواند ، بنابراین می خواهیم از این امر جلوگیری کنیم. از بسته ای به نام “bcrypt” استفاده می کنیم تا کلمه عبور کاربر را در هم سازی (hash) کند و آنها را با خیال راحت ذخیره کند.
model/model.js
….
//This is called a pre-hook, before the user information is saved in the database
//this function will be called, we’ll get the plain text password, hash it and store it.
UserSchema.pre(‘save’, async function(next){
//’this’ refers to the current document about to be saved
const user = this;
//Hash the password with a salt round of 10, the higher the rounds the more secure, but the slower
//your application becomes.
const hash = await bcrypt.hash(this.password, 10);
//Replace the plain text password with the hash and then store it
this.password = hash;
//Indicates we’re done and moves on to the next middleware
next();
});

//We’ll use this later on to make sure that the user trying to log in has the correct credentials
UserSchema.methods.isValidPassword = async function(password){
const user = this;
//Hashes the password sent by the user for login and checks if the hashed password stored in the
//database matches the one sent. Returns true if it does else false.
const compare = await bcrypt.compare(password, user.password);
return compare;
}

const UserModel = mongoose.model(‘user’,UserSchema);

module.exports = UserModel;

تنظیم ثبت نام و ورود به میان افزار
ما از استراتژی محلی passport برای ایجاد میان افزار استفاده خواهیم کرد که ثبت نام کاربر و ورود را انجام میدهد. سپس به مسیرهای خاصی وصل شده و برای احراز هویت استفاده می شود.
auth/auth.js

const passport = require(‘passport’);
const localStrategy = require(‘passport-local’).Strategy;
const UserModel = require(‘../model/model’);

//Create a passport middleware to handle user registration
passport.use(‘signup’, new localStrategy({
usernameField : ’email’,
passwordField : ‘password’
}, async (email, password, done) => {
try {
//Save the information provided by the user to the the database
const user = await UserModel.create({ email, password });
//Send the user information to the next middleware
return done(null, user);
} catch (error) {
done(error);
}
}));

//Create a passport middleware to handle User login
passport.use(‘login’, new localStrategy({
usernameField : ’email’,
passwordField : ‘password’
}, async (email, password, done) => {
try {
//Find the user associated with the email provided by the user
const user = await UserModel.findOne({ email });
if( !user ){
//If the user isn’t found in the database, return a message
return done(null, false, { message : ‘User not found’});
}
//Validate password and make sure it matches with the corresponding hash stored in the database
//If the passwords match, it returns a value of true.
const validate = await user.isValidPassword(password);
if( !validate ){
return done(null, false, { message : ‘Wrong Password’});
}
//Send the user information to the next middleware
return done(null, user, { message : ‘Logged in Successfully’});
} catch (error) {
return done(error);
}
}));
….
ایجاد مسیرها
اکنون که میان افزاری برای مدیریت ثبت نام و ورود به سیستم داریم ، بیایید مسیری ایجاد کنیم که از این میان افزار استفاده کند.
routes/routes.js
const express = require(‘express’);
const passport = require(‘passport’);
const jwt = require(‘jsonwebtoken’);

const router = express.Router();

//When the user sends a post request to this route, passport authenticates the user based on the
//middleware created previously
router.post(‘/signup’, passport.authenticate(‘signup’, { session : false }) , async (req, res, next) => {
res.json({
message : ‘Signup successful’,
user : req.user
});
});

…

امضای JWT
هنگامی که کاربر وارد سیستم میشود ، اطلاعات کاربر به callback سفارشی ما ارسال می شود که به نوبه خود یک نشانه ایمن با اطلاعات ایجاد می کند. پس از دستیابی به مسیرهای ایمن (که بعداً ایجاد خواهیم کرد) باید این نشانه به عنوان یک پارامتر پرس و جو منتقل شود.

routes/routes.js
….
router.post(‘/login’, async (req, res, next) => {
passport.authenticate(‘login’, async (err, user, info) => { try {
if(err || !user){
const error = new Error(‘An Error occurred’)
return next(error);
}
req.login(user, { session : false }, async (error) => {
if( error ) return next(error)
//We don’t want to store the sensitive information such as the
//user password in the token so we pick only the email and id
const body = { _id : user._id, email : user.email };
//Sign the JWT token and populate the payload with the user email and id
const token = jwt.sign({ user : body },’top_secret’);
//Send back the token to the user
return res.json({ token });
}); } catch (error) {
return next(error);
}
})(req, res, next);
});

module.exports = router;

توجه: ما { session : false } را تنظیم کردیم زیرا نمی خواهیم جزئیات کاربر را در یک بخش ذخیره کنیم. انتظار داریم که کاربر در صورت درخواست هر یک از موارد را به مسیرهای امن ارسال کند. این امر به ویژه برای API مفید است ، اما به دلایل عملکردی روش پیشنهادی برای برنامه وب نیست.

تأیید نشانه کاربر
بنابراین اکنون ثبت نام و ورود کاربر به سیستم را مدیریت کرده ایم ، قدم بعدی این است که به کاربران دارای نشانه اجازه دسترسی به مسیرهای خاص ایمن را بدهیم ، اما چگونه می توانیم تأیید کنیم که توکن ارسال شده توسط کاربر معتبر است و به طریقی دستکاری نشده است. بیایید در مرحله بعد این کار را انجام دهیم.
auth/auth.js
….
const JWTstrategy = require(‘passport-jwt’).Strategy;
//We use this to extract the JWT sent by the user
const ExtractJWT = require(‘passport-jwt’).ExtractJwt;

//This verifies that the token sent by the user is valid
passport.use(new JWTstrategy({
//secret we used to sign our JWT
secretOrKey : ‘top_secret’,
//we expect the user to send the token as a query parameter with the name ‘secret_token’
jwtFromRequest : ExtractJWT.fromUrlQueryParameter(‘secret_token’)
}, async (token, done) => {
try {
//Pass the user details to the next middleware
return done(null, token.user);
} catch (error) {
done(error);
}
}));

توجه: اگر به اطلاعات اضافی یا حساسی در مورد کاربر نیاز دارید که در توکن موجود نیست ، می توانید از _id موجود در نشانه برای بازیابی آنها از پایگاه داده استفاده کنید.
ایجاد مسیرهای ایمن
اکنون اجازه می دهیم برخی از مسیرهای ایمن را ایجاد کنید که فقط کاربران دارای نشان های تأیید شده به آنها دسترسی داشته باشند.
routes/secure-routes.js
const express = require(‘express’);

const router = express.Router();

//Let’s say the route below is very sensitive and we want only authorized users to have access

//Displays information tailored according to the logged in user
router.get(‘/profile’, (req, res, next) => {
//We’ll just send back the user details and the token
res.json({
message : ‘You made it to the secure route’,
user : req.user,
token : req.query.secret_token
})
});

module.exports = router;

بنابراین اکنون با ایجاد مسیرها و میان افزار تأیید اعتبار کار ما انجام شده است ، بیایید همه چیز را کنار هم قرار دهیم و سپس آن را آزمایش کنیم.
app.js

const express = require(‘express’);
const mongoose = require(‘mongoose’);
const bodyParser = require(‘body-parser’);
const passport = require(‘passport’);
const app = express();
const UserModel = require(‘./model/model’);

mongoose.connect(‘mongodb://127.0.0.1:27017/passport-jwt’, { useMongoClient : true });
mongoose.connection.on(‘error’, error => console.log(error) );
mongoose.Promise = global.Promise;

require(‘./auth/auth’);

app.use( bodyParser.urlencoded({ extended : false }) );

const routes = require(‘./routes/routes’);
const secureRoute = require(‘./routes/secure-route’);

app.use(‘/’, routes);
//We plugin our jwt strategy as a middleware so only verified users can access this route
app.use(‘/user’, passport.authenticate(‘jwt’, { session : false }), secureRoute );

//Handle errors
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.json({ error : err });
});

app.listen(3000, () => {
console.log(‘Server started’)

تست با Postman
اکنون که همه چیز را کنار هم قرار داده ایم ، بگذارید از Postman برای آزمایش تأیید اعتبار API استفاده کنیم. اول از همه ما باید با یک ایمیل و رمز عبور وارد سیستم شوید. می توانیم این جزئیات را از طریق body درخواست خود ارسال کنیم. پس از اتمام این کار ، برای شروع درخواست POST روی دکمه ارسال کلیک کنید.

می توانیم رمز عبور رمزگذاری شده را ببینیم ، بنابراین هرکسی که به دیتابیس دسترسی دارد فقط به رمز عبور hashed دسترسی خواهد داشت ، ما امنیت را 10 دور افزایش دادیم. در این لینک میتوانید اطلاعات بیشتری در این مورد بیابید.
اکنون بیایید با اعتبارات خود وارد شویم و توکن را دریافت کنیم. مسیر /login را بازدید کنید و ایمیل و رمز عبوری که قبلا استفاده کردید را وارد نمایید و سپس درخواست را آغاز کنید.

اکنون ما نشانه خود را داریم ، هر زمان که بخواهیم به یک مسیر امن دسترسی پیدا کنیم ، این نشانه را ارسال خواهیم کرد. بیایید این کار را با دسترسی به یک مسیر امن user/profile امتحان کنیم ، نشانه خود را در یک پارامتر پرس و جو به نام secret_token ارسال خواهیم کرد ، این نشانه دریافت و بررسی می شود و در صورت صحت اعتبار دسترسی به مسیر را دریافت خواهیم کرد.

همانطور که مشاهده می کنید ، نشانه معتبر به ما امکان دسترسی به مسیر امن را می دهد. می توانید پیش بروید و دسترسی به این مسیر را امتحان کنید. اما در صورت وجود نشانه نامعتبر ، این درخواست یک خطای Unauthorized را برمی گرداند.
نتیجه
JSON web tokens راهی مطمئن برای ایجاد تأیید اعتبار برای API ها ارائه می دهند. با رمزگذاری کلیه اطلاعات موجود در این نشانه می توان یک لایه امنیتی بیشتر اضافه کرد و از این طریق آن را ایمن تر کرد. برخی منابع برای یادگیری بیشتر در مورد JWT عبارتند از:
Getting started with JSON web tokens by Auth0
Using JSON web tokens as API keys by Auth0

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور – احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel – ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan – استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue – ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو – ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express – ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18 – تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8 – استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18 – نصب Linux، Nginx، MariaDB،PHP در Debian 10

کلمات کلیدی خرید سرور

برچسب‌ها:JSON Web Tokens, Passport, Payload

۰ نظر

behnam gol mohamadi

اگر مدتی است که برای وب کار می کنید ، در ساخت swiper ها حداقل با برخی مشکلات روبرو شده اید – به دلایلی ، همیشه به نظر می رسد که راهکار خاص خود را دارند. این swiper ها به اندازه دلخواه شما پاسخگو نیستند و یا کار طراحی گسترده ای باید انجام شود تا به نیمی از آنچه انتظار داشتید برسید.
حال اگر تا کنون از Netflix استفاده کرده اید ، دیده اید که swiper های فیلم آنها چقدر ظریف و روان هستند. به لطف Vue و کتابخانه vue-awesome-swiper ، می توانید swiperهای مخصوص خود را بسازید.
در این آموزش یک swiper در Vue ایجاد خواهید کرد.
• یک محیط توسعه محلی برای Node.js. نیاز دارید. آموزش نحوه نصب Node.js و ایجاد محیط توسعه محلی را دنبال کنید.
مرحله 1 – ایجاد پروژه
Vue یک چارچوب frontend پیشرونده است که به ما کمک می کند تا رابط های تعاملی و شگفت انگیزی ایجاد کنیم. می توانید در این لینک درمورد Vue اطلاعات بیشتری کسب کنید
برای نصب Vue در دستگاه خود ، باید دستور زیر را اجرا کنید:
$ npm install -g vue-cli

این دستور Vue را به صورت جهانی روی دستگاه شما نصب می کند. برای تأیید نصب Vue ، دستور زیر را در ترمینال خود اجرا کنید:
$ vue –version

اگر به عنوان نتیجه یک عدد نسخه دریافت کردید ، یعنی Vue را روی دستگاه خود نصب کرده اید.
اکنون که Vue بر روی دستگاه های شما نصب شده است ، آماده هستیم تا ساخت خود را آغاز کنیم. برای ایجاد برنامه ، از Vue CLI برای شروع کار استفاده کنید. دستور زیر را در ترمینال خود اجرا کنید:
$ vue init webpack netflix-like-swipers

این دستور اعلانی را برای تکمیل کار به ما نشان می دهد و هنگامی که کارها را انجام دادیم ، یک پروژه نمونه Vue را با استفاده از webpack ایجاد می کنیم تا برنامه خود را تغییر داده و بسازیم.

مرحله 2 – ایجاد مؤلفه فیلم
هدف مؤلفه ها استفاده مجدد از برخی قسمت های UI ماست. در این حالت ، ما قصد داریم فیلم های زیادی داشته باشیم ، بنابراین می خواهیم یک مولفه فیلم بسازیم و سپس همانطور که می خواهیم در طول برنامه از آن استفاده کنیم.
برای ساخت مؤلفه فیلم ، یک فایل Movies.vue را در دیرکتوری src/components/ ایجاد کنید
$ nano src/components/Movie.vue

در Movie.vue ، مؤلفه خود را به شرح زیر می سازیم:
Movie.vue
<script>
export default {
name: ‘Movie’,
props : [
‘image’,
‘title’,
‘description’,
‘duration’
],
}
</script>

در اینجا ، ما کامپوننت خود را نامگذاری می کنیم و همچنین props را برای مولفه ها مشخص میکنیم که در هر بار استفاده از مؤلفه اضافه می شود .
برای تعریف الگوی مؤلفه ، کد زیر را اضافه کنید:
Movie.vue
<template>
<div class=”movie” v-bind:style=”{ backgroundImage: ‘url(‘ + image + ‘)’ }”>
<div class=”content”>
<h1 class=”title”>{{ title }}</h1>
<p class=”description”>{{ description }}</p>
<p class=”duration”>{{ duration }}</p>
</div>
</div>
</template>

سپس برای کنترل نحوه نمایش فیلم ، یک ظاهر طراحی شده برای مؤلفه اضافه کنید:
Movie.vue
<style scoped>
h1, h2 {
font-weight: normal;
}
.movie{
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
text-align: left;
padding: 10px;
width : 350px;
height : 500px;
background-color: rgba(255,255,255,0.7);
background-repeat: no-repeat;
background-blend-mode: overlay;
background-size: cover;
}
</style>

اکنون که مؤلفه فیلم خود را ایجاد کرده اید ، Swiper ها را در برنامه ادغام می کنید.
مرحله 3 – ایجاد مؤلفه HomePage با Vue-Awesome-Swiper
ماژول را با دستور زیر نصب کنید:
$ npm install vue-awesome-swiper –save

اکنون یک مولفه HomePage.vue را در دیرکتوری src/components ایجاد کنید که در آن از swiper استفاده خواهیم کرد.
$ touch src/components/HomePage.vue

در HomePage.vue ، مؤلفه را ایجاد کرده و مؤلفه های Movie، swiper، swiperSlide را وارد کنید. و اسلایدر را با استفاده از خصوصیات thedata برای مؤلفه پیکربندی کنید:
HomePage.vue
<script>
import Movie from ‘./Movie’
import ‘swiper/dist/css/swiper.css’
import { swiper, swiperSlide } from ‘vue-awesome-swiper’

export default {
name: ‘HomePage’,
components: {
Movie,
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
direction : ‘vertical’,
pagination: {
el: ‘.swiper-pagination’,
type: ‘bullets’
},
}
}
}
}
</script>
در این حالت ، مشخص کردیم که می خواهیم swipers ما به صورت عمودی باشند و سبک صفحه بندی باید bullets باشد
قالب، مولفه های تکی Movie را لود می کند و محتوا را تنظیم می کند:
https://via.placeholder.com/728×90.png?text=Visit+WhoIsHostingThis.com+Buyers+Guide
C/O https://placeholder.com/
HomePage.vue
<template>
<swiper :options=”swiperOption”>

<swiper-slide>
<Movie image=”https://via.placeholder.com/300×450.png?text=Movie1″ title=”Movie 1″ description=”Movie 1 description” duration=”2hrs”/>
</swiper-slide>
<swiper-slide>
<Movie image=”https://via.placeholder.com/300×450.png?text=Movie1″ title=”Movie 2″ description=”Movie 2 description” duration=”2hrs”/>
</swiper-slide>

<swiper-slide>
<Movie image=”https://via.placeholder.com/300×450.png?text=Movie1″ title=”Movie 5″ description=”Movie 5 description” duration=”2hrs”/>

</swiper-slide>

ما از مؤلفه <swiper /> استفاده می کنیم و مولفه های <swiper-slide /> بسیاری در داخل آن داریم. برای نگه داشتن عنصر صفحه بندی نیز یک div اضافه کردیم.
CSS زیر را به فایل اضافه کنید تا swiper را طراحی کنید:
HomePage.vue
<style scoped>
.swiper-slide{
display: flex;
justify-content: center;
flex-direction: column;
}
.swiper-container {
height : 500px;
}
</style>

فایل را ذخیره کنید. اکنون می توانید مؤلفه را ارائه دهید.
مرحله 4 – ارائه مؤلفه های ما
برای ارائه مولفه ها ، آنها را وارد کنید و در فایل src / App.vue استفاده کنید.
فایل را در ویرایشگر خود باز کنید:
$ nano src/App.vue

ابتدا کامپوننت HomePage را وارد کنید و swiper را مقدار اولیه بدهید:
App.vue
<script>
import HomePage from ‘./components/HomePage’
export default {
name: ‘App’,
components: {
HomePage
},
data() {
return {
swiperType : ‘Easy Vertical Swiper’
}
}
}
</script>

سپس الگو را اضافه کنید:
App.vue
<template>
<div id=”app”>
<h1>{{ swiperType }}</h1>
<HomePage/>
</div>
</template>

در آخر ، یک ظاهر طراحی اضافه کنید:
App.vue
<style>
#app {
font-family: ‘Avenir’, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
display: flex;
align-items: center;
flex-direction: column;
}
</style>

اطمینان حاصل کنید که همه فایل ها ذخیره شده اند و سرور مجازی توسعه را با دستور زیر شروع می کنید:
npm run dev

با این دستور یک سرور مجازی توسعه شروع می شود. برای مشاهده برنامه خود به http: // localhost: 8080 مراجعه کنید.
مرحله 5 – جستجوی انواع دیگر Swiper ها
اکنون که مشاهده کردیم که Swiperهای ساده چطور کار می کنند ، بیایید گزینه های بیشتری را بررسی کنیم. به افکت های Swiper CoverFlow سه بعدی و Swiperهای جایگزیده نگاهی خواهیم انداخت. برای نمونه های بیشتر swiper ، می توانید مثال های آن را در صفحه پروژه vue-awesome-swiper مرور کنید.
برای ایجاد یک Swiper افکت سه بعدی CoverFlow ، گزینه های کشویی را در HomePage.vue تنظیم کنید تا به این شکل درآید: // HomePage.vue
<script>
[..]
export default {
name: ‘HomePage’,
[…]
data() {
return {
swiperOption: {
effect: ‘coverflow’,
grabCursor: true,
centeredSlides: true,
slidesPerView: ‘5’,
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows : false
},
pagination: {
el: ‘.swiper-pagination’
}
}
}
}
}
</script>

اکنون ممکن است از خودتان بپرسید ، “اگر می خواستم در swiper های خود swiper داشته باشم باید چه کار میکردم”. برای انجام این کار ، HomePage.vue خود را به شرح زیر تغییر دهید:
// HomePage.vue
<script>
[…]
export default {
[…]
data() {
return {
swiperOptionh: {
spaceBetween: 50,
pagination: {
el: ‘.swiper-pagination-h’,
clickable: true
}
},
swiperOptionv: {
direction: ‘vertical’,
spaceBetween: 50,
pagination: {
el: ‘.swiper-pagination-v’,
clickable: true
}
}
}
}
}
</script>

ما تنظیمات مربوط به swipers های مختلف را مشخص می کنیم و سپس در الگوی خود ، ساختاری مانند این داریم:
<template>
<swiper :options=”swiperOptionh”>
<swiper-slide>
[…]
</swiper-slide>
[…]
<swiper-slide>
<swiper :options=”swiperOptionv”>
<swiper-slide>
[…]
</swiper-slide>
[…]
<div class=”swiper-pagination swiper-pagination-v” slot=”pagination”></div>
</swiper>
</swiper-slide>
[…]
<div class=”swiper-pagination swiper-pagination-h” slot=”pagination”></div>
</swiper>
</template>

توجه کنید که چگونه از:options=”swiperOptionh” برای مشخص کردن پیکربندی های horizontal swiper و از :options=”swiperOptionv” برای vertical swiper استفاده می کنیم .
اکنون که نمونه های پایه swiper را دیدیم ، به خوبی میتوانیم به ساخت Netflix مانند swipers بپردازیم.
فایل HomePage.vue خود را ویرایش کنید تا به این شکل ظاهر شود:
// HomePage.vue
<script>
[…]
export default {
[…]
data() {
return {
swiperOptions : {
slidesPerView: 5,
spaceBetween: 0,
freeMode: true,
loop: true,
navigation: {
nextEl: ‘.swiper-button-next’,
prevEl: ‘.swiper-button-prev’
}
}
}
}
}
</script>

با انتخاب تعداد فیلم هایی که در هر نمایش می خواهیم ، گزینه های مربوط به swiper را تغییر دادیم. همچنین فاصله بین آنها را 0 قرار دادیم. برای اینکه swipe احساس بی پایان داشته باشد، حلقه را روی true قرار می دهیم. همچنین نام کلاس دکمه های ناوبری خود را مشخص کردیم – این کار عملکردی را به دکمه ها اضافه می کند.
تمپلیت را اصلاح کنید تا ساختار زیر را داشته باشد:
<template>
<swiper :options=”swiperOptions”>
<swiper-slide>
<Movie image=”http://res.cloudinary.com/og-tech/image/upload/s–4NgMf3RF–/v1521804358/avengers.jpg” title=”Avengers : Infinity War” description=”Thanos is around” duration=”2hrs”/>
</swiper-slide>
[…]
<swiper-slide>
<Movie image=”http://res.cloudinary.com/og-tech/image/upload/s–qXaW5V3E–/v1521804426/wakanda.jpg” title=”Black Panther” description=”Wakanda Forever” duration=”2hrs15mins”/>
</swiper-slide>
<div class=”swiper-button-prev” slot=”button-prev”></div>
<div class=”swiper-button-next” slot=”button-next”></div>
</swiper>
</template>

برای دیدن نتایج به سرور مجازی خود مراجعه کنید.
نتیجه
در این مقاله ، شما swipers را در یک برنامه Vue پیاده سازی کرده اید. اکنون می توانید آنها را با سهولت در برنامه های کاربردی خود اجرا کنید.

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور – احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel – ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan – استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue – ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو – ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express – ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18 – تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8 – استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18 – نصب Linux، Nginx، MariaDB،PHP در Debian 10

کلمات کلیدی خرید سرور

برچسب‌ها:frontend, Netflix, swiper, Vue, Vue CLI

۰ نظر

behnam gol mohamadi

مستندات خوب بخش مهمی از یک پروژه موفق است ، اما یک سیستم مستندسازی کامل ممکن است بیشتر از آنچه پروژه شما نیاز دارد را شامل شود. در این حالت ، صفحات استاتیک اغلب کاملاً خوب عمل می کنند. در این پست ، ما می خواهیم یک وب سایت مستندات استاتیک ایجاد کنیم که همچنین یک برنامه تک صفحه با استفاده از سازنده استاتیک سایت یعنی VuePress است.
سایت های استاتیک
سایت های استاتیک وب سایتهایی هستند که همانطور که ذخیره شده اند ارائه می شوند. هیچ تعامل مستقیم مشتری-سرور مجازی به جز از سمت برنامه های جاسازی شده شخص ثالث وجود ندارد. تولید کنندگان سایت استاتیک در اینترنت بسیار زیاد هستند و هر یک نسبت به بقیه متفاوت است. برخی از آنها سرعت و دفعات لود را بیش از انعطاف پذیری ترجیح میدهند، و برخی دیگر از قابلیت های بسط یافته حمایت می کنند. سایتهای استاتیک به دلیل افزایش سرعت آنها ترجیح داده می شوند و نبود سرور مجازی احتمال نقص در امنیت را کاهش می دهد.
VuePress دارای یک مولد سایت استاتیک و همچنین یک تم پیش فرض مناسب برای ساخت سریع وب سایت های مستند سازی است. در این آموزش ، ما از تم مستندات پیش فرض برای ساخت سیستم خود استفاده خواهیم کرد.
VuePress
به طور پیش فرض ، VuePress فایل های markdown را همانطور که در پوشه ها شکل گرفته و برای ارائه به فایل های HTML ارسال می شوند، تجزیه میکند. VuePress با ایجاد Vue ، Vue Router برای ایجاد مسیرهای جداگانه ، و webpack برای دارایی های دسته شده به کار می آید. در حین ساخت ، هر فایل markdown به عنوان الگوی Vue تجزیه می شود ، در حالی که دارایی ها توسط یک webpack دسته می شوند. تجزیه فایل های markdown به الگوهای Vue راهی را ایجاد می کند که می توانید برای عبور از اسکریپت های بومی Vue به شکل مولفه های تک فایل استفاده کنید.
VuePress سازگار با سئو است و به طور پیش فرض ابزاری برای اجرای ردیابی تحلیلی با استفاده از Google Analytics در صفحات شما فراهم می کند. همچنین ، VuePress با یک سیستم جستجوی حداقلی همراه است که تمام عناوین موجود در وب سایت را فهرست بندی می کند و در هنگام جستجو آنها را نمایش می دهد.
اگرچه انتقالات VuePress با یک طرح پاسخگوی پیش فرض برای مستندات ، ارسال می شوند ، اما از طرح بندی های سفارشی برای یک ظاهر طراحی شده نیز پشتیبانی می کند. برای این پست ، ما باید یک سیستم مستندسازی حداقلی با استفاده از تم پیش فرض و همچنین ویژگی Vue در Markdown را با استفاده از ساخت یک شمارنده ساده در یک فایل Markdown ، پیاده سازی کنیم.
پیش نیازها
برای این آموزش ، باید دانش اساسی در مورد HTML ، CSS و JavaScript داشته باشید. آگاهی از Vue نیز مفید است اما لازم نیست.
نصب
برای این پروژه به Node و npm مدیر بسته آن نیاز دارید. با اجرای دستور زیر بررسی کنید که آیا آن را در پایانه خود نصب کرده اید:
node -v && npm -v

این دستور به ترتیب نسخه های نصب شده node و npm را نمایش می دهد. اگر نصب نکردید ، می توانید آن را از اینجا دانلود کنید.
سپس ، یک پروژه جدید ایجاد کنید. یک پوشه جدید ایجاد کنید و به آن دیرکتوری تغییر دهید:
mkdir vuepress && cd $_

یک پروژه node جدید را در دیرکتوری vuepress مقداردهی کنید:
npm init -y

به سرعت پروژه جدیدی را چارچوب بندی می کند و یک فایل pack.json ایجاد می نماید.
سپس ، VuePress را بصورت محلی با دستور زیر نصب میکنیم:
npm install -D vuepress

پس از نصب VuePress در پروژه ، همه موارد مورد نیاز خود را دارید ، زیرا VuePress با تم مستندات پیش فرض استفاده شده برای این پروژه ارسال می شود. با این حال ، می خواهیم مستندات را متناسب با نیاز خود تنظیم کنیم ، بنابراین در محله بعد پوشه ها و فایل ها را با متن ساختگی ایجاد خواهیم کرد.
ایجاد پوشه ها و فایل ها
هنگام ایجاد پوشه در VuePress ، مراقب باشید ، زیرا پوشه ها و فایل های علامت گذاری را مطابق ترتیب آنها ارزیابی می کند. هر فایل علامت گذاری به عنوان یک پوشه به یک فایل HTML وارد می شود که مسیر آن پوشه اصلی است.
ابتدا یک پوشه Docs ایجاد کنید تا تمام محتوای و پیکربندی اسناد را در خود جای دهد:
mkdir docs && cd $_

در دایرکتوری Docs ، پوشه .vuepress و پوشه های اسناد را که فایل ها را ذخیره می کند ایجاد کنید – counter و guide.
برای کارکردن این مسیرها ، در هر پوشه به فایل README.md نیاز دارند. این به عنوان یک مسیر هوم به آن بخش ویژه خدمت می کند.
پوشه counter حاوی فایل های نشانه گذاری برای تجزیه و همچنین فایل های پیش فرض README.md برای صفحه اصلی است. پوشه guide حاوی مطالب مشابه با پوشه counter میباشد.
پوشه .vuepress دیرکتوری مولفه ها را در خود جای میدهد، پوشه dist که در build ایجاد شده و فایل config.js که برای پیکربندی سیستم کلی استفاده می شود.
ایجاد مؤلفه های Vue
برای این پروژه ، ما یک شمارشگر ساده با استفاده از Vue می سازیم. دو مؤلفه Vue را با پسوند .vue به نام counter.vue و my-header.vue ایجاد کنید. این مؤلفه ها به ترتیب به عنوان یک مؤلفه شمارنده و یک هدر ساده عمل می کنند. در my-header.vue ، متن vue را ویرایش کنید:
<template>
<div>
<h1>This Header is actually a Vue Template</h1>
</div>
</template>
<script>

</script>
<style scoped>
</style>

اسکریپت counter.vue را مانند این ویرایش کنید:
<template>
<div class=”counter”>
<h1>{{number}}</h1>
<button @click = “increment”>Increment</button>
<button @click = “decrement”>Decrement</button>
</div>
</template>
<script>
export default {
data(){
return{
number: 0,
}
},
methods:{
increment(){
if(this.number >= 0){
this.number++
}
},
decrement(){
if(this.number > 0){
this.number —
}
}
}
}
</script>
<style scoped>
.counter{
display: inline-block;
margin-left: 30%;
}
button{
display: inline-block;
padding: 20px;
margin: 10px;
font-weight: bold;
border-radius: 5px;
box-shadow: 0px 0px 5px 0px rgb(11, 11, 114);
}
h1{
text-align: center;
}
</style>

این مؤلفه شامل همه چیزهایی است که برای شمارنده لازم دارید. در حال حاضر مولفه های Vue آماده استفاده هستند.
ایجاد فایل های Markdown
در مرحله بعد ، فایلهای Markdown را در دایرکتوری counter و guide ایجاد کنید. فایل های Markdown را برای counter و guide ببینید. از Frontmatter برای تنظیم دینامیکی عنوان صفحات جداگانه استفاده می شود. مؤلفه <counter /> نیز در فایل علامت گذاری قرار داده شده است.
این فایل ها بعداً به صفحات استاتیک تبدیل می شوند. برای صفحه اصلی خود ، همچنین نیاز به یک فایل Markdown با عنوان README.md داریم تا به عنوان صفحه اصلی ارائه شود. Frontmatter در فایل های Markdown برای تنظیم برخی از ویژگی های پویای صفحه اصلی استفاده می شود. یک فایل EADME.md در دایرکتوری اسناد ایجاد و آن را ویرایش کنید:
—
home: true
actionText: See Counter App
actionLink: /counter/counter-app
features:
– title: Embedded Vue Counter
details: A Vue counter developed using Vue is embedded in this doc, now that’s the power of VuePress!
– title: Fun Docs made with VuePress
details: This entire doc was basically made with VuePress which parsed markdown files and corresponding assets using webpack.
footer: Developed using VuePress by William Imoh
—

سپس ، مؤلفه my-header Vue را در مسیر هوم قرار دهید. فایل README.md را ویرایش کنید تا مؤلفه را شامل شود:
—
home: true
actionText: See Counter App
actionLink: /counter/counter-app
features:
– title: Embedded Vue Counter
details: A Vue counter developed using Vue is embedded in this doc, now that’s the power of VuePress!
– title: Fun Docs made with VuePress
details: This entire doc was basically made with VuePress which parsed markdown files and corresponding assets using webpack.
footer: Developed using VuePress by William Imoh
—
<my-header></my-header>

اکنون تمام فایل های مورد نیاز Markdown را دارید. بیایید پیکربندی ناوبری و نوار کناری (sidebar) را با استفاده از .vuepress / config.js انجام دهیم.
پیکربندی طرح بندی
فایل config.js برای شخصی سازی سیستم مستندات استفاده می شود. در ایجاد این سیستم سفارشی ، یک آبجکت که شامل فیلدهای مورد نیاز است صادر می کنیم:
module.exports = {
title: ‘VuePress’,
description: “A demo documentation using VuePress”,
themeConfig:{
nav: [
{ text: ‘COUNTER’, link: ‘/counter/’ },
{ text: ‘GUIDE’, link: ‘/guide/’ },
],
sidebar: [
{
title: ‘Counter’,
collapsable: false,
children: [
‘/counter/counter-app’
]
},
{
title: ‘API Guide’,
collapsable: false,
children: [
‘/guide/guide’,
‘/guide/api’
]
}
]
}
}

ابتدا عنوان وب سایت را مشخص می کنیم و توضیحی را به آن اختصاص می دهیم که برای سئو خوب باشد. این عنوان و توضیحات به طور خودکار یک سیستم جستجوی فهرست شده را در وب سایت با نوار جستجو ارائه می دهد.
مورد بعدی در اسکریپت ، آبجکت themeConfig است که پارامترهای مورد نیاز برای اجرای برخی عملکردهای خاص در تم را دریافت می کند. برای ایجاد نوار ناوبری ، یک آرایه nav ایجاد می کنیم که حاوی آبجکت های مشخص کننده متن و مسیر نمایش هر عنصر nav می باشد. می توانید اطلاعات بیشتری درباره پیکربندی تم پیش فرض را در اینجا مشاهده کنید.
ما از نوارهای کناری طبقه بندی شده استفاده کرده ایم تا کاربران بتوانند هر لحظه در مستندات ، نگاهی سریع به منو داشته باشند. با استفاده از ویژگی collapsable در گروه نوار کناری ، می توان منوی نوار کناری را به طور پیش فرض روی collapse تنظیم کرد. در اینجا می توانید اطلاعات بیشتری را در نوار کناری بیابید.
اکنون همه چیز تنظیم شده است ، برای شروع یک سرور مجازی توسعه ، دستور زیر را اجرا کنید:
vuepress dev docs

سرور مجازی dev محلی در پورت 8080 میزبانی می شود. VuePress با ویژگی لود مجدد جدید ، اجرای هرگونه تغییر در برنامه را در حین توسعه اعمال می کند.
اگر مؤلفه های Vue در حالت لایو بودن سرور مجازی توسعه محلی ایجاد شوند، ریستارت سرور مجازی توسعه لازم خواهد بود.

اکنون که ما یک سرور مجازی dev در حال اجرا داریم، هدف استقرار سایت خواهد بود. برای تمیز کردن مسائل ، فایل package.json را ویرایش کنید تا شامل دستورات توسعه و همچنین دستورات ساخت باشد. فایل package.json را ویرایش کنید:
{
“name”: “vuepress”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″,
“docs:dev”: “vuepress dev docs”,
“docs:build”: “vuepress build docs”
},
“keywords”: [],
“author”: “”,
“license”: “MIT”,
“devDependencies”: {
“vuepress”: “^0.5.0”
}
}

برای ساختن فایل های استاتیک ، اکنون می توانیم این دستور را اجرا کنیم:
npm run docs:build

ممکن است ساخت آن مدت زمانی طول بکشد و پس از آن می توانید فایل های استاتیک ساخته شده را در .vuepress / dist پیدا کنید
تغییر استایل
VuePress از فایل های استاتیک و همچنین دارایی های webpack پشتیبانی می کند و توجه میکند که از صحت URL اختصاص داده شده به یک دارایی در نشانه گذاری قبل از ساخت اطمینان حاصل شود. برای مورد ما ، فقط باید رنگ پایه را کمی تغییر دهیم. ما با استفاده از سبک ها رنگ های پیش فرض را باطل می کنیم.
یک فایل جدید به نام override.styl را در Docs / .vuepress ایجاد کنید. در حالی که از اسامی متغیر اختصاص داده شده به رنگ مطابق مستندات رسمی استفاده می کنیم ، اسکریپت override.styl را ویرایش می کنیم تا accentColor را با موارد زیر تغییر دهیم:
$accentColor = #cfa809
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34

سرور مجازی توسعه را با دستور زیر مجدد راه اندازی کنید:
npm run docs:dev

توجه داشته باشید که تغییرات ایجاد شده در فایل استایل بلافاصله در مرورگر منعکس می شود.
اکنون سیستم مستندات را با صفحات جداگانه تکمیل کرده ایم.
به کار بردن Netlify
در مرحله بعدی با استفاده از Netlify سایت استاتیک را مستقر می کنید. Netlify با بکارگیری Github یا هر ارائه دهنده کنترل نسخه میزبانی و پشتیبانی شده ، گزینه ادغام مداوم را فراهم می کند. برای استقرار سایت خود در Netlify این مراحل را دنبال کنید:
گام 1
در Github و Netlify یک حساب کاربری ایجاد کنید. کد خود را با استفاده از Git به Github وارد کنید.
گام 2
وارد حساب Netlify خود شوید و گزینه ” New site from Git ” را انتخاب کنید. Github را به عنوان ارائه دهنده توسعه مداوم انتخاب کنید و منبع حاوی مستندات را انتخاب کنید.
گام 3
شعبه را تعیین کنید تا به عنوان master مستقر شوید یا هر شعبه ای را که می خواهید مستقر کنید انتخاب کنید. دستور build را روی npm run docs:build تنظیم کنید: دایرکتوری انتشار را روی docs/.vuepress/distقرار دهید. روی ” Deploy Site” کلیک کنید. وب سایت شما باید در زمان کمی مستقر شود و یک URL عمومی برای دسترسی به آن فراهم گردد.
در اینجا نسخه مستقر شده از این آموزش در Netlify وجود دارد.
نتیجه
سایت های استاتیک به دلیل سرعت ، امنیت و قابلیت نگهداری مفید هستند. در این آموزش ما با استفاده از VuePress یک وب سایت مستندات استاتیک ایجاد کردیم که یک برنامه تک صفحه ای نیز میباشد. VuePress انعطاف پذیری نوشتن اسکریپت های Vue را در داخل فایل های Markdown ارائه می دهد که پویایی را به سایت های استاتیک ارائه می کند. به راحتی پروژه را اصلاح کنید تا چندین پوشه و فایل های markdown مربوطه را دربر بگیرید.

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور – احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel – ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan – استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue – ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو – ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express – ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18 – تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8 – استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18 – نصب Linux، Nginx، MariaDB،PHP در Debian 10

کلمات کلیدی خرید سرور

برچسب‌ها:counter, Frontmatter, Google Analytics, guide, markdown, VuePress

۰ نظر

behnam gol mohamadi

برنامه نویسی کاربردی در جاوا اسکریپت از خوانایی کد ، قابلیت حفظ و قابلیت آزمایش کد بهره می برد.
یکی از ابزارهای برنامه نویسی کاربردی ، برنامه نویسی به سبک پردازش آرایه است. این امر مستلزم گرفتن آرایه به عنوان ساختار داده بنیادی میباشد. سپس برنامه شما به یک سری عملیات روی عناصر موجود در آرایه تبدیل می شود.
حوزه های بسیاری وجود دارد که این ویژگی در آن ها مفید است ، مانند نقشه برداری نتایج AJAX برای مؤلفه های React با map ، حذف داده های غیرعادی با filter و استفاده از reduce. این عملکردها ، “Array Extras” نامیده می شوند و انتزاعی حول حلقه ها for هستند. چیزی نیست که با این توابع بتوانید انجام دهید و با for نتوانید به دست بیاورید و برعکس.
در این آموزش ، با نگاهی به filter ، map و reduce ، درک عمیق تری از برنامه نویسی کاربردی در جاوااسکریپت ایجاد خواهیم کرد.
تکرار با for
ما از حلقه های for برای تکرار روی هر مورد در آرایه استفاده می کنیم. معمولاً در طول راه کاری روی هر آیتم انجام می دهیم.
یک مثال می تواند بزرگ کردن حرف اول هر رشته در یک آرایه باشد.
const strings = [‘arielle’, ‘are’, ‘you’, ‘there’];
const capitalizedStrings = [];

for (let i = 0; i < strings.length; i += 1) {
const string = strings[i];
capitalizedStrings.push(string.toUpperCase());
}

console.log(capitalizedStrings);

در این قطعه ، با آرایه ای از حروف کوچک شروع می کنیم. سپس ، به یک آرایه خالی را مقدار اولیه می دهیم ، که رشته های بزرگ خود را ذخیره می کنیم.
در داخل حلقه for ، رشته بعدی را در هر تکرار می گیریم. حروف آن را بزرگ میکنیم و آن را به capitalizedStrings میفرستیم. در انتهای حلقه ، CapitalizedStrings شامل هر کلمه ای در رشته ها است ، اما می دانید ، که با حروف بزرگ است است.
این ما را به اولین تابع خود می رساند: forEach. روشی است که در آرایه ها “به طور خودکار” حول لیست ما حلقه می شود. به عبارت دیگر ، جزئیات مقدار اولیه و افزایش شمارنده برای ما را کنترل می کند.
به جای موارد فوق ، که به صورت دستی رشته ها را فهرست می کنیم ، می توانیم forEach را فراخوانی کنیم و رشته بعدی را در هر تکرار دریافت کنیم. نسخه به روز شده چیزی شبیه به این خواهد بود:
const strings = [‘arielle’, ‘are’, ‘you’, ‘there’];
const capitalizedStrings = [];

strings.forEach(function (string) {
capitalizedStrings.push(string.toUpperCase());
})

این تقریباً همان چیزی است که ما با آن شروع کردیم. اما خلاص شدن از این i کد ما را قابل خواندن تر می کند.
همچنین الگوی اصلی را ارائه می دهد که دوباره زمان و زمان را خواهیم دید. یعنی: ما ترجیح می دهیم از روشهایی در Array.prototype استفاده کنیم که جزییاتی مانند مقداردهی اولیه و افزایش شمارنده را حذف می کند. به این ترتیب ، ما می توانیم به جای متن استاندارد (boilerplate) ، روی منطق مهم تمرکز کنیم.
درک رمز سزار و حملات Brute Force
در کد های زیر ، ما در مثال های map ، reduce و filter T رشته های رمزگذاری و رمزگشایی را استفاده خواهیم کرد.
مثلا:
// Thanks to EvanHahn for this: https://gist.github.com/EvanHahn/2587465
const caesar = require(‘./caesar’);

// We can encrypt the string: ‘this is my secret message’ with `caesar`
// Here, we scramble the message by shifting each letter forward by 2 letters: ‘a’ becomes ‘c’; ‘s’ becomes ‘u’; etc.
const encryptedString = caesar(‘this is my super secret message.’, 2);
console.log(encryptedString); // ‘vjku ku oa uwrgt ugetgv uvtkpi.’

مفهوم این است که ، اگر من یک پیام عادی مانند ‘this is my super secret message’ به شما ارسال کنم ، و شخص دیگری به آن دست یابد ، می توانند بلافاصله راز را بخوانند. بدیهی است اگر اطلاعات حساسی مانند گذرواژه را ارسال کنید ، که ممکن است کسی در حال مشاهده ان باشد، میتواند مشکل آفرین باشد.
رمزگذاری (Encrypting) یک رشته به معنای: “پیچیده کردن خواندن است به طوری که بدون رمزگشایی خواندن آن ممکن نباشد.” به این ترتیب ، حتی اگر کسی در حال شنود باشد ، و حتی اگر پیام شما را رهگیری کند ، تا زمانی که آن را unscramble کنند، خوانده نشده باقی خواهد ماند. برای توضیح مثال بالا ، رشته “vjku ku oa uwrgt ugetgv uvtkpi” را ببینید که مفهوم آن تقریبا مشخص نیست.
رمزگذاری سزار یکی از راه های رمزگشایی رشته ای به این شکل است. برای رمزگذاری با رمز سزار ، یک کلید ، n ، بین 1 تا 24 انتخاب می کنیم و هر حرف در رشته اصلی را با یکی از حروف n تا انتهای الفبا جایگزین می کنیم.
بنابراین ، اگر کلید 2 را انتخاب کنیم ، a می شود c؛ b می شود d؛ c می شود e؛ و به همین ترتیب.
تعویض حروف مثل این رشته اصلی را تقریبا غیر قابل خواندن میکند. اما ، ما با تغییر حروف رمزگشایی کردیم. بنابراین ، تنها کاری که باید برای رمزگشایی انجام دهید این است که آنها را به عقب برگردانید. اگر پیامی را دریافت کردید که می دانید با کلید 2 رمزگذاری شده بود، تنها کاری که باید برای رمزگشایی انجام دهید این است که حروف را دو فاصله برگردانید. بنابراین ، c می شود a؛ d می شود b؛ و غیره.
متأسفانه ، امروزه این یک شکل رمزنگاری قوی نیست ، زیرا شکستن آن بسیار آسان است. یک روش برای رمزگشایی هر رشته رمزگذاری شده با رمز سزار این است که فقط سعی کنید آن را با هر کلید ممکن رمزگشایی کنید. بالاخره یکی از نتایج صحیح خواهد بود. تمام کاری که باید انجام دهید این است که آرایه 24 خروجی را اسکن کنید تا خروجی که انگلیسی است را پیدا کنید. بقیه به اندازه رشته اصلی غیرقابل خواندن خواهند بود.
در زیر ، من از تابعی به نام tryAll استفاده می کنم ، که دقیقاً همین کار را انجام می دهد. یعنی: یک رشته رمزگذاری شده را میگیرد و آرایه ای از هر رمزگشایی احتمالی را برمی گرداند. یکی از این نتایج رشته ای است که ما می خواهیم. بنابراین ، این همیشه رمز را می شکند.
اسکن آرایه ای از 24 رمزگشایی احتمالی چالش برانگیز است. باید بتوانیم مواردی را که قطعاً نادرست هستند از بین ببریم.
در بخش filter ، تابعی را با نام isEnglish مشاهده خواهید کرد که فقط این کار را انجام می دهد. به طور خاص ، یک رشته را می خواند. حساب می کند که چه تعداد از 1000 کلمه رایج انگلیسی در آن رشته وجود دارند. و در صورت یافتن بیش از 3 کلمه در جمله ، رشته را در دسته انگلیسی طبقه بندی می کند. اگر رشته شامل کمتر از 3 کلمه از آن آرایه باشد ، آن را بیرون می اندازد.
البته که روش های پیچیده تری برای بررسی اینکه یک رشته انگلیسی است ، وجود دارد ، اما فعلا این روش کافی است.
پیاده سازی های tryAll و isEnglish مهم نیستند ، اما اگر کنجکاو هستید ، می توانید آنها را در این لینک پیدا کنید: tryAll / isEnglish
تبدیل آرایه ها با map
بازسازی حلقه for برای استفاده از forEach مزایای این سبک را نشان میدهد. اما هنوز جایی برای بهبود نسخه به روز شده وجود دارد.
در مثال بالا ، ما در حال روزرسانی capitalizedStrings در پاسخ به forEach هستیم. هیچ چیز ذاتا غلطی در این کار نیست. اما ، اجتناب از عوارض جانبی مانند آن در هر زمان ممکن دردسر زیادی دارد.
اگر مجبور نیستیم ساختارهای داده را که در دامنه دیگری قرار دارند ، بروزرسانی کنیم … احتمالاً بهتر است انجام ندهیم.
در این مورد خاص ، می خواستیم هر رشته موجود در strings را به نسخه حروف بزرگ آن تبدیل کنیم. این یک مورد کاربرد بسیار متداول برای حلقه for است: همه چیز را در یک آرایه قرار میدهد. آن را به چیز دیگری تبدیل میکند؛ و نتایج را در یک مجموعه جدید جمع آوری میکند.
تبدیل هر عنصر در یک آرایه به عنصر جدید و جمع آوری نتایج ، نقشه برداری (mapping) نامیده می شود. جاوا اسکریپت یک عملکرد داخلی برای این مورد استفاده دارد که map نامیده میشود.
ما forEach استفاده کردیم زیرا نیاز به مدیریت متغیر تکرار i را حذف می کند. لازم نیست که به صورت دستی در آرایه لیست بندی کنیم و بنابراین می توانیم روی منطقی که واقعاً مهم است متمرکز شویم.
به همین ترتیب ، ما از map استفاده می کنیم زیرا مقدار دهی اولیه یک آرایه خالی را کنار میگذارد و به سمت آن میرود. دقیقاً مثل forEach که هر مکالمه برگشتی که کاری را برای هر مقدار رشته انجام می دهد ، میپذیرد، map نیز یک callback را قبول میکند که با هر مقدار رشته کاری انجام می دهد.
بیایید قبل از توضیح نهایی به یک نسخه نمایشی سریع بپردازیم. در این مثال ، من از تابعی برای ” رمزگذاری “مجموعه ای از پیام ها استفاده می کنم. می توانیم از حلقه for استفاده کنیم و می توانیم از forEach استفاده کنیم … اما با map بهتر است.
const caesar = require(‘../caesar’);

const key = 12;
const messages = [
‘arielle, are you there?’,
‘the ghost has killed the shell’,
‘the liziorati attack at dawn’
]

const encryptedMessages = messages.map(function (string) {
return caesar(string, key);
})

console.log(encryptedMessages);

توجه داشته باشید که در اینجا چه اتفاقی افتاده است.
• ما با یک آرایه messages به زبان انگلیسی ساده شروع می کنیم.
• از روش map روی messages برای رمزگذاری هر رشته با تابع سزار استفاده می کنیم و به طور خودکار نتیجه را در یک آرایه جدید ذخیره می کنیم.
پس از اجرای کد فوق ، encryptMessages به شکل زیر خواهد بود
[‘mduqxxq, mdq kag ftqdq?’, ‘ftq staef tme wuxxqp ftq etqxx’, ‘ftq xuluadmfu mffmow mf pmiz’].
این حالت سطح بسیار بالاتری از انتزاع را نسبت به حالت ورود دستی به آرایه فراهم میکند.
اکنون زمان خوبی برای اشاره به این نکته است که می توانیم از توابع آرایه ای برای بیان دقیق تر استفاده کنیم:
const caesar = require(‘../caesar’);

const key = 12;
const messages = [
‘arielle, are you there?’,
‘the ghost has killed the shell’,
‘the liziorati attack at dawn’
];

const encryptedMessages = messages.map(string => string.toUpperCase()):

console.log(encryptedMessages);

کنار گذاشتن موارد با filter
الگوی رایج دیگر استفاده از حلقه for برای پردازش موارد در یک آرایه است ، اما فقط برخی از آنها را خارج کنید/نگه دارید.
ما معمولاً با انجام بررسی if تصمیم می گیریم که چه مواردی را نگه داشته و کدام موارد را دور بیندازیم.
در JS خام ، ممکن است اینگونه باشد:
// Secret message! This was a string encrypted with a key between 1 and 24.
const encryptedMessage = ‘mduqxxq, mdq kag ftqdq?’];

// We can break this code by just decrypting with _every_ possible key.
const possibilities = tryAll(encryptedMessage);

// Most of these decryption attempts aren’t readable. Sad.
// We can speed up finding the ones that are probably junk with an if check
const likelyPossibilities = [];
possibilities.forEach(function (decryptionAttempt) {
// Keep the string if it looks like an English sentence
if (isEnglish(decryptionAttempt)) {
likelyPossibilities.push(decryptionAttempt);
}
})

ابتدا ، سعی می کنیم پیام رمزگذاری شده را با هر کلید ممکن رمزگشایی کنیم. این بدان معناست که با آرایه ای از 24 احتمال رو به رو هستیم.
در این حلقه ، هرکدام را آزمایش می کنیم تا ببینیم که آیا یک رشته انگلیسی است یا خیر. اگر چنین است ، آن را نگه میداریم. اگر نه ، آن را دور می اندازیم.
این به وضوح یک مورد کاربرد رایج است. بنابراین ، یک ساختار داخلی برای آن وجود دارد که filter نامیده میشود.
مانند map ، ما یک filter وارد می کنیم ، که آن هم هر رشته را دریافت می کند. تفاوت در این است که ، filter تنها در صورتی که callback حالت true را بازگرداند، موارد را در یک آرایه ذخیره می کند. بنابراین ، ما می توانیم موارد فوق را به صورت زیر بیان کنیم:
// Secret message! This was a string encrypted with a key between 1 and 24.
const encryptedMessage = ‘mduqxxq, mdq kag ftqdq?’];

// We can break this code by just decrypting with _every_ possible key.
const possibilities = tryAll(encryptedMessage);

// Most of these decryption attempts aren’t readable. Sad.
// We can speed up finding the ones that are probably junk with an if check
const likelyPossibilities = possibilities.filter(function (string) {
// If isEnglish(string) returns true, filter saves in the output array
return isEnglish(string);
})

از آنجا که این callback ، فقط isEnglish را فرامیخواند ، در واقع می توانیم آن را حتی به صورت دقیق تر بنویسیم ، مثل این:
// Secret message! This was a string encrypted with a key between 1 and 24.
const encryptedMessage = ‘mduqxxq, mdq kag ftqdq?’];

// We can break this code by just decrypting with _every_ possible key.
const possibilities = tryAll(encryptedMessage);

// Most of these decryption attempts aren’t readable. Sad.
// We can speed up finding the ones that are probably junk with an if check
const likelyPossibilities = possibilities.filter(isEnglish);

موارد را با reduce در کنار هم قرار دهید
تاکنون ، برای سه مورد استفاده معمولی حول آرایه ها ، انتزاعاتی را مشاهده کردیم:
forEach ، که به ما امکان می دهد مانند for ، حول یک آرایه بگردیم اما نیاز به مدیریت دستی متغیر تکرار i را حذف می کند. آرایه را فهرست میکند؛ و غیره.
map ، که به ما امکان می دهد هر عنصر یک آرایه را تغییر دهیم و نتایج را در یک آرایه جمع آوری کنیم
filter ، که به ما امکان می دهد عناصر یک آرایه را برای نگهداری انتخاب کنیم
مورد دیگر استفاده رایج این است که: تکرار حول یک آرایه برای جمع آوری عناصر آن در یک نتیجه واحد
نمونه اصلی این است که تعداد زیادی عدد را جمع می کند.
// prices of: (big) box of oreos, girl scout cookies, fidget spinner, gold-plated Arch linux magnet
const prices = [12, 19, 7, 209];

// variable to store our total prices in
let totalPrice = 0;
for (let i = 0; i < prices.length; i += 1) {
totalPrice += prices[i];
}

// Report our total prices: $247
console.log(`Your total is ${totalPrice}.`);

همانطور که مطمئنا حدس زده اید ، انتزاعی نیز برای این مورد وجود دارد: reduce .
بازسازی حلقه فوق با reduce اینگونه خواهد بود:
const prices = [12, 19, 7, 209];

prices.reduce(function (totalPrice, nextPrice) {
// totalPrice is the price so far
console.log(`Total price so far: ${totalPrice}`)
console.log(`Next price to add: ${nextPrice}`)

// update totalPrice by adding the next price
totalPrice += nextPrice

// return the total price, and start over again
return totalPrice
}, 0)
// ^ the second argument to `reduce` is the totalPrice to start with on the first iteration

مانند map و filter ، reduce نیز یک callback را میپذیرد ، که در هر عنصر آرایه اجرا می شود.
برخلاف map و filter ، پاسخی که برای reduce ارسال می کنیم دو آرگومان را می پذیرد: یک TotalPrice و یک NextPrice.
TotalPrice مانند total در مثال اول است: قیمتی است که ما با اضافه کردن تمام قیمتهایی که تاکنون دیده ایم ، به دست می آوریم.
nextPrice عددی است که با انجام prices[i] در مثال اول به دست آوردیم. آن map را بخاطر بیاورید و reduce بطور خودکار در آرایه برای ما فهرست بندی میکند و این مقدار را به صورت خودکار به تماس های برگشتی آنها منتقل میکند. reduce همان کار را انجام می دهد ، اما آن مقدار را به عنوان آرگومان دوم به callback آن منتقل می کند.
درست مانند map و reduce ، در هر تکرار ، ما باید مقدار مورد نظر خود را برای بازگشت در انتهای حلقه برگردانیم. یعنی ، TotalPrice.
در آخر ، توجه داشته باشید که آرگومان دیگری را بعد از callback به reduce وارد میکنیم. در این حالت ، 0 را وارد میکنیم. این عمل مشابه با خطی در مثال اول است، که const total = 0 قرار دادیم. این آرگومان دوم مقدار اولیه totalPrice است.
درک reduce سخت تر از map یا filter است ، بنابراین بیایید به مثال دیگری توجه کنیم.
در مثال قبلی ، ما برای جمع آوری آرایه ای از اعداد به صورت مجموع از reduce استفاده کردیم. اما reduce چند کاره است. ما می توانیم از آن استفاده کنیم تا یک آرایه را به یک نتیجه واحد تبدیل کنیم.
مثلا، می توانیم از آن برای ساختن یک رشته استفاده کنیم.
const courses = [‘Introduction to Programming’, ‘Algorithms & Data Structures’, ‘Discrete Math’];

const curriculum = courses.reduce(function (courseList, course) {
// add the name to the class, with a preceding newline and tab for indentation
return courseList += `\n\t${course}`;
}, ‘The Computer Science curriculum consists of:’);

console.log(curriculum);

این کد خروجی زیر را ایجاد می کند:
The Computer Science curriculum consists of:
Introduction to Programming
Algorithms & Data Structures
Discrete Math

بنا به دلایلی ، بیان تعداد بسیار زیادی مثال از استفاده از reduce برای ساختن رشته هایی مانند این را لازم نمی بینم ، اما این یک شیوه کاربردی معمول است.
باز هم ، reduce چند کاره است: می توانیم از آن استفاده کنیم تا یک آرایه را به هر نوع نتیجه “تک” تبدیل کنیم.
حتی اگر آن نتیجه واحد آرایه دیگری باشد.
آن را بررسی کنید:
const names = [‘arielle’, ‘jung’, ‘scheherazade’];

const titleCase = function (name) {
// uppercase first letter of name
const first = name[0];
const capitalizedFirst = first.toUpperCase();

// get rest of name
const rest = name.slice(1);

// create list with all letters of the name, including capitalized first letter
const letters = [capitalizedFirst].concat(rest);

// join letters, return result
return letters.join(”);
}

const titleCased = names.reduce(function (titleCasedNames, name) {
// title-case the next name
const titleCasedName = titleCase(name);

// add the title-cased name to a list
titleCasedNames.push(titleCasedName);

// return list of capitalizedNames
return titleCasedNames
}, [])
// ^ start with an empty list

console.log(titleCased);
// [“Arielle”, “Jung”, “Scheherazade”]

ما از reduce برای تبدیل لیستی از اسامی با حروف کوچک به لیستی از اسامی دارای عنوان استفاده کردیم.
پیش از این ، یک لیست از اعداد را به یک مجموع واحد و یک لیست از رشته ها را به یک رشته واحد تبدیل کرده بودیم. در اینجا ، یک لیست از نام ها را به یک لیست واحد از نام ها با حرف اول بزرگ تبدیل کردیم.
این کار همچنان مجاز است ، زیرا لیست واحد نام های title-cased هنوز یک نتیجه واحد است. فقط به یک مجموعه تبدیل شده نه یک نوع ابتدایی.
ممکن است در مورد آن مثال آخر چیزی را متوجه شده باشید: ما از reduce برای همان کارهایی استفاده کرده ایم که قبلا برای map استفاده کرده بودیم.
با این وجود ممکن است آشکار نباشد ، اما یک مسئله بزرگ است.
ممکن است حدس بزنید که می توانیم map را بر حسب reduce بنویسیم. حق با شماست.
const map = (list, mapFunction) => {
const output = list.reduce((transformedList, nextElement) => {
// use the mapFunction to transform the nextElement in the list
const transformedElement = mapFunction(nextElement);

// add transformedElement to our list of transformed elements
transformedList.push(transformedElement);

// return list of transformed elements
return transformedList;
}, [])
// ^ start with an empty list

return output;
}

می توانیم همان نتیجه فوق را با این کد به دست آوریم:
سلب مسئولیت (disclaimer) اجباری: اگر تا الان در حال اجرای map آماده تولید بودید، باید برخی از ویژگی ها را به این اجرا اضافه کنید. ما همه اینها را به خاطر عدم ابهام به خود شما واگذار خواهیم کرد.
اگر می توانیم برای اجرای map از reduce استفاده کنیم ، برای filter چگونه است؟
const filter = (list, predicate) => {
const output = list.reduce(function (filteredElements, nextElement) {
// only add `nextElement` if it passes our test
if (predicate(nextElement)) {
filteredElements.push(nextElement);
}

// return the list of filtered elements on each iteration
return filteredElements;
}, [])
})
}

اگر این مورد گیج کننده است، اشکالی ندارد. حتی برای توسعه دهندگان با تجربه تر هم یک ایده جدید است. اما ، ارزش این را دارد که با آن آشنا شوید: ما به این میزان بینش کم نیاز داریم تا بعداً transduction را درست درک کنیم.
… و ، به من اعتماد کنید ، transduction به تنهایی آنقدر جالب است که ارزش کار را دارد.
نتیجه
در این آموزش ، نحوه استفاده از map ، filter و reduce را برای نوشتن کد قابل خواندن یاد گرفتید.
البته که مشکلی در استفاده از for وجود ندارد. اما بالا بردن سطح انتزاع با این توابع ، نتایج فوری از لحاظ خوانایی و قابلیت حفظ آن را به ارمغان می آورد.
از اینجا ، می توانید روش های دیگر آرایه مانند flatten ،concat و flatMap را جستجو کنید.

از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :

استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18

تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو

تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL

یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL

به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام

نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js

نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت

یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular

اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت

ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form

نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade

استفاده از ویژوال استودیو از راه دور – احراز هویت API با JSON Web Tokens و Passport

راه اندازی یک پروژه React با Parcel – ایجاد Swiper مانند Netflix را در Vue

ساختن یک ربات تلگرام با Laravel و BotMan – استفاده از map، filter، و reduce در جاوااسکریپت

چگونه می توان موتور جستجوی زمان واقعی را با Vue – ساختن سیستم مستندات (Documentation) با Vue و VuePress

استفاده از اشتراک زنده با کد ویژوال استودیو – ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React

شروع عملی GraphQL با Node.js و Express – ساخت یک برنامه آب و هوا در Django

نحوه نصب Discourse روی Ubuntu 18 – تأیید رمز عبور با استفاده از درخواست فرم Laravel

نحوه نصب MySQL در CentOS 8 – استفاده از پسوند PDO PHP برای انجام تراکنش MySQL

نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18 – نصب Linux، Nginx، MariaDB،PHP در Debian 10

کلمات کلیدی خرید سرور

برچسب‌ها:Ajax, Array Extras, capitalizedStrings

۰ نظر

behnam gol mohamadi