1. مقدمه‌ای بر چارچوب VUE.JS

PDF برای این سند در |ICI| موجود است.

مثال‌های این سند در |ICI| موجود است.

این سند بخشی از مجموعه‌ای متشکل از چهار مقاله است:

[مقدمه‌ای بر زبان PHP7 از طریق مثال‌ها (۲۰۱۹)]؛

این‌ها همه اسناد مخصوص مبتدیان هستند. مقالات از یک ترتیب منطقی پیروی می‌کنند اما به‌طور شل‌جوش به هم متصل شده‌اند:

سند [1] زبان PHP 7 را معرفی می‌کند. خوانندگانی که تنها به زبان PHP علاقه‌مند هستند و نه به جاوااسکریپتی که در مقالات بعدی پوشش داده شده است، باید در اینجا متوقف شوند؛
تمام اسناد [2-4] با هدف ساخت یک کلاینت جاوااسکریپت برای سرور محاسبه مالیات توسعه‌یافته در سند [1] هستند؛
فریم‌ورک‌های جاوااسکریپت [vue.js] و [nuxt.js] در مقالات ۳ و ۴ نیازمند دانش جاوااسکریپت از آخرین نسخه‌های ECMASCRIPT، یعنی نسخه‌های ۶ هستند. بنابراین، سند [2] برای کسانی در نظر گرفته شده است که با این نسخه از JavaScript آشنا نیستند. این سند به سرور محاسبه مالیات تعبیه‌شده در سند [1] اشاره دارد. بنابراین خوانندگان [2] ممکن است گهگاه نیاز داشته باشند به سند [1] مراجعه کنند؛
پس از تسلط بر ECMASCRIPT، می‌توانید به چارچوب VUE.JS بروید که به شما امکان می‌دهد کلاینت‌های جاوااسکریپتی بسازید که در حالت SPA (برنامه‌های تک‌صفحه‌ای) در مرورگر اجرا می‌شوند. این سند [3] است. این سند هم به سرور محاسبه مالیات که در سند [1] ساخته شده و هم به کد کلاینت مستقل JavaScript که در [2] ساخته شده است، اشاره می‌کند. بنابراین خوانندگان [3] گاهی اوقات نیاز خواهند داشت به اسناد [1] و [2] مراجعه کنند؛
پس از تسلط بر VUE.JS، می‌توانید به چارچوب NUXT.JS بروید که امکان ایجاد کلاینت‌های جاوا اسکریپت را فراهم می‌کند که در حالت SSR (رندر سمت سرور) در مرورگر اجرا می‌شوند. این اشاره به هر دو سرور محاسبه مالیات توصیف‌شده در سند [1]، کد کلاینت جاوااسکریپت مستقل توسعه یافته در [2]، و برنامه [vue.js] توسعه یافته در سند [3]. بنابراین خوانندگان [4] ممکن است گاهی اوقات نیاز داشته باشند به اسناد [1]، [2] و [3] مراجعه کنند؛

آخرین نسخهٔ سرور محاسبه مالیات که در سند [1] توسعه یافته است (به سند [مقدمه‌ای بر زبان PHP7 از طریق مثال‌ها (۲۰۱۹)] مراجعه کنید) را می‌توان به روش‌های مختلفی بهبود بخشید:

نسخه توصیف‌شده بر روی سرور متمرکز است. روند کنونی (سپتامبر ۲۰۱۹) به سمت معماری کلاینت/سرور است:

سرور به عنوان سرویس jSON اجرا می‌شود؛
یک صفحه، چه ایستا باشد و چه نباشد، به عنوان نقطه ورود به برنامه وب عمل می‌کند. این صفحه حاوی HTML / CSS و همچنین JavaScript است؛
سایر صفحات وب‌اپلیکیشن به صورت پویا توسط JavaScript تولید می‌شوند:
- صفحه HTML می‌تواند با ترکیب قطعات ایستا یا پویا تولید شود، که یا توسط همان سروری که صفحه اصلی را ارائه کرده است، فراهم شده‌اند یا توسط جاوااسکریپت سمت کلاینت ساخته شده‌اند؛
- این صفحات مختلف داده‌های درخواستی از سرویس jSON را نمایش می‌دهند؛

بدین ترتیب، کار بین کلاینت و سرور تقسیم می‌شود. سرور با کاهش بار خود، می‌تواند به کاربران بیشتری خدمت‌رسانی کند.

معماری متناظر با این مدل به شرح زیر است:

JS: JavaScript

مرورگر یک کلاینت است:

یک سرویس ارائه‌دهنده صفحات یا قطعات ایستا یا غیر ایستا (در بالا نشان داده نشده است);
یک سرویس داده jSON؛

بنابراین کد JavaScript مشتری jSON است و به همین ترتیب می‌تواند به صورت لایه‌هایی [UI, métier, dao] سازماندهی شود (UI: رابط کاربری) به همان شیوه‌ای که کلاینت‌های jSON ما در PHP نوشته شده‌اند. در نهایت، مرورگر تنها یک صفحه را بارگذاری می‌کند: صفحه اصلی. سایر صفحات توسط JavaScript بازیابی و رندر می‌شوند. این نوع برنامه به عنوان SPA: برنامه تک‌صفحه‌ای یا APU: برنامه تک‌صفحه‌ای شناخته می‌شود.

این نوع برنامه همچنین در دسته به اصطلاح AJAX: جاوااسکریپت غیرهمزمان و XM:

غیرهم‌زمان: زیرا فراخوانی‌های جاوااسکریپت سمت کلاینت به سرور jSON به صورت غیرهم‌زمان هستند؛
XML: زیرا XML فناوری مورد استفاده پیش از ظهور jSON بود. با این حال، مخفف AJAX حفظ شده است؛

در این سند چنین معماری را بررسی خواهیم کرد. در سمت کلاینت، ما از چارچوب جاوااسکریپت [Vue.js] [https://vuejs.org/] برای نوشتن کلاینت جاوااسکریپت برای سرور jSON PHP که در سند [1].

[Vue.js] یک چارچوب JavaScript است. ما زبان جاوااسکریپت را در سند [2] معرفی کردیم. ما مطالعهٔ جامعی بر چارچوب [vue.js] انجام نخواهیم داد. ما صرفاً مفاهیمی را که بعداً در نوشتن یک کلاینت [Vue.js] برای نسخه jSON از نسخه 14 سرور محاسبه مالیات استفاده خواهند شد، تشریح خواهیم کرد (رجوع کنید به [مقدمه‌ای بر زبان PHP7 از طریق مثال‌ها (۲۰۱۹)]).

اسکریپت‌های این سند دارای توضیحات (کامنت) هستند و خروجی کنسول آن‌ها بازتولید شده است. توضیحات اضافی در صورت لزوم ارائه شده است. این سند نیازمند خواندن فعال است: برای درک یک اسکریپت، باید کد آن، توضیحات آن و نتایج اجرای آن را بخوانید.

Serge Tahé، اکتبر ۲۰۱۹