مرحباً بالجميع ، اسمي Andrey Yakovenko وأنا مطور ويب للتصميم الرقمي.
لشركتنا العديد من المشاريع المنفذة باستخدام
نظام إدارة محتوى الويب الخاص بـ
sitefinity ، أو ببساطة CMS. تم توضيح أسباب استخدامنا لها سابقًا في
هذه المقالة. CMS ، كقاعدة عامة ، تطبيق متعدد الصفحات ، واليوم سأتحدث عن ما يمكن أن يقدمه تطبيق أطر الواجهة في حلول sitefinity وكيفية القيام بذلك.
انحدار غنائي
على الرغم من أن موقع site يحتوي على Angular.js على متن الطائرة ، إلا أن القدرة على دمج الأُطُر الأخرى غائبة بسبب شفرة المصدر المغلقة. ومع ذلك ، هذا لا يمنعنا من استخدام قدرات الأطر الأخرى.
الأمثلة في هذه المقالة ليست حلا سحريا ولأغراض إعلامية بشكل رئيسي.
البحث عن جديد
نظرًا لأن Angular ، على الرغم من أن الإصدار الأول ، موجود بالفعل في sitefinity ، فقد أردنا أن نجعل أصدقاء CMS مع React أو Vue.js.
كل من هذه الأطر جيدة بطريقتها الخاصة ولها طرقها الخاصة لتطوير التطبيقات ، ولكننا لن نقوم بالمقارنة التالية.
بعد إلقاء نظرة سريعة على الحلول الممكنة ، تم العثور على مشروع مثير للاهتمام تم فيه ترجمة الصفحات المجمعة في React إلى html ثابت. لم يناسبنا هذا الحل ، حيث أننا لا نحتاج إلى فقد جميع مسرات SSR (Server Side Render) جنبًا إلى جنب مع استخدام التعليمات البرمجية القابلة للتنفيذ من جانب العميل.
من الكلمات إلى الأفعال
يتيح لك Sitefinity ، مثله مثل معظم CMS ، تكوين صفحة تحتوي على عناصر متعددة لعرض المحتوى (عناصر واجهة المستخدم). على سبيل المثال ، سننظر في خيارات تضمين Vue.js في عناصر واجهة المستخدم الجاهزة.
الطريقة الأولى (بسيطة)
تتكون هذه الطريقة من توصيل Vue.js كمكتبة بقالب الصفحة الرئيسي.
بعد ذلك ، يمكننا تهيئة تطبيقنا في أي عنصر واجهة مستخدم في أي مكان.
مثال على عنصر واجهة مستخدم بسيط:
new Vue({ el: '#widget-id', data: { msg: 'Hello world', }, })
ومع ذلك ، فإن هذا يعني أن كتلة عنصر واجهة المستخدم بالكامل سيتم استخدامها كقالب ، وسيحاول Vue.js تقريبها ، ومن أجل عرض الرسالة في المكان المناسب ، سيكون من الضروري كتابة بنية خاصة سيتم عرضها إذا تسبب شيء ما في توقف كود js قبل التقديم ، أو إذا تم تعطيل جافا سكريبت للمستخدم.
الحل لهذه المشكلة هو كتابة القالب الخاص بك ، والذي سيكرر القطعة. سوف نوسع مكوننا.
مثال:
new Vue({ el: '#widget-id', data: { msg: 'Hello world', }, template: '<div>{{msg}}</div>', })
الآن سيتم استبدال كل شفرة html الخاصة بعنصر واجهة المستخدم بالقالب الموضح في حقل القالب ، ومن أجل نقل البيانات من نموذج القطعة إلى Vue ، ما عليك سوى تحويل النموذج إلى JSON بأي طريقة ملائمة ونقله إلى حقل البيانات.
الطريقة الثانية (صعبة)
بالنسبة لهذه الطريقة ، نحتاج إلى حزمة الويب ، في الحد الأدنى من التكوين الذي سيكون vue-loader. أيضًا ، لا نحتاج إلى استخدام html-extract-plugin ، مثل يمكننا تخزين القوالب في كود js.
الآن يمكننا استخدام مكونات ملف واحد من Vue.
مثال على مكون ملف
فردي (
Sample.vue ):
<template> <div>{{msg}}</div> </template> <script> export default { name: 'Sample', data: function () { return { msg: 'Hello world', } }, } </script>
تحتوي مكونات الملفات الفردية على خيارات تصميم أكثر من المكونات التقليدية ، كما تقلل من عدد الملفات في دليل المشروع.
بعد كتابة مكون عنصر واجهة المستخدم ، نحتاج إلى تهيئته.
مثال تهيئة القطعة:
import Vue from 'vue' import Sample from '../Sample.vue' Vue({ render: function (h) { return h(Sample) } }).$mount('#widget-id')
ولكن في هذه الحالة ، سيتم تنفيذ الكود بنفسه ، إذا كان من الضروري التحكم في تهيئة التطبيق ، على سبيل المثال ، للإشارة إلى المحدد ، هناك حل منطقي يتمثل في التفاف التطبيق بطريقة يمكن استدعاؤها في أي وقت على الصفحة.
دعونا توسيع مثالنا:
import Vue from 'vue' import Sample from '../Sample.vue' function initWidget (selector) { Vue({ render: function (h) { return h(Sample) } }).$mount(selector) } initWidget('#widget-id')
يبقى لنقل بيانات طراز عنصر واجهة المستخدم إلى مكون Vue.js. من السهل القيام بذلك عن طريق كتابتها في JSON قبل تمريرها إلى كائن البيانات الخاص بمثيل Vue ، وبعد ذلك يمكن نقلها إلى المكون كدعائم.
مثال:
import Vue from 'vue' import Sample from '../Sample.vue' function initWidget (selector) { Vue({ data: function () { return { some: 'some value', } }, render: function (h) { return h(Sample, { props: data }) } }).$mount(selector) } initWidget('#widget-id')
مراجعة صغيرة
في الختام ، أود أن أقول إن كل طريقة من الطرق المقترحة لها بيئة تطبيقية خاصة بها. وبالتالي ، فإن الطريقة الأولى مناسبة للتكامل السريع لقسم واحد من التطبيق ، على سبيل المثال ، زر أو نموذج ، والثاني ، بدوره ، أكثر تقدماً ولديه مجموعة أكبر من القدرات لكتابة أجزاء فردية من التطبيق والصفحات القائمة بذاتها.
ومع ذلك ، فإن لكلتا الطريقتين عيبًا كبيرًا - مع هذا الاستخدام للأطر ، يصبح من الضروري القيام بالمهمة نفسها مرتين في أقسام الصفحات التي يعتمد عليها مُحسّنات محرّكات البحث.
من ناحية أخرى ، إذا رغبت في ذلك ، باستخدام هذا النهج ، يمكنك توصيل أي إطار أو مكتبة أو كتابة مدير DOM الخاص بك في vanilla JavaScript أو jQuery.
هذا كل شيء. شكرا لاهتمامكم