1. مقدمة إلى إطار عمل NUXT.JS

ملف PDF لهذا المستند متاح |هنا|.

الأمثلة الواردة في هذا المستند متاحة |هنا|.

هذا المستند جزء من سلسلة مكونة من أربعة مقالات:

|مقدمة إلى PHP7 من خلال الأمثلة|؛

|مقدمة إلى ECMASCRIPT 6 من خلال أمثلة| ;
|مقدمة إلى إطار عمل VUE.JS من خلال أمثلة|؛
|مقدمة إلى إطار عمل NUXT.JS من خلال أمثلة|. هذه هي الوثيقة الحالية؛

هذه هي جميع الوثائق المخصصة للمبتدئين. تتبع المقالات تسلسلاً منطقياً ولكنها مرتبطة ببعضها بشكل غير وثيق:

يقدم المستند [1] لغة PHP 7. يجب على القراء المهتمين بـ PHP فقط وليس بـ JavaScript التي تتناولها المقالات التالية التوقف عند هذا الحد؛
تهدف الوثائق [2–4] إلى إنشاء عميل JavaScript لخادم حساب الضرائب الذي تم تطويره في الوثيقة [1]؛
تتطلب أطر عمل JavaScript [vue.js] و [nuxt.js] في المقالتين 3 و 4 معرفة بأحدث إصدارات ECMAScript، وتحديدًا الإصدار 6. ولذلك، فإن الوثيقة [2] مخصصة لأولئك الذين ليسوا على دراية بهذا الإصدار من JavaScript. وهي تشير إلى خادم حساب الضرائب الذي تم بناؤه في الوثيقة [1]. ولذلك، سيحتاج قراء [2] أحيانًا إلى الرجوع إلى الوثيقة [1]؛
بمجرد إتقان ECMASCRIPT 6، يمكننا الانتقال إلى إطار عمل VUE.JS، الذي يسمح بإنشاء عملاء JavaScript يعملون في متصفح في وضع SPA (تطبيق صفحة واحدة). هذا هو المستند [3]. وهو يشير إلى كل من خادم حساب الضرائب الذي تم إنشاؤه في المستند [1] وإلى كود عميل JavaScript المستقل الذي تم إنشاؤه في [2]. لذلك سيحتاج قراء [3] أحيانًا إلى الرجوع إلى الوثيقتين [1] و[2]؛
بمجرد إتقان VUE.JS، يمكنك الانتقال إلى إطار عمل NUXT.JS، الذي يسمح لك بإنشاء عملاء JavaScript يعملون في متصفح في وضع SSR (Server Side Rendered). وهو يشير إلى خادم حساب الضرائب الذي تم إنشاؤه في الوثيقة [1]، ورمز عميل JavaScript المستقل الذي تم إنشاؤه في [2]، وتطبيق [vue.js] الذي تم تطويره في الوثيقة [3]. لذلك سيحتاج قراء [4] أحيانًا إلى الرجوع إلى الوثائق [1] و[2] و[3]؛

يستكمل هذا المستند العمل المنجز في المستند [3] باستخدام إطار عمل Vue.js.

يركز هذا القسم على البنية التالية:

في [1]، يعرض متصفح الويب صفحات الويب [5، 7] من خادم [3] مخصصة لمستخدم ما. تحتوي هذه الصفحات على JavaScript الذي ينفذ عميلاً لخدمة بيانات الويب [2] بالإضافة إلى عميل لخادم أجزاء صفحات الويب [3]؛
في [2]، يعمل خادم الويب كخادم بيانات. ويمكن برمجته بأي لغة برمجة. وهو لا يقوم بإنشاء صفحات الويب بالمعنى التقليدي (HTML، CSS، JavaScript)، باستثناء المرة الأولى ربما. ومع ذلك، يمكن استرداد تلك الصفحة الأولى من خادم ويب تقليدي [3] (وليس خادم بيانات). ثم يقوم JavaScript الموجود في الصفحة الأولية بإنشاء صفحات الويب المختلفة للتطبيق عن طريق استرداد البيانات [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>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/client-vuejs-impot/app.js"></script></body>
</html>

هذه هي الصفحة الوحيدة التي يتم تحميلها بواسطة المتصفح. يتم إنشاء جميع الصفحات الأخرى في التطبيق ديناميكيًا بواسطة JavaScript دون مساعدة المتصفح. بعض محركات البحث تكتفي بهذه الصفحة. بينما تذهب محركات بحث أخرى إلى أبعد من ذلك بتنفيذ JavaScript الموجود في الصفحة (السطر 9 أعلاه). ثم يتم الحصول على صفحة أخرى. قد تحتوي هذه الصفحة على عملية غير متزامنة لجلب البيانات التي ستعرضها الصفحة. في هذه الحالة، لا تنتظر محركات البحث. وبذلك نبقى مع صفحة غير مكتملة. قد تتذكر أن هذا هو الحال مع عميل [Vue.js] الخاص بنا على خادم حساب الضرائب: بشكل غير متزامن، أثناء تحميل الصفحة الأولى، يقوم بتهيئة جلسة JSON مع خادم حساب الضرائب. في هذه الحالة المحددة، لا يؤثر هذا على الصفحة التي يستردها محرك البحث. بالنسبة للتطبيقات الأخرى، قد يكون هذا ضارًا من حيث تحسين محركات البحث (SEO).

باستخدام [nuxt.js]، يمكننا تقديم صفحة أكثر فائدة لمحرك البحث لكل صفحة من صفحات التطبيق.

النصوص البرمجية في هذا المستند مزودة بتعليقات، ويتم عرض مخرجاتها على وحدة التحكم. يتم تقديم تفسيرات إضافية في بعض الأحيان. يتطلب المستند قراءة نشطة: لفهم النص البرمجي، يجب عليك قراءة الكود والتعليقات ونتائج التنفيذ.

الأمثلة الواردة في هذا المستند متاحة |هنا|.

يمكن اختبار تطبيق خادم PHP 7 |هنا|.

سيرج تاهي، ديسمبر 2019