वेब-एप्लिकेशन में पैरामीटर के साथ नेविगेशन कैसे करें

बिना नेविगेशन के कोई भी वेबसाइट या वेब एप्लिकेशन बनाना लगभग अकल्पनीय है। उपयोगकर्ताओं को पृष्ठों के बीच नेविगेट करना चाहिए, विभिन्न साइट अनुभागों को खोलना चाहिए और विभिन्न जानकारी प्राप्त करनी चाहिए।

पृष्ठ डेटा

लेकिन स्वयं नेविगेशन को देखने से पहले, यह समझने योग्य है कि आप किसी पृष्ठ के बारे में सामान्य रूप से क्या जानकारी प्राप्त कर सकते हैं और एक 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=hi" संकेत कर सकते हैं कि अंग्रेजी में केवल 12 लेख आवश्यक हैं।

उदाहरण के लिए, एक पृष्ठ की कल्पना करें जो ब्लॉग लेखों की सूची प्रदर्शित करता है। इसका URL "/ब्लॉग/:थीम/:लेखक" के रूप में दिया गया है। प्रतीक ":" इंगित करता है कि इसके बाद निर्दिष्ट मान एक पैरामीटर है। मापदंडों के रूप में, यह लेख के विषय (विषय) और उसके लेखक (लेखक) के पहचानकर्ताओं को लेता है।

इस पृष्ठ पर नेविगेट करने के लिए, आपको व्यवसाय प्रक्रिया में Navigate ब्लॉक का उपयोग करना होगा।

पैरामीटर उन लोगों के अनुरूप हैं जिन्हें पहले Get Current Page ब्लॉक में पार्स किया गया था। इस मामले में, पृष्ठ का वास्तविक शीर्षक नेविगेशन के लिए मायने नहीं रखता क्योंकि पृष्ठ स्वयं एक आंतरिक पहचानकर्ता के रूप में निर्दिष्ट है (आप इसे पृष्ठों की सूची से चुन सकते हैं)।

यदि पृष्ठ में कोई पैरामीटर नहीं है, तो नेविगेशन अत्यंत सरल हो सकता है; प्रदान की गई सूची से वांछित पृष्ठ का चयन करें। लेकिन इस उदाहरण में, ऐसे पैरामीटर हैं जिन्हें Navigate ब्लॉक में पारित किया जाना चाहिए।

नेविगेशन के लिए एक स्रोत पृष्ठ बनाना

एक विशिष्ट उदाहरण पर पैरामीटर के उपयोग पर विचार करें। ऐसा करने के लिए, हम एक अलग पेज बनाएंगे जहां से हमें भविष्य में लक्ष्य पेज पर जाना होगा। आइए इस पृष्ठ में दो Select तत्व जोड़ें (एक विषयों की सूची से चयन करने के लिए, दूसरा लेखकों की सूची के लिए) और उन्हें परीक्षण मूल्यों से भरें।

उसके बाद, आपको Navigate बटन के लिए एक वर्कफ़्लो सेट करना होगा, जिस पर क्लिक करके लैंडिंग पृष्ठ पर जाने वाले नेविगेशन को काम करना चाहिए। यह प्रक्रिया Select ब्लॉकों से चयनित मान प्राप्त करके शुरू होती है।

अगला कदम Key-Value वर्चुअल मॉडल को पॉप्युलेट करना है। उनकी सरणी का उपयोग Navigate ब्लॉक में आवश्यक पैरामीटर पास करने के लिए किया जाता है। मॉडल में स्वयं एक कुंजी ( Key ) होती है, जो पैरामीटर का नाम है (इस उदाहरण में, विषय और लेखक), साथ ही साथ इसका मूल्य ( Value , चयनित विषय का प्रत्यक्ष नाम, या का नाम) लेखक)।

कृपया ध्यान दें कि URL में स्पेस वर्ण सहित कई वर्णों का उपयोग नहीं किया जा सकता है। इसलिए, URL में " Frank Paulsen " के रूप में लिखा गया नाम स्वचालित रूप से " Frank%20Paulsen " में परिवर्तित हो जाएगा। URL Encode और URL Decode ब्लॉक का उपयोग 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 वाले पृष्ठ में दो कंटेनर जोड़ते हैं।

चलिए Label में से किसी एक में onShow ट्रिगर के आधार पर एक व्यवसाय प्रक्रिया सेट करते हैं। इसका कार्य URL को पार्स करना, उसके पैरामीटर प्राप्त करना और उसे पृष्ठ पर प्रदर्शित करना होगा। ऐसा करने के लिए, हम Get Current Page ब्लॉक का उपयोग करते हैं और एक लूप में प्रत्येक पैरामीटर का मान प्राप्त करते हैं।

अगला, Switch ब्लॉक के माध्यम से, हम पैरामीटर का मान प्राप्त करते हैं और इसे संबंधित Label में प्रदर्शित करते हैं। उसी समय, Author पैरामीटर के लिए, हम "-" को एक स्थान के साथ उल्टा बदल देंगे।

अब किसी दिए गए पृष्ठ पर नेविगेट करते समय, न केवल उसके स्थिर पते का उपयोग किया जाएगा, बल्कि उन URL पैरामीटर का भी उपयोग किया जाएगा जो पृष्ठ पर सामग्री के वास्तविक प्रदर्शन को प्रभावित करते हैं।

क्वेरी पैरामीटर का उपयोग करना

लगभग उसी तरह, आप क्वेरी पैरामीटर ( Query Params ) जोड़ सकते हैं। URL पैरामीटर से उनका मुख्य अंतर यह है कि वे वैकल्पिक हैं। इस उदाहरण में, URL में आवश्यक रूप से यह संकेत शामिल है कि पृष्ठ पर कौन सी जानकारी प्रदर्शित की जानी चाहिए (कौन सा विषयगत अनुभाग और कौन सा लेखक), और अतिरिक्त पैरामीटर आवश्यक स्पष्टीकरण देते हैं। उदाहरण के लिए, आप पेजिनेशन को व्यवस्थित करने के लिए limit और offset पैरामीटर का उपयोग कर सकते हैं और डेटाबेस से क्वेरी करने के लिए वास्तव में कितने रिकॉर्ड सेट कर सकते हैं और किस रिकॉर्ड से आउटपुट शुरू करना है।

आइए प्रारंभ पृष्ठ पर दो नए क्षेत्र जोड़ें - Input (Integer) । हम उनमें limit और offset पैरामीटर लिखेंगे।

आइए नेविगेशन बटन व्यवसाय प्रक्रिया में आवश्यक परिवर्धन करें। आइए limit और offset मानों के साथ Query Params की एक सरणी बनाएं।

अंतिम चरण अनुरोध मापदंडों से जानकारी के साथ तत्वों को जोड़ना है, साथ ही लक्ष्य पृष्ठ के लिए व्यवसाय प्रक्रिया को पूरा करना है।

परिणाम इस तरह का URL होना चाहिए:

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

एप्लिकेशन यूआरएल पैरामीटर और क्वेरी पैरामीटर के साथ नेविगेशन लागू करता है और इन पैरामीटर के आधार पर लक्ष्य पृष्ठ की सामग्री को गतिशील रूप से निर्धारित करता है।