كيف اربط الـ front-end مع الـ back-end

الأمر بحاجة إلى تفصيل، لكن الصورة العامة هي عن طريق الـ API فهو حلقة الوصل بين الواجهة الأمامية والخلفية، وبين البرامج عامًة، ويتم إنشائه في الواجهة الخلفية Back-End من خلال لغة برمجة خاصة بالواجهة الخلفية مثل PHP أو C# مثلاً، وللعلم جافاسكريبت يتوفر لها بيئة تشغيل للواجهة الخلفية وهي Node.js ثم يتم استخدام مكتبة أو إطار للمساعدة في عملية التطوير مثل Express.js في حالة Node.js

ويتم إنشاء نقاط نهاية أو عناوين API بشكل بسيط، وتحديد نوع الطلب الذي سيتم التعامل معه عند إرسال الطلب للـ API، والأنواع هي GET, POST, PUT, PATCH, DELETE.

ثم كتابة منطق لمعالجة الطلب المُرسل من قبل الواجهة الأمامية ويتم إرسال رد للواجهة الأمامية، ستجد تفصيل هنا:

يتم ربط الواجهة الأمامية مع الواجهة الخلفية من خلال ال API .

فال API (Application Programming Interface) هو مجموعة من الوظائف والأساليب التي يمكن استخدامها للتفاعل مع برنامج أو خدمة ونستخدم ال API لربط front-end و back-end عن طريق توفير طريقة قياسية للوصول إلى البيانات والخدمات من back-end.

فال api هو عنوان خاص موجود في الواجهة الخلفية حيث يتم إستقبال الطلبات المرسلة إلى الخادم من الواجهة الأمامية ويقوم بتنفيذ منطق معين مثل إضافة أو تعديل أو حذف أو قراءة بيانات موجودة لديك في الواجهة الخلفية.

ويمكنك قراءة المزيد من خلال التالي :

ويتم إرسال الطلبات من الواجهة الأمامية من خلال ال AJAX أو لو كنت تستعمل أطر عمل مثل React أو غيرها ففيها يتم إرسال الطلبات إلأى API وإستقبال الردود وعرضها في الموقع لديك في الواجهة الأمامية.

ويمكنك قراءة التالي لمزيد من التفاصيل :