วิธีการนำทางด้วยพารามิเตอร์ในเว็บแอปพลิเคชัน

การสร้างเว็บไซต์หรือเว็บแอปพลิเคชันแทบจะเป็นไปไม่ได้หากไม่มีการนำทาง ผู้ใช้ต้องนำทางระหว่างหน้า เปิดส่วนต่างๆ ของไซต์ และรับข้อมูลต่างๆ

ข้อมูลหน้า

แต่ก่อนที่จะดูที่การนำทาง คุณควรทำความเข้าใจว่าข้อมูลทั่วไปเกี่ยวกับหน้าเว็บที่คุณจะได้รับคืออะไร และ 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=th” อาจระบุว่าต้องมีบทความภาษาอังกฤษเพียง 12 บทความ

ตัวอย่างเช่น ลองนึกภาพหน้าที่แสดงรายการบทความในบล็อก URL จะได้รับเป็น “/blog/:theme/:author” สัญลักษณ์ “:” บ่งชี้ว่าค่าที่ระบุต่อท้ายเป็นพารามิเตอร์ พารามิเตอร์จะใช้ตัวระบุหัวข้อของบทความ (ธีม) และผู้เขียน (ผู้เขียน)

ในการนำทางไปยังหน้านี้ คุณต้องใช้บล็อก Navigate ทางในกระบวนการทางธุรกิจ

พารามิเตอร์สอดคล้องกับพารามิเตอร์ที่แยกวิเคราะห์ก่อนหน้านี้ในบล็อกรับ Get Current Page ในกรณีนี้ ชื่อจริงของหน้าไม่สำคัญสำหรับการนำทาง เนื่องจากหน้านั้นถูกระบุเป็นตัวระบุภายใน (คุณสามารถเลือกได้จากรายการหน้า)

หากหน้าไม่มีพารามิเตอร์ การนำทางก็ง่ายมาก เพียงเลือกหน้าที่ต้องการจากรายการที่มีให้ แต่ในตัวอย่างนี้ มีพารามิเตอร์ที่ต้องส่งผ่านไปยังบล็อก Navigate ทาง

การสร้างหน้าต้นทางสำหรับการนำทาง

พิจารณาการใช้พารามิเตอร์กับตัวอย่างเฉพาะ ในการทำเช่นนี้ เราจะสร้างเพจแยกต่างหากจากตำแหน่งที่เราจะต้องไปยังเพจเป้าหมายในอนาคต เพิ่มองค์ประกอบ Select สองรายการในหน้านี้ (รายการหนึ่งสำหรับเลือกจากรายการหัวข้อ รายการที่สองสำหรับรายการผู้แต่ง) และเติมค่าการทดสอบ

หลังจากนั้น คุณต้องตั้งค่าเวิร์กโฟลว์สำหรับปุ่ม Navigate โดยคลิกที่การนำทางไปยังหน้า Landing Page ที่ควรใช้ กระบวนการนี้เริ่มต้นด้วยการรับค่าที่เลือกจากบล็อก Select

ขั้นตอนต่อไปคือการเติมโมเดลเสมือนของ Key-Value อาร์เรย์ของพวกเขาใช้เพื่อส่งพารามิเตอร์ที่จำเป็นไปยังบล็อก Navigate ทาง ตัวแบบประกอบด้วยคีย์ ( Key ) ซึ่งเป็นชื่อของพารามิเตอร์ (ในตัวอย่างนี้ ธีม และผู้แต่ง) รวมถึงค่า ( Value ) ชื่อโดยตรงของหัวข้อที่เลือก หรือชื่อของ ผู้เขียน).

โปรดทราบว่าไม่สามารถใช้อักขระหลายตัวใน URL รวมถึงอักขระเว้นวรรค ดังนั้น ชื่อที่เขียนว่า “ Frank Paulsen ” ใน URL จะถูกแปลงเป็น “ Frank%20Paulsen ” โดยอัตโนมัติ สามารถใช้บล็อกการ URL Encode URL และ 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 ที่เกี่ยวข้อง

มาตั้งค่ากระบวนการทางธุรกิจตามทริกเกอร์ 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 และพารามิเตอร์การค้นหา และกำหนดเนื้อหาของหน้าเป้าหมายแบบไดนามิกโดยขึ้นอยู่กับพารามิเตอร์เหล่านี้