كيفية إجراء التنقل باستخدام المعلمات في تطبيقات الويب

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

بيانات الصفحة

ولكن قبل النظر إلى التنقل نفسه ، يجدر بنا فهم المعلومات التي يمكنك الحصول عليها عن الصفحة بشكل عام وما يمكن أن يتكون منه عنوان URL. للقيام بذلك ، يمكنك استخدام كتلة Get Current Page ومعرفة البيانات التي تنتجها.

• URL - عنوان الصفحة في شكلها المعتاد. على سبيل المثال - https://vdjyien-app.apms.io/admin/someurl/
• Page - المعرف الداخلي للصفحة ، والذي يتم استخدامه في عمليات الأعمال AppMaster . يتكون من 22 حرفًا ومجموعة عشوائية من الأحرف والأرقام.
• Title - عنوان الصفحة. اسمها في شكل مقروء من قبل الإنسان.
• URL Params . يمكن إنشاء صفحة بحيث لا يكون عنوانها ثابتًا تمامًا ولكنه يتضمن أيضًا قيمًا متغيرة. على سبيل المثال ، يمكن أن تعرض الصفحة قائمة بالمقالات في قسم معين ، ويتم الإشارة إلى معرف هذا القسم فقط في عنوان URL كمعامل.
• Query Params . تتم كتابة معامِلات طلب البحث الإضافية في نهاية عنوان URL بعد علامة "؟" إشارة. على سبيل المثال ، بالنسبة لصفحة بها قائمة مقالات ، قد تشير المعلمات "؟ _limit = 12 & lang = en" إلى أن هناك 12 مقالة فقط باللغة الإنجليزية مطلوبة.

على سبيل المثال ، تخيل صفحة تعرض قائمة بمقالات المدونة. عنوان URL الخاص به معطى كـ "/ blog /: theme /: author". يشير الرمز ":" إلى أن القيمة المحددة بعد ذلك هي معلمة. كمعلمات ، يأخذ معرفات موضوع المقالة (الموضوع) ومؤلفها (مؤلفها).

للانتقال إلى هذه الصفحة ، تحتاج إلى استخدام كتلة Navigate في عملية الأعمال.

تتوافق المعلمات مع تلك التي تم تحليلها مسبقًا في كتلة Get Current Page . في هذه الحالة ، لا يهم عنوان الصفحة الفعلي للتنقل حيث تم تحديد الصفحة نفسها كمعرف داخلي (يمكنك تحديدها من قائمة الصفحات).

إذا كانت الصفحة لا تحتوي على أي معلمات ، فيمكن أن يكون التنقل بسيطًا للغاية ؛ ما عليك سوى اختيار الصفحة المطلوبة من القائمة المتوفرة. لكن في هذا المثال ، هناك معلمات يجب تمريرها إلى كتلة Navigate .

إنشاء صفحة مصدر للملاحة

ضع في اعتبارك استخدام المعلمات في مثال محدد. للقيام بذلك ، سننشئ صفحة منفصلة من حيث سنحتاج إلى الانتقال إلى الصفحة الهدف في المستقبل. دعنا نضيف عنصري Select إلى هذه الصفحة (أحدهما للاختيار من قائمة الموضوعات ، والثاني لقائمة المؤلفين) ونملأهما بقيم الاختبار.

بعد ذلك ، تحتاج إلى إعداد سير عمل لزر Navigate من خلال النقر على التنقل إلى الصفحة المقصودة الذي يجب أن يعمل. تبدأ هذه العملية بالحصول على القيم المحددة من كتل Select .

الخطوة التالية هي ملء النماذج الافتراضية Key-Value . يتم استخدام صفيفهم لتمرير المعلمات الضرورية إلى كتلة Navigate . يتكون النموذج نفسه من مفتاح ( Key ) ، وهو اسم المعلمة (في هذا المثال ، الموضوع ، والمؤلف) ، بالإضافة إلى قيمته ( Value ، الاسم المباشر للموضوع المحدد ، أو اسم مؤلف).

يرجى ملاحظة أنه لا يمكن استخدام العديد من الأحرف في عنوان URL ، بما في ذلك حرف المسافة. لذلك ، الاسم المكتوب كـ " Frank Paulsen " في عنوان URL سيتم تحويله تلقائيًا إلى " Frank%20Paulsen ". يمكن استخدام كتل تشفير عناوين URL Decode وفك URL Encode عناوين URL لتشفير وفك تشفير معايير URL. في هذا المثال ، لمزيد من الوضوح والجمال لعنوان URL ، نستخدم مجموعة Replace string واستبدل المسافة بعلامة "-" بشكل مستقل ، مع تقديم الاسم كـ " Frank-Paulsen ".

الخطوة الأخيرة هي دمج أزواج المفتاح والقيمة التي تم إنشاؤها في مصفوفة واحدة لتمريرها كمعامل إلى كتلة Navigate .

الآن ، عند النقر فوق الزر ، ستنتقل إلى الصفحة https://vdjyien-app.apms.io/admin/blog/No-code/Frank-Paulsen/

يمكنك التحقق من أن عنوان URL الخاص به يتكون من جزء ثابت (https://vdjyien-app.apms.io/admin/blog/) ومتغير (No-code / Frank-Paulsen /) تم تكوينه من القيم المحددة في الصفحة السابقة.

استخدام معلمات URL لإدارة المحتوى

المهمة التالية هي استخدام معلمات URL المستلمة لتغيير محتوى الصفحة. يمكن استخدام هذه المعلمات ، على سبيل المثال ، لتكوين طلب GET لقاعدة البيانات ، ولكن في مثالنا ، سنعرض ببساطة قيمتها على الصفحة. للقيام بذلك ، دعنا نضيف حاويتين إلى الصفحة Label المقابلة.

لنقم بإعداد عملية تجارية بناءً على مشغل onShow في أحد Label . ستكون مهمته تحليل عنوان URL والحصول على معلماته وعرضه على الصفحة. للقيام بذلك ، نستخدم كتلة Get Current Page ونحصل على قيمة كل معلمة في حلقة.

بعد ذلك ، من خلال كتلة Switch ، نحصل على قيمة المعلمة ونعرضها في Label المقابل. في الوقت نفسه ، بالنسبة إلى المعلمة Author ، سنستبدل "-" بمسافة بشكل عكسي.

الآن عند الانتقال إلى صفحة معينة ، لن يتم استخدام عنوانها الثابت فحسب ، بل سيتم أيضًا استخدام معلمات URL التي تؤثر على العرض الفعلي للمحتوى على الصفحة.

استخدام معلمات الاستعلام

بنفس الطريقة تقريبًا ، يمكنك إضافة معلمات الاستعلام ( Query Params ). الفرق الرئيسي بينها وبين معلمات URL هو أنها اختيارية. في هذا المثال ، يتضمن عنوان URL بالضرورة إشارة إلى المعلومات التي يجب عرضها على الصفحة (أي قسم موضوعي وأي مؤلف) ، والمعلمات الإضافية تقدم التوضيحات اللازمة. على سبيل المثال ، يمكنك استخدام معلمات limit offset لتنظيم ترقيم الصفحات وتعيين عدد السجلات بالضبط للاستعلام من قاعدة البيانات ومن أي سجل لبدء الإخراج.

دعنا نضيف حقلين جديدين إلى صفحة البداية - Input (Integer) . سنكتب معلمات limit offset فيها.

دعنا نجري الإضافات اللازمة لعملية عمل زر التنقل. دعنا نشكل مصفوفة من Query Params بقيم limit offset .

الخطوة الأخيرة هي إضافة عناصر بمعلومات من معلمات الطلب ، وكذلك إكمال عملية الأعمال للصفحة الهدف.

يجب أن تكون النتيجة عنوان URL مثل هذا:

https://vdjyien-app.apms.io/admin/blog/No-code/Frank-Paulsen/؟offset=0&limit=12

ينفذ التطبيق التنقل باستخدام معلمات URL ومعلمات الاستعلام ويحدد ديناميكيًا محتوى الصفحة المستهدفة اعتمادًا على هذه المعلمات.