كيفية بناء خلفية ل Vue.js؟
ستوفر هذه المقالة برنامجًا تعليميًا شاملاً حول كيفية إنشاء خلفية لـ Vue.js. سيوفر نظرة عامة حول Vue.js، والمزايا والقيود، وطرق النشر المتاحة، ودليل تفصيلي حول كيفية إنشاء تطبيق Vue.js واستضافته.
Vue هو إطار عمل JavaScript لبناء واجهات مستخدم مرنة وفعالة (UIs) وتطبيقات الصفحة الواحدة (SPAs).
تشتهر Vue بطبيعتها التقدمية، مما يعني أنه يمكن اعتمادها بشكل تدريجي في المشاريع القائمة. كما تتميز Vue أيضًا بصيغة تعريفية، والتي تسمح لك بوصف حالة واجهة المستخدم التي تريدها والسماح ل Vue بالتعامل مع المنطق والتحديثات الأساسية.
بالإضافة إلى طبيعته التقدمية وصياغته التوضيحية، يستخدم Vue نموذج كائن المستند الافتراضي، وهو تمثيل خفيف الوزن لنموذج كائن المستند الفعلي. وهذا يساعدها على تصيير وتحديث واجهة المستخدم بكفاءة.
عند تطوير تطبيقات Vue، يمكن أن يوفر دمج منصة Backend كخدمة (BaaS) مثل Back4app العديد من الفوائد، مثل تخزين البيانات ومصادقة المستخدم، والتي يمكن أن تبسط التطوير بشكل كبير وتوفر الوقت. في هذه المقالة، سوف تستكشف Vue وتتعلم كيفية إنشاء تطبيق باستخدام Vue باستخدام Back4app.
Contents
مزايا Vue
تستمر شعبية Vue في الازدياد بسبب مزاياها العديدة التي تشمل ما يلي.
منحنى التعلُّم السهل
يتمتع Vue بمنحنى تعليمي سهل نسبيًا، مما يجعله مناسبًا للمطورين من مختلف مستويات المهارة. يعتمد بناء قالبه على لغة HTML المألوفة، مما يسمح للمطورين بفهم الأساسيات والعمل مع Vue بسلاسة وسرعة.
من خلال تصميم واضح ومتسق لواجهة برمجة التطبيقات، تبسّط Vue عملية بناء التطبيقات من خلال توفير أنماط منطقية وبديهية لإنشاء المكونات واستخدام التوجيهات والاستفادة من خطافات دورة الحياة.
ولتسهيل عملية التعلم بشكل أكبر، تقدم Vue وثائق شاملة مليئة بالتفسيرات المكتوبة جيدًا والأمثلة العملية. وعلاوة على ذلك، يوفر مجتمع Vue الداعم المساعدة والتعاون وثروة من موارد التعلم من خلال المنتديات والمجتمعات عبر الإنترنت.
إطار عمل خفيف الوزن
يحتوي Vue على حجم ملف صغير، حيث يبلغ حجم المكتبة الأساسية حوالي 20 كيلوبايت فقط عند تصغيرها وتضخيمها. يؤدي صغر حجم Vue إلى أوقات تحميل أولية أسرع، مما يحسن الأداء وتجربة المستخدم.
بالإضافة إلى ذلك، نظرًا لتصميمه المعياري، يمكنك أيضًا استيراد الميزات الضرورية فقط بشكل انتقائي، مما يقلل من حجم الملف ويحسن الأداء.
البنية القائمة على المكونات
في Vue، تُبنى التطبيقات عن طريق إنشاء مكوّنات قابلة لإعادة الاستخدام ومستقلة بذاتها. المكوّنات في Vue هي وحدات مكتفية ذاتيًا تغلف منطق HTML و CSS وجافا سكريبت، مما يسهل إدارتها وفهمها. يمكن إعادة استخدامها عبر التطبيق، مما يوفر وقت وجهد التطوير.
تسمح لك هذه البنية القائمة على المكونات بإنشاء مكونات مرة واحدة وإعادة استخدامها في التطبيق أو عبر مشاريع متعددة. تقلل إمكانية إعادة الاستخدام هذه من الشيفرة الزائدة عن الحاجة وتعزز نمطية الشيفرة.
يمكن تطوير كل مكون واختباره وتحديثه بشكل مستقل دون التأثير على الأجزاء الأخرى من التطبيق. وهذا بدوره يسهّل تصحيح الأخطاء وإعادة الهيكلة وإضافة ميزات جديدة إلى التطبيق.
نظام البيانات التفاعلي
تشير البيانات التفاعلية إلى البيانات التي تتغير تلقائيًا عندما تتغير قيمتها الأساسية. تحقق Vue التفاعلية عن طريق تغليف الكائنات التفاعلية في وكيل. هذا يسمح ل Vue بتتبع الخصائص التي يتم الوصول إليها.
عند الوصول إلى خاصية ما، تضيفها Vue إلى قائمة التبعيات. عند تغيير قيمة التبعية، تقوم Vue تلقائيًا بتحديث العرض.
نظام البيانات التفاعلي في Vue مفيد لأنك لست مضطرًا لتحديث العرض يدويًا عندما تتغير البيانات لأن Vue يعتني بذلك تلقائيًا. وهذا يسهّل عليك كتابة شيفرة توضيحية والتركيز على وصف النتيجة المطلوبة بدلًا من الخطوات اللازمة لتحقيقها.
حدود Vue
بينما تقدم Vue العديد من المزايا، من الضروري النظر في عيوب تطوير تطبيقات الويب باستخدام Vue. تتضمن بعض هذه العيوب ما يلي.
النظام البيئي الأصغر
تمتلك Vue نظامًا بيئيًا أصغر مقارنةً بالأطر الأمامية الأخرى مثل Angular و React. يعني النظام البيئي الأصغر ل Vue أنه قد لا يتوفر لديه العديد من المكتبات والأدوات المتاحة مثل Angular و React.
هذا النظام البيئي الأصغر يجعل Vue في وضع غير مواتٍ عند تطوير تطبيقات معقدة كبيرة تتطلب مكتبات وأدوات واسعة النطاق. وقد أدى ذلك إلى احتياج المطورين في كثير من الأحيان إلى بناء حلول مخصصة لمتطلبات محددة لأن الحلول المصنوعة بالفعل إما محدودة أو غير مدعومة على نطاق واسع.
دعم الشركات المحدود
على عكس React و Angular، تتمتع Vue بدعم محدود من الشركات. في حين أن Angular و React مدعومان من Google و Facebook، على التوالي، فإن Vue هو مشروع مفتوح المصدر مع فريق أصغر من المشرفين.
يمكن أن يكون هذا الدعم المؤسسي المحدود عيباً من حيث تطوير الميزات الجديدة وإصلاحات الأخطاء والتحديثات الأمنية. بالإضافة إلى ذلك، فقد أثار ذلك مخاوف المؤسسات التي تعطي الأولوية للأطر التي تحظى بدعم مؤسسي قوي واستقرار للمشاريع طويلة الأجل.
بناء الواجهة الخلفية لتطبيق Vue
تكون الواجهة الخلفية لتطبيق Vue مسؤولة عن التعامل مع تخزين البيانات والمصادقة وتكامل واجهة برمجة التطبيقات والمهام المنطقية من جانب الخادم. وهي بمثابة الأساس لوظائف التطبيق، وتسهيل الاتصال بين الواجهة الأمامية والخدمات الخارجية أو قواعد البيانات.
عند إنشاء الواجهة الخلفية لتطبيق Vue، هناك العديد من الخيارات المتاحة للاستخدام، بما في ذلك:
التقنيات التقليدية من جانب الخادم
تقدم أطر عمل الواجهة الخلفية التقليدية مثل Laravel (PHP) و Ruby on Rails و Node.js و ASP.NET (C#) حلولاً شاملة لبناء الواجهة الخلفية لتطبيق Vue.
تتمتع هذه الأطر بوجود ناضج وراسخ، مع وجود مجتمعات كبيرة وتوثيق واسع النطاق، مما يضمن الاستقرار والممارسات المثبتة لتطوير تطبيقات قابلة للتطوير وآمنة.
فهي توفر مكونات مبنية مسبقًا، ومولدات أكواد، وأدوات سقالات تُسرِّع عملية التطوير من خلال التعامل مع المهام الخلفية الشائعة، مما يسمح لك بالتركيز على بناء ميزات خاصة بالتطبيق.
بالإضافة إلى ذلك، توفر أطر العمل التقليدية أدوات قوية للتخطيط القائم على الكائنات (ORM)، مما يبسّط عمليات قواعد البيانات ويضمن تكامل البيانات من خلال التعليمات البرمجية الموجهة للكائنات.
ومع ذلك، قد تتطلب أطر الواجهة الخلفية التقليدية المزيد من الإعداد والتهيئة مقارنةً بالخيارات الأخرى، وهو ما قد يكون شاقًا للمبتدئين أو المطورين ذوي الخبرة المحدودة في الواجهة الخلفية. بالإضافة إلى ذلك، يمكن أن يكون منحنى التعلّم لهذه الأطر أكثر حدة بسبب مجموعات الميزات والاصطلاحات الواسعة.
النسخ الاحتياطي كخدمة (BaaS)
توفر منصات Backend-as-a-Service (BaaS)، مثل Back4app، حلاً مناسبًا لبناء الواجهة الخلفية لتطبيقات Vue. تلخص منصات BaaS تعقيدات البنية التحتية للواجهة الخلفية، وتوفر خدمات خلفية مبنية مسبقًا وواجهات برمجة التطبيقات التي يمكن للمطورين دمجها بسهولة في تطبيقات Vue الخاصة بهم.
تعمل منصات BaaS على تسريع عملية التطوير من خلال تقديم مجموعة واسعة من الخدمات الخلفية المبنية مسبقًا، مثل تخزين البيانات، ومصادقة المستخدم، وتخزين الملفات، والإشعارات الفورية. يمكن دمج هذه الخدمات بسرعة في تطبيقات Vue، مما يقلل من وقت وجهد التطوير.
في حين أن منصات الدعم كخدمة (BaaS) توفر الراحة وقابلية التوسع، إلا أن هناك بعض الاعتبارات التي يجب وضعها في الاعتبار. يتمثل أحد العوائق في احتمالية تقييد البائع، حيث أن منصات BaaS قد تربط رمز الواجهة الخلفية الخاصة بك بخدماتها وواجهات برمجة التطبيقات الخاصة بها.
قد يكون التخصيص والتحكم في الواجهة الخلفية محدودًا أيضًا، مما قد يمثل تحديًا للتطبيقات ذات المتطلبات الفريدة.
إنشاء تطبيق مدونة فيو
لإنشاء تطبيق Vue، قم بتشغيل الأمر التالي في طرفية دليل المشروع:
npm create vue@latest
سيعيد هذا الرمز مطالبة حيث يمكنك تسمية تطبيق Vue وتحديد الميزات التي ستستخدمها في تطبيق Vue.
بعد تسمية التطبيق واختيار Vue Router للتعامل مع المسارات في تطبيقك، قم بالقرص المضغوط إلى التطبيق وتشغيل الأمر npm install لتثبيت التبعيات.
في دليل طرق العرض في تطبيق مدونة Vue الخاص بك، أنشئ طريقتي عرض: CreatePosts.vue و ReadPosts.vue.
بعد إنشاء طرق العرض، أضف كتلة التعليمات البرمجية أدناه إلى ملف index.js في دليل الموجه:
//index.js
import { createRouter, createWebHistory } from 'vue-router'
import CreatePosts from '../views/CreatePosts.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'post',
component: CreatePosts
},
{
path: '/readposts',
name: 'read-posts',
component: () => import('../views/ReadPosts.vue')
}
]
})
export default router
تُنشئ الشيفرة البرمجية أعلاه مثيل موجه Vue مع مسارين: مسار "/" المرتبط بمكوّن CreatePosts ومسار "/readposts" المرتبط بمكوّن ReadPosts المستورد ديناميكيًا. يدير مثيل الموجه هذا التنقل داخل تطبيق Vue الخاص بك.
بعد ذلك، أضف رأسًا يحتوي على مسارات متداخلة في علامات HTML للأزرار في ملف App.vue للسماح لمستخدمي التطبيق بالانتقال إلى المسارات المطلوبة.
هكذا:
<!-- App.vue -->
<script setup>
import { RouterLink, RouterView } from 'vue-router';
</script>
<template>
<header>
<h1>Vue Blog</h1>
<nav>
<RouterLink to="/" class="link"><button>Create Posts</button></RouterLink>
<RouterLink to="/readposts" class="link"><button>Read Posts</button></RouterLink>
</nav>
</header>
<RouterView />
</template>
يقوم مكوِّن الشيفرة أعلاه بإعداد التوجيه في تطبيق المدونة. يستورد كلاً من مكوني RouterLink و RouterView من مكتبة vue-router. يستورد هذه المكونات في مكوِّن إعداد النص البرمجي (خاصية Vue 3) في ملف App.vue.
يحتوي مكوِّن القالب على ترميز HTML لملف App.vue. ويتضمن عنوانًا بعنوان “مدونة Vue” وشريط تنقل مع زرين مغلفين في مكون RouterLink الذي يرتبط بالمسار المقابل. يُستخدم مكون RouterView لتصيير محتوى المسار الحالي.
بعد إعداد التوجيه، قم بتصميم العنوان وروابط المسار عن طريق إضافة كتلة النمط أدناه إلى ملف App.vue الخاص بك:
<style lang= "scss" scoped>
header{
padding: 1rem 0;
display: flex;
justify-content: space-between;
nav{
display: flex;
gap: 1rem;
.link{
text-decoration: none;
color: inherit;
}
}
}
</style>
دمج تطبيق Back4app في تطبيق مدونة Vue الخاص بك
ابدأ بإعداد تطبيق Vue الخاص بك، ثم قم بإنشاء مثيل على Back4app لإنشاء اتصال مع تطبيق Vue الخاص بك. للقيام بذلك، ستحتاج إلى حساب Back4app.
إذا لم تكن من مستخدمي Back4app بالفعل، فاتبع هذه الخطوات السهلة للتسجيل:
- انتقل إلى موقع Back4app الإلكتروني.
- حدد موقع زر التسجيل في الصفحة الرئيسية وانقر فوقه.
- أكمل استمارة التسجيل ببياناتك وأرسلها.
بمجرد إعداد حسابك بنجاح، قم بتسجيل الدخول إلى Back4app. ابحث عن خيار تطبيق جديد الموجود في الزاوية اليمنى العليا وحدده. سيقودك هذا إلى نموذج حيث تحتاج إلى تقديم اسم التطبيق الخاص بك. بعد إدخال الاسم، انقر على زر CREATE (إنشاء) لإنهاء العملية.
بعد النقر على زر “إنشاء”، سيتم إنشاء طلبك، وسيتم توجيهك إلى لوحة تحكم التطبيق.
توصيل تطبيق مدونة Vue بتطبيق Back4app
لتوصيل تطبيق Vue الخاص بك بتطبيق Back4app، تحتاج أولاً إلى تثبيت Parse JavaScript SDK.
لتثبيت SDK، قم بتشغيل أي من الأمرين التاليين بناءً على مدير الحزم الذي تستخدمه:
#using npm
npm install parse
or
#using yarn
yarn add parse
بعد ذلك، ستحتاج إلى تهيئة SDK باستخدام اثنين من بيانات اعتماد تطبيق Back4app الخاص بك، معرف التطبيق ومفتاح جافا سكريبت.
احصل على معرّف التطبيق ومفتاح JavaScript من Back4app بالانتقال إلى قسم الأمان والمفاتيح عن طريق تحديد إعدادات التطبيق في لوحة التحكم.
يعد تخزين مفاتيح التطبيق الخاص بك كنص عادي مخاطرة أمنية، حيث يمكن للمستخدمين الضارين الوصول إلى تطبيقك. وبالتالي، قم بتخزين بيانات اعتماد تطبيقك بشكل آمن إما باستخدام المتغيرات البيئية أو الطريقة المفضلة لديك لتخزين المفاتيح الحساسة.
بعد ذلك، قم باستيراد النسخة المصغرة من Parse من حزمة Parse التي قمت بتثبيتها في ملف main.js. ثم استدع طريقة التهيئة على كائن Parse ومرر معرّف التطبيق ومفتاح JavaScript كوسيطين.
أخيرًا، اضبط خاصية Parse.serverURL على‘https://parseapi.back4app.com/’.
على سبيل المثال:
import Parse from 'parse/dist/parse.min.js';
Parse.initialize(VUE_APP_PARSE_APPLICATION_ID, VUE_APP_PARSE_JAVASCRIPT_KEY);
Parse.serverURL = '<https://parseapi.back4app.com>';
يجب أن يكون ملف main.js الخاص بك مشابهًا للكتلة البرمجية أدناه بعد إضافة الكتلة البرمجية أعلاه:
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Parse from 'parse/dist/parse.min.js';
import './assets/main.css';
const app = createApp(App)
app.use(router)
Parse.initialize(VUE_APP_PARSE_APPLICATION_ID, VUE_APP_PARSE_JAVASCRIPT_KEY);
Parse.serverURL = '<https://parseapi.back4app.com>';
app.mount('#app')
إضافة بيانات إلى Back4app
لالتقاط البيانات من مستخدم المدونة، ستحتاج إلى إنشاء نموذج. عند إرسال النموذج، سيقوم تطبيق Vue بتشغيل دالة إرسال إرسال البريد() التي تقوم بتنفيذ المنطق المطلوب لحفظ البيانات في مثيل Back4app.
أضف الكتلة البرمجية أدناه إلى ملف CreatePosts.vue الخاص بك لإنشاء النموذج الخاص بك:
<!-- CreatePosts.vue -->
<script setup>
import { ref } from 'vue';
import { Parse } from 'parse/dist/parse.min.js';
const blog = ref({
title: "",
post: "",
})
function submitPost() {
try {
const Post = new Parse.Object("Post");
Post.set("title", blog.value.title);
Post.set("body", blog.value.post);
Post.save().then(() => {
console.log("New Post added successfully");
});
} catch (error) {
console.log(error);
}
blog.value.title = ''
blog.value.post = ''
}
</script>
<template>
<form @submit.prevent="submitPost">
<input id="blog-title" v-model="blog.title" placeholder="Title"/>
<textarea id="blog-post" v-model="blog.post" placeholder="Post" rows="20"></textarea>
<button>Submit Post</button>
</form>
</template>
مكوِّن الشيفرة أعلاه هو مكوِّن يمكِّن المستخدمين من إرسال منشور مدونة. يستخدم واجهة برمجة تطبيقات تكوين Vue ويستورد دالة المرجع من مكتبة Vue.
تُنشئ دالة إرسال المنشور كائنًا جديدًا ل Parse Post وتعيِّن خصائص العنوان والجسم لكائن المنشور هذا إلى قيمة خاصيتي blog.title و blog.post باستخدام طريقة التعيين.
بعد ذلك، يتم حفظ كائن المشاركة في Back4App باستخدام طريقة الحفظ. عند النجاح أو الفشل، يعرض الرمز رسالة في وحدة التحكم. بعد إرسال المنشور، تتم إعادة تعيين العنوان وقيم المنشور في كائن المدونة إلى سلسلة فارغة، مما يؤدي إلى مسح حقول النموذج.
تحدد كتلة هذا الملف عنصر نموذج مع مُستمع الحدث @submit.prevent الذي يقوم بتشغيل دالة إرسال المشاركة عند إرسال النموذج.
يوجد داخل النموذج عناصر إدخال ومساحة نصية مرتبطة بخصائص كائن المدونة(blog.title.blog و blog.post) باستخدام نموذج v-model. يتيح ذلك ربط البيانات في اتجاهين، مما يضمن أن التغييرات في عناصر النموذج تُحدِّث كائن المدونة.
صمم طريقة عرض CreatePosts للحصول على واجهة مستخدم أكثر جاذبية عن طريق إضافة الكتلة البرمجية أدناه إلى ملف CreatePosts.vue الخاص بك:
<style lang= "scss" scoped>
form{
display: flex;
flex-direction: column;
gap: 2rem;
align-items: center;
input{
padding: 1rem;
background-color: #f2f2f2;
font-family: 'Poppins', sans-serif;
border: none;
border-radius: 12px;
inline-size: 70%;
&::placeholder{
color: #e3e3e3;
font-weight: bold;
font-family: 'Poppins', sans-serif;
}
}
textarea{
padding: 1rem;
border: none;
background-color: #f2f2f2;
font-family: 'Poppins', sans-serif;
border-radius: 12px;
inline-size: 70%;
&::placeholder{
color: #e3e3e3;
font-weight: bold;
font-family: 'Poppins', sans-serif;
}
}
}
</style>
قراءة البيانات من Back4app
من أجل عرض البيانات في تطبيقك التي تم حفظها في مثيل Back4app الخاص بك، يجب أن تكون قادرًا أولاً على القراءة من مثيل Back4app الخاص بك.
لقراءة البيانات من مثيل Back4app الخاص بك، تحتاج إلى إنشاء استعلام Parse للفئة التي تريد جلب البيانات منها. يمكنك بعد ذلك استخدام خطاف دورة حياة Vue’s onBeforeMount لجلب البيانات وعرضها في تطبيقك.
على سبيل المثال:
<!-- ReadPosts.vue -->
<script setup>
import { onBeforeMount, ref } from 'vue';
import Parse from 'parse/dist/parse.min.js';
const postList = ref([])
onBeforeMount( async () => {
try {
const query = new Parse.Query("Post");
const post = await query.find();
console.log('Posts to be read displayed')
postList.value = post;
console.log(postList.value)
} catch (error) {
console.log(error);
}
})
</script>
<template>
<div>
<ul class="postlist">
<div class="post" v-for="(post, index) in postList">
<div>
<h2>{{ post.get('title') }}</h2>
<p>{{ post.get('body') }}</p>
</div>
</div>
</ul>
</div>
</template>
يجلب ملف ReadPosts.vue المنشورات ويعرضها من Back4app. يستورد النص البرمجي خطاف onBeforeMount ودالة المرجع من حزمة vue. ينفِّذ الخطاف دالة غير متزامنة قبل تحميل تطبيق Vue.
تبحث الدالة عن كائن “مشاركة” من قاعدة بيانات تطبيق Back4app الخاص بك باستخدام طريقة Parse.Query(). ثم تقوم بإرجاع مصفوفة تحتوي على نتائج الاستعلام عن طريق استدعاء طريقة Parse .Query() على نتيجة استدعاء Parse.Query(). أخيرًا، يقوم بتعيين المصفوفة التي تم إرجاعها إلى متغير postList.
في مكوِّن القالب، يتكرر التوجيه v-for عبر مصفوفة postList ويُنشئ عنصر div جديدًا لكل منشور في مصفوفة postList. تسترجع طريقة post.get() قيم خصائص العنوان والجسم للسمات في قاعدة بيانات Back4App الخاصة بك.
يمكنك الآن تصميم ملف ReadPosts.vue الخاص بك عن طريق إضافة شيفرة Scss التالية في كتلة النمط:
<style lang= "scss" scoped>
.postlist{
display: flex;
flex-direction: column;
gap: 2rem;
.post{
display: flex;
justify-content: space-between;
padding: 1rem;
h2{
margin-block-end: 1rem;
text-transform: uppercase;
}
p{
opacity: 0.4;
font-weight: bold;
font-size: 13px;
margin-block-end: 0.5rem;
}
}
}
</style>
تعديل تطبيق Vue الخاص بك لإضافة وظيفة حذف المشاركة
وظيفة حيوية أخرى يمكنك إضافتها إلى تطبيق مدونتك هي القدرة على حذف المنشورات. لتنفيذ هذه الوظيفة، استخدم طريقة التدمير المتاحة في Parse SDK.
هكذا:
<!-- ReadPosts.vue -->
<script setup>
import { onBeforeMount, ref } from 'vue';
import Parse from 'parse/dist/parse.min.js';
const postList = ref([])
onBeforeMount( async () => {
try {
const query = new Parse.Query("Post");
const post = await query.find();
console.log('Posts to be read displayed')
postList.value = post;
console.log(postList.value)
} catch (error) {
console.log(error);
}
})
const deletePost = async (id) => {
try {
const Post = Parse.Object.extend("Post");
const todo = new Post();
todo.id = id;
await todo.destroy();
const newPostList = postList.value.filter( (item) => item.id !== id )
postList.value = newPostList;
} catch (error) {
console.log(error);
}
}
</script>
هذا النص البرمجي هو تحديث لملف ReadPosts.vue الذي يتعامل مع وظيفة الحذف. تُنشئ دالة حذف المنشور كائن منشور جديد باستخدام طريقة Parse.Object.extension. ثم يُعيِّن خاصية المُعرِّف لكائن المنشور إلى المُعرِّف الذي تم تمريره إلى الدالة.
بعد ذلك، يستدعي طريقة التدمير لكائن المنشور لحذف المنشور الذي يحمل المُعرِّف المُعطى من قاعدة بيانات Back4app. ثم يقوم بتصفية مصفوفة postList وإرجاع مصفوفة جديدة newPostList، مع جميع المشاركات باستثناء المشاركة المحذوفة. ثم يتم تعيين مصفوفة newPostList الجديدة إلى متغير postList.
يمكنك بعد ذلك ربط دالة DeletePost بحدث نقر على عنصر الزر في قالب قالب ملف ReadPosts.vue الخاص بك.
هكذا:
<template>
<div>
<ul class="postlist">
<div class="post" v-for="(post, index) in postList">
<div>
<h2>{{ post.get('title') }}</h2>
<p>{{ post.get('body') }}</p>
</div>
<button @click="deletePost(post.id)">Delete</button>
</div>
</ul>
</div>
</template>
أخيرًا، أضف بعض الأنماط العامة لتصميم الأزرار وهيكل تطبيق Vue الخاص بك في دليل الأصول:
/* main.css */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
inline-size: 90%;
margin: auto;
font-family: 'Poppins', sans-serif;
}
button{
border: none;
padding: 0.5rem 0.8rem;
background-color: inherit;
font-family: 'Poppins', sans-serif;
font-size: small;
font-weight: bold;
color: #333333;
border-radius: 12px;
}
button:hover{
color: #e2e2e2;
background-color: #333333;
}
اختبار تطبيق مدونة Vue الخاص بك مع تطبيق Back4app المدمج
الآن بعد أن قمت ببناء تطبيق Back4app ودمجه في تطبيق Vue الخاص بك. يمكنك تشغيل الأمر npm في طرفية مشروعك لاختبار التطبيق:
npm run dev
يقوم هذا الأمر بتجميع التطبيق واستضافة التطبيق على خادم محلي معين http://localhost:5173/
عند تشغيل التطبيق، يجب أن ترى طريقة عرض CreatePosts لإنشاء المنشورات كطريقك الرئيسي:
بعد ملء حقول الإدخال، سيؤدي النقر على زر إرسال المشاركة إلى إضافة قيم الإدخال إلى قاعدة بيانات Back4app. تحقق من لوحة معلومات تطبيق Back4app أو انتقل إلى عرض ReadPosts لتأكيد ذلك.
سيؤدي النقر على زر الحذف إلى حذف المشاركة. على سبيل المثال، احذف “المشاركة الثانية” بالنقر على زر الحذف الخاص بها:
الخاتمة
يوفر Vue للمطورين حلًا قويًا وقابلًا للتطوير لإنشاء تطبيقات ويب حديثة من خلال ربط البيانات التفاعلية والبنية القائمة على المكونات ومنظومة المكتبات.
يمكّن دمج Vue مع Back4app المطورين من التعامل مع الواجهة الخلفية لتطبيقاتهم بسهولة، حيث يقلل Back4app من التعقيد المرتبط تقليديًا بتطوير الواجهة الخلفية مما يسمح للمطورين بإنشاء تطبيقات ويب كاملة المكدس.
