بعد ذلك سنقوم بإنشاء مكون بطاقة باستخدام Tailwind CSS.

\\\"logo\\\"

ثم نقوم بإحضار البيانات وعرضها على مكون البطاقة.

response.json()).then(data => { teams = data.teams })\\\">

سعيد! لقد نجحت في جلب واجهة برمجة التطبيقات باستخدام Alpine JS وعرضها للمستخدم، وإليك النتائج.

\\\"Image

وفيما يلي شرح للكود الذي تم إنشاؤه.

وظائف

x-data لاستيعاب منطق بيانات Javascript ليتم تشغيله مباشرة على علامة HTML. في هذا الكود نقوم بإنشاء متغير يسمى الفرق والذي يحتوي على مصفوفة نوع البيانات. يهدف هذا المتغير إلى منع البيانات من جلب النتائج في الوظيفة.

يهدف

x-init إلى إجراء التهيئة قبل تحميل المكون. في هذا الكود، نقوم بإدخال وظيفة جلب تهدف إلى استرداد البيانات من نقطة نهاية واجهة برمجة التطبيقات (API) التي أعددناها مسبقًا. ثم قبل عرض صفحة المتصفح، سيقوم Alpine JS بتنفيذ عملية جلب خلف الكواليس ومن ثم يتم جمع نتائج الجلب في متغير الفرق الذي تم الإعلان عنه في البداية.

يتم استخدام

x-for لتنفيذ العملية التكرارية لمتغير الفرق ثم إعادتها إلى متغير الفريق.

x-bind لعرض الصور وx-text لطباعة البيانات مباشرة في شاشة HTML.

","image":"http://www.luping.net","datePublished":"2024-08-01T15:24:15+08:00","dateModified":"2024-08-01T15:24:15+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
"إذا أراد العامل أن يؤدي عمله بشكل جيد، فعليه أولاً أن يشحذ أدواته." - كونفوشيوس، "مختارات كونفوشيوس. لو لينجونج"
الصفحة الأمامية > برمجة > جلب البيانات باستخدام Alpine JS

جلب البيانات باستخدام Alpine JS

تم النشر بتاريخ 2024-08-01
تصفح:564

سنتعلم هذه المرة كيفية جلب البيانات من واجهة برمجة التطبيقات (API) باستخدام Alpine JS. سنقوم بإنشاء موقع ويب يعرض قائمة بأندية كرة القدم التي تلعب في الدوري الإنجليزي الممتاز مأخوذة من واجهة برمجة التطبيقات التالية.

Alpine JS هو إطار عمل جافا سكريبت خفيف الوزن يمكننا استخدامه لإنشاء مواقع ويب تفاعلية دون الحاجة إلى استخدام أطر عمل مثل React أو Vue. عند استخدام Alpine JS، يمكننا بسهولة تطبيق خصائص Javascript مباشرة على ملفات HTML دون الحاجة إلى كتابتها بشكل منفصل.

الرجاء إنشاء ملف HTML بالاسم index.html، ثم لصق الكود التالي.


  
    Latihan Alpine JS

بعد ذلك سنقوم بإنشاء مكون بطاقة باستخدام Tailwind CSS.

logo

ثم نقوم بإحضار البيانات وعرضها على مكون البطاقة.

سعيد! لقد نجحت في جلب واجهة برمجة التطبيقات باستخدام Alpine JS وعرضها للمستخدم، وإليك النتائج.

Image description

وفيما يلي شرح للكود الذي تم إنشاؤه.

وظائف

x-data لاستيعاب منطق بيانات Javascript ليتم تشغيله مباشرة على علامة HTML. في هذا الكود نقوم بإنشاء متغير يسمى الفرق والذي يحتوي على مصفوفة نوع البيانات. يهدف هذا المتغير إلى منع البيانات من جلب النتائج في الوظيفة.

يهدف

x-init إلى إجراء التهيئة قبل تحميل المكون. في هذا الكود، نقوم بإدخال وظيفة جلب تهدف إلى استرداد البيانات من نقطة نهاية واجهة برمجة التطبيقات (API) التي أعددناها مسبقًا. ثم قبل عرض صفحة المتصفح، سيقوم Alpine JS بتنفيذ عملية جلب خلف الكواليس ومن ثم يتم جمع نتائج الجلب في متغير الفرق الذي تم الإعلان عنه في البداية.

يتم استخدام

x-for لتنفيذ العملية التكرارية لمتغير الفرق ثم إعادتها إلى متغير الفريق.

x-bind لعرض الصور وx-text لطباعة البيانات مباشرة في شاشة HTML.

بيان الافراج تم نشر هذه المقالة على: https://dev.to/mahib22/fetching-data-dengan-alpine-js-4l15?1 إذا كان هناك أي انتهاك، يرجى الاتصال بـ [email protected] لحذفه
أحدث البرنامج التعليمي أكثر>

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

Copyright© 2022 湘ICP备2022001581号-3