1. مقدمة إلى إطار عمل VUE.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]؛

يمكن تحسين أحدث إصدار من خادم حساب الضرائب الذي تم تطويره في الوثيقة [1] (انظر الوثيقة |https://tahe.developpez.com/tutoriels-cours/php7|) بعدة طرق:

الإصدار الحالي يركز على الخادم. الاتجاه السائد حاليًا (سبتمبر 2019) هو نحو بنية العميل/الخادم:

يعمل الخادم كخدمة JSON؛
تُستخدم صفحة ثابتة أو ديناميكية كنقطة دخول لتطبيق الويب. تحتوي هذه الصفحة على HTML/CSS بالإضافة إلى JavaScript؛
يتم إنشاء الصفحات الأخرى لتطبيق الويب ديناميكيًا بواسطة JavaScript:
- يمكن إنشاء صفحة HTML عن طريق تجميع أجزاء ثابتة أو ديناميكية، مقدمة من نفس الخادم الذي قدم صفحة الدخول، أو تم إنشاؤها بواسطة JavaScript من جانب العميل؛
- تعرض هذه الصفحات المختلفة البيانات المطلوبة من خدمة JSON؛

وبالتالي، يتم توزيع العمل بين العميل والخادم. ويمكن للخادم، بعد تخفيف الحمل عليه، خدمة المزيد من المستخدمين.

البنية المطابقة لهذا النموذج هي كما يلي:

JS: جافا سكريبت

المتصفح هو العميل:

خدمة تقدم صفحات أو أجزاء ثابتة أو ديناميكية (غير موضحة أعلاه)؛
خدمة بيانات JSON؛

وبالتالي، فإن كود JavaScript هو عميل JSON، وبهذه الصفة، يمكن تنظيمه في طبقات [UI، منطق الأعمال، DAO] (UI: واجهة المستخدم) تمامًا كما كان الحال مع عملاء JSON المكتوبين بلغة PHP. في النهاية، يقوم المتصفح بتحميل صفحة واحدة فقط، وهي الصفحة الرئيسية. أما جميع الصفحات الأخرى فيتم جلبها وعرضها بواسطة JavaScript. يُطلق على هذا النوع من التطبيقات اسم SPA: تطبيق صفحة واحدة، أو APU: تطبيق بصفحة واحدة.

هذا النوع من التطبيقات هو أيضًا جزء مما يُعرف بتطبيقات AJAX: Asynchronous JavaScript and XML:

غير متزامن: لأن استدعاءات عميل JavaScript لخادم JSON غير متزامنة؛
XML: لأن XML كانت التقنية المستخدمة قبل ظهور JSON. ومع ذلك، تم الاحتفاظ باختصار AJAX؛

سنقوم بدراسة هذه البنية في هذا المستند. على جانب العميل، سنستخدم إطار عمل JavaScript [Vue.js] [https://vuejs.org/] لكتابة عميل JavaScript لخادم PHP JSON الذي وصفناه في المستند [1].

[Vue.js] هو إطار عمل JavaScript. لقد قدمنا لغة JavaScript في الوثيقة [2]. لن نجري دراسة شاملة لإطار عمل [Vue.js]. سنقدم ببساطة المفاهيم التي سيتم استخدامها لاحقًا في كتابة عميل [Vue.js] لإصدار JSON من الإصدار 14 لخادم حساب الضرائب (انظر |https://tahe.developpez.com/tutoriels-cours/php7|).

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

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

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

سيرج تاهي، أكتوبر 2019