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

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

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

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

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

2. [مقدمه‌ای بر زبان ECMAScript 6 از طریق مثال‌ها (۲۰۱۹)]؛
3. [مقدمه‌ای بر فریم‌ورک Vue.js از طریق مثال‌ها (۲۰۱۹)]؛
4. [مقدمه‌ای بر فریم‌ورک NUXT.JS از طریق مثال‌ها (۲۰۱۹). این سند فعلی است؛

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

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

این سند کار انجام‌شده در سند [3] را با استفاده از چارچوب VUE.JS ادامه می‌دهد.

این بخش بر معماری زیر تمرکز دارد:

• در [1]، یک مرورگر وب صفحات وب [5, 7] را که از یک سرور [3] بازیابی شده‌اند و برای کاربر در نظر گرفته شده‌اند، نمایش می‌دهد. این صفحات حاوی جاوااسکریپتی هستند که یک کلاینت برای سرویس وب داده [2] و همچنین یک کلاینت برای سرور قطعه صفحه وب [3] را پیاده‌سازی می‌کند؛
• در [2]، سرور وب یک سرور داده است. می‌تواند به هر زبانی نوشته شود. صفحات وب را به معنای سنتی (HTML، CSS، JavaScript) تولید نمی‌کند، مگر شاید در اولین بار. با این حال، این صفحهٔ اول را می‌توان از یک سرور وب متعارف ([3] – نه یک سرور داده) دریافت کرد. سپس جاوااسکریپت موجود در صفحه اولیه، با بازیابی داده‌های [4] برای نمایش از وب‌سرور، که به‌عنوان سرور داده [2] عمل می‌کند، صفحات وب مختلف برنامه را تولید خواهد کرد. همچنین می‌تواند قطعات صفحات وب [5] را برای ارائه این داده‌ها از سرور صفحه وب [3] بازیابی کند؛
• در [4]، کاربر عملی را آغاز می‌کند؛
• در [6,7]: آنها داده‌ای را که در یک قطعه صفحه وب پیچیده شده است دریافت می‌کنند؛

چارچوب [nuxt.js] |https://fr.nuxtjs.org/| به ما امکان می‌دهد گردش کار زیر را پیاده‌سازی کنیم:

• صفحه اول برنامه توسط سرور [node.js] [3] ارائه می‌شود. علاوه بر این، صفحات دیگر برنامه نیز روی همین سرور میزبانی می‌شوند. این صفحات زمانی ارائه می‌شوند که کاربر آدرس URL خود را به صورت دستی در مرورگر وارد می‌کند. این صفحات یک برنامه [vue.js] را (تقریباً) فراخوانی می‌کنند؛
• پس از بارگذاری صفحه اول در مرورگر، برنامه مانند یک برنامه استاندارد [vue.js] رفتار می‌کند. در نمودار بالا، سپس با سرور داده [2] ارتباط برقرار می‌کند؛

در نهایت، این برنامه مانند یک برنامه [vue.js] رفتار می‌کند، به جز در صفحه اول و زمانی که کاربر URL را به صورت دستی تایپ می‌کند. در این موارد، صفحه از سرور [3] بازیابی می‌شود. وقتی یک موتور جستجو صفحات مختلف برنامه را درخواست می‌کند، صفحات را از سرور [3] دریافت می‌کند. این صفحات ممکن است برای SEO (بهینه‌سازی موتور جستجو) بهینه‌سازی شده باشند. در یک برنامه [vue.js]، موتور جستجو صفحه‌ای با ارتباط اندک دریافت می‌کند: SEO. برای مثال، در برنامهٔ کلاینت سرور محاسبهٔ مالیات برای سند [3]، صفحه‌ای که هنگام راه‌اندازی برنامه توسط مرورگر دریافت شد به شرح زیر بود:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/client-vuejs-impot/favicon.ico">
    <title>vuejs</title>
  <link href="/client-vuejs-impot/app.js" rel="preload" as="script"></head>
  <body>
    <noscript>
      <strong>We're sorry but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!--فایل‌های ساخت‌یافته به‌طور خودکار تزریق خواهند شد -->
  <script type="text/javascript" src="/client-vuejs-impot/app.js"></script></body>
</html>

این تنها صفحه‌ای است که توسط مرورگر بارگذاری می‌شود. سایر صفحات برنامه به صورت پویا و بدون دخالت مرورگر توسط جاوااسکریپت تولید می‌شوند. برخی از موتورهای جستجو به همین صفحه راضی هستند. برخی دیگر با اجرای جاوااسکریپت موجود در صفحه (خط ۹ بالا) فراتر می‌روند. این امر منجر به تولید صفحه‌ای متفاوت می‌شود. این صفحه ممکن است شامل یک عملیات غیرهمزمان برای فراخوانی داده‌هایی باشد که صفحه نمایش خواهد داد. در این حالت، موتورهای جستجو منتظر نمی‌مانند. در نتیجه، ما با یک صفحه ناقص مواجه می‌شویم. شاید به یاد داشته باشید که این مورد برای مشتری ما [vue.js] در سرور محاسبه مالیات صادق است: در حالی که صفحه اول در حال بارگذاری است، یک جلسه jSON با سرور محاسبه مالیات به صورت غیرهمزمان راه‌اندازی می‌کند. در این مورد خاص، این امر بر صفحه‌ای که توسط موتور جستجو بازیابی می‌شود، تأثیری نمی‌گذارد. با این حال، برای سایر برنامه‌ها، این موضوع می‌تواند از نظر SEO مضر باشد.

با [nuxt.js]، می‌توان برای هر یک از صفحات برنامه، یک صفحه معنادارتر به موتور جستجو ارائه کرد.

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

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

اپلیکیشن سرور PHP را می‌توان |اینجا| آزمایش کرد.

Serge Tahé، دسامبر ۲۰۱۹