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

يتوفر PDF لهذا المستند |HERE|.

أمثلة هذا المستند متاحة |HERE|.

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

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

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

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

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

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

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

في [1]، يعرض متصفح الويب صفحات الويب [5, 7] الواردة من خادم [3] والموجهة إلى مستخدم. تحتوي هذه الصفحات على جافا سكريبت الذي ينفذ عميل خدمة بيانات ويب [2] بالإضافة إلى عميل خادم أجزاء صفحات الويب [3]؛
في [2]، خادم الويب هو خادم بيانات. ويمكن برمجته بأي لغة. وهو لا يُنتج صفحات ويب بالمعنى التقليدي (HTML، CSS، جافا سكريبت) باستثناء المرة الأولى ربما. ولكن يمكن الحصول على هذه الصفحة الأولى من خادم ويب تقليدي [3] (وليس خادم بيانات). ثم يقوم جافا سكريبت للصفحة الأولية بإنشاء صفحات الويب المختلفة للتطبيق من خلال الحصول على البيانات [4] المراد عرضها، من خادم الويب الذي يعمل كخادم بيانات [2]. كما يمكنه الحصول على أجزاء من صفحة الويب [5] لتزيين هذه البيانات من خادم صفحات الويب [3]؛
في [4]، يبادر المستخدم بإجراء؛
في [6,7]: يتلقى بيانات مدمجة بواسطة جزء من صفحة الويب؛

سيسمح لنا إطار العمل [nuxt.js] |https://fr.nuxtjs.org/| بتنفيذ العملية التالية:

يتم تقديم الصفحة الأولى من التطبيق بواسطة الخادم [node.js] [3]. بالإضافة إلى ذلك، توجد الصفحات الأخرى للتطبيق أيضًا على نفس الخادم. يتم تقديمها عندما يكتب المستخدم عنوانها يدويًا في المتصفح. تحتوي هذه الصفحات على تطبيق (تقريبًا)؛
بمجرد تحميل الصفحة الأولى في المتصفح، يتصرف التطبيق كتطبيق [vue.js] تقليدي. في المخطط أعلاه، سيتواصل عندئذٍ مع خادم البيانات [2]؛

في النهاية، يتصرف التطبيق كأنه تطبيق [vue.js] باستثناء الصفحة الأولى وعندما يكتب المستخدم URL يدويًا. في هذه الحالات، يتم البحث عن الصفحة على الخادم [3]. عندما يطلب محرك البحث الصفحات المختلفة للتطبيق، يتلقى الصفحات من الخادم [3]. وقد تم تحسين هذه الصفحات لمحرك البحث (Search Engine Optimization). في تطبيق [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>

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

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

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

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

Serge Tahé، ديسمبر 2019