أنا مطور أمامي مبتدئ. أنا الآن أدرس وتدرب في شركة تكنولوجيا معلومات مينسك. يتم تعلم أساسيات واجهة مستخدم الويب باستخدام مكتبة Webix JS كمثال. أريد مشاركة تجربتي المتواضعة وحفظها كبرنامج تعليمي صغير في مكتبة واجهة المستخدم المثيرة للاهتمام هذه.المشكلة السادسة
Webix عبارة عن مكتبة JavaScript تحدث فيها العمليات بشكل أساسي من جانب العميل ، وعندها فقط يتم إرسال النتيجة إلى الخادم إذا كانت هناك حاجة إلى حفظ البيانات. لا توجد متطلبات صارمة للواجهة الخلفية هنا. لا يهم البيانات التي تتم معالجتها على الخادم ، والشيء الرئيسي هو أنه يتلقى طلبات بتنسيق معين ويعطي الإجابة بالشكل الصحيح. كل ما هو مطلوب من المطور هو توصيل الخادم والعمل مع الطلبات البسيطة ، بالنظر إلى حقيقة أن المشروع ليس لديه إعدادات مستخدم معقدة.خذ بعين الاعتبار المهام التالية:- ربط جانب الخادم من التطبيق ؛
- طرق طلب الخادم ؛
- كيفية تتبع نتيجة التنزيل ؛
- كيفية تتبع نتيجة الادخار.
تستخدم المقالة عنصر واجهة تعامل الجدول ، الذي تم وصفه بالتفصيل في الوثائق.توجد مصادر للعمل مع المقالة هنا .يمكن العثور على التطبيق النهائي هنا .ربط جانب الخادم من التطبيق
هنا مثال يعتمد على عنصر واجهة مستخدم الجدول. لقد غيّرت البنية المصدر الآن بنية التطبيق. في السابق ، كان ملف index.html عاديًا به ملفات js متصلة به. الآن تمت إضافة مجلدين - الواجهة الخلفية ، مع نص خادم بسيط على nodeJS ومجلد التطبيق ، حيث تكمن جميع رموز العميل المكتوبة. يتم وصف عمليات الخادم لكل أداة في ملفات منفصلة. بالنسبة لعنصر واجهة استخدام الجدول ، هذا هو ملف film.js.يوجد كود عنصر واجهة تعامل Table في ملف table.js لمجلد التطبيق ويتم عرضه في علامة التبويب "لوحة المعلومات".
أولاً ، قم بتشغيل التطبيق على الخادم المحلي.افتح سطر الأوامر للمجلد مع التطبيق وأدخل تسلسل الأوامر التالية:تثبيت
npm خادم تشغيل npm
بعد ذلك ، سيظهر الإدخال التالي في المحطة:الخادم يعمل على المنفذ 3000 ...
افتح localhost : 3000 / app في المتصفح
يتم فتح العنوان / الرابط المحدد في المستعرض.يدعم البرنامج النصي للخادم الذي ستقوم واجهة استخدام الجدول بالوصول إليه جميع عمليات crud الأساسية.ل تحميل البيانات في جدول، تحديد مسار البرنامج النصي في الممتلكات رابط لها.url: "/samples/server/films"
لإرسال طلبات الحفظ - يتم تحديد المسار إلى البرنامج النصي في خاصية الحفظ. سيكون المسار هو نفسه الموجود في url ، فقط مع البادئة الباقية. سنتحدث عن الباقي أدناه.save:"rest->/samples/server/films"
تحدد طرق الاستعلام ما نريد القيام به مع المورد. بشكل افتراضي ، يستخدم Webix طريقتين GET و POST ، ولكننا سنستخدم RESTful API وجميع الطرق المناسبة لعمليات البيانات لدينا: GET و POST و PUT و DELETE.مع البادئة الباقية التي تم تعيينها بالفعل في إعداد الحفظ ، سيتم إرسال جميع الطلبات من خلال الوكيل الجاهز المقابل . ينسق الوكيل الباقي طريقة الطلب مع نوع العملية التي قمنا بها على العميل. هناك العديد من الوكلاء الجاهزين لمهام معينة ؛ إذا لزم الأمر ، يمكنك إنشاء بروكسيات مخصصة.سنتتبع الطلبات باستخدام مثال عنصر واجهة مستخدم الجدول. للقيام بذلك ، في المتصفح ، انتقل إلى DevTools-> Network وابحث عن معلومات حول الطلب المطلوب.لتحميل البيانات في جدول ، استخدمطريقة GET .سنقوم بتحديث الصفحة وانقر على طلب البرنامج النصي films.بشكل افتراضي ، لن يكون هناك أي معلمات في هذا الطلب ، حيث أننا نتعامل مع تحميل البيانات الأولى في المكون.نتيجة لذلك ، يعرض الخادم مصفوفة JSON مع جميع البيانات.نتيجة طلب GET: يتم
استخدام طريقة POST لإنشاء سجل جديد في الجدول .باستخدام النموذج ، أضف بيانات جديدة إلى الجدول.ستكون بيانات الطلب هي البيانات التالية:
عند إضافة سجل إلى الخادم ، يجب أن يأتي المعرف المعين هناك بالتأكيد:{ "id":"ImurRuK1k59qzy2f" }
يعد ذلك ضروريًا حتى لا تفقد الاتصال بين البيانات الموجودة على الخادم / العميل. سيتم استخدام المعرف نفسه الآن على العميل.لتغيير البيانات في الصفوف ، يتم استخدام طريقة PUT .نختار الصف الأول في الجدول - ستظهر البيانات منه في النموذج. ثم سنقوم بتغييرها وحفظها. سيتم نقل السجل بالكامل (كائن البيانات) إلى الخادم مع تغييراتنا.
يجب ألا تحتوي استجابة الخادم على حالة معينة (يمكن أن يكون الكائن الفارغ هو الجواب ، كما هو موضح أدناه) ، ولكن في حالتنا ، سيعرض الخادم JSON التالي:{ status: “updated” }
لحذف البيانات ، استخدم طريقة DELETE .احذف السطر الأول بالضغط على الصليب.في هذه الحالة ، ستكون السلسلة بأكملها هي المعلمات المرسلة إلى الخادم. الشيء الرئيسي في المعلمات هو معرف السجل المراد حذفه على الخادم.
سيقوم الخادم بإرجاع كائن فارغ ، حيث لا يلزم تأكيد خاص لهذه العملية.تتبع نتيجة التنزيل
ضع في اعتبارك موقفًا نحتاج فيه إلى حساب عدد السجلات التي تم تحميلها في جدول وعرضها كرسالة. للقيام بذلك ، استخدم معالج جاهز . يتم استدعاءالمعالج الجاهز فور وصول البيانات الأولى إلى المكون ومرة واحدة فقط. داخل المعالج ، نضع الدالة webix.message()باستدعاء طريقة العد . بعد الاتصال به ، ستظهر رسالة في الزاوية العلوية اليمنى من الشاشة “Loaded 250 records!”.const table = {
ready(){
webix.message({
text:`Loaded ${this.count()} records!`,
type:"success"
});
}
}
لحظة تحميل البيانات:
في حالة حدوث أي خطأ أثناء تحميل البيانات ، سيتم إطلاق حدث onLoadError :$$("datatable").attachEvent("onLoadError", function(xhr){
webix.message("Error!");
});
تتبع حفظ النتائج
يمكنك الحصول على استجابة الخادم عند الحفظ من خلال عمليات مثل الإضافة والتحرير والحذف. خذ بعين الاعتبار مثال القطعة الجدول.لهذا ، يتم استخدام وحدة DataProcessor للتفاعل مع الخادم. يمكن استخدام واجهة برمجة التطبيقات الخاصة بهذه الوحدة لضبط تخزين البيانات. نحتاج فقط إلى تتبع لحظة التوفير - وبالتالي نستخدم أحد أحداثه - على aAfterSync .يتم الوصول إلى وحدة DataProcessor من خلال الإعداد. webix.dp(id)يتم رفع حدث onAfterSync عندما يتم تلقي الاستجابة من الخادم ومعالجتها. لهذا الحدث ، عرض رسالة من خلال webix.message(). بعد الحفظ ، ستظهر الرسالة - في الزاوية اليمنى العليا “Saved!”.نحذف الصف الأول في الجدول ونلقي نظرة على النتيجة.
رمز الحدث في ملف script.js بعد تهيئة webix:let dp = webix.dp($$("film_list"));
dp.attachEvent('onAfterSync', () => {
webix.message({
text:"Saved!",
type:"success"
})
});
يمكن اكتشاف الأخطاء في هذه الحالة مع حدث onAfterSaveError :dp.attachEvent("onAfterSaveError", function(id, status, response, details){
webix.message("Error!");
});
تعميم
باستخدام عمليات CRUD ، اكتشفنا كيفية التفاعل مع جانب الخادم من التطبيق. لقد فحصنا مجموعة قياسية من طرق الاستعلام وكيفية التقاط تحميل البيانات وحفظها. الأمثلة التي تمت مناقشتها في المقالة ليست متاحة فقط لعنصر واجهة تعامل الجدول ، ولكن أيضًا للقائمة. يمكنك تجربته بنفسك في أكواد المصدر المشار إليها في البداية.يمكن العثور على رمز التطبيق النهائي هنا .