Tạo bất kỳ trang web hoặc ứng dụng web nào gần như không thể tưởng tượng được nếu không có điều hướng. Người dùng phải điều hướng giữa các trang, mở các phần trang web khác nhau và nhận nhiều thông tin khác nhau.
dữ liệu trang
Nhưng trước khi xem xét bản thân điều hướng, bạn nên hiểu thông tin bạn có thể nhận được về một trang nói chung và URL có thể bao gồm những gì. Để làm điều này, bạn có thể sử dụng khối Get Current Page và xem nó tạo ra dữ liệu gì.
- URL - địa chỉ của trang ở dạng thông thường. Ví dụ: https://vdjyien-app.apms.io/admin/someurl/
- Page - mã định danh nội bộ của trang, được sử dụng trong các quy trình kinh doanh AppMaster . Nó bao gồm 22 ký tự, một tập hợp các chữ cái và số ngẫu nhiên.
- Title - tiêu đề trang. Tên của nó ở dạng con người có thể đọc được.
- URL Params . Một trang có thể được tạo sao cho địa chỉ của nó không cố định một cách nghiêm ngặt mà còn bao gồm các giá trị thay đổi. Ví dụ: một trang có thể hiển thị danh sách các bài viết trong một phần cụ thể và mã định danh của phần này chỉ được chỉ định trong URL dưới dạng tham số.
- Query Params . Các tham số truy vấn bổ sung được viết ở cuối URL sau dấu “?” dấu hiệu. Ví dụ: đối với một trang có danh sách các bài báo, tham số “?_limit=12&lang=en” có thể cho biết rằng chỉ cần có 12 bài viết bằng tiếng Anh.
Ví dụ: hãy tưởng tượng một trang hiển thị danh sách các bài viết trên blog. URL của nó được cung cấp dưới dạng “/blog/:theme/:author.” Ký hiệu “:” chỉ ra rằng giá trị được chỉ định sau nó là một tham số. Là tham số, nó nhận định danh chủ đề của bài viết (theme) và tác giả (tác giả).
Để điều hướng đến trang này, bạn cần sử dụng khối Navigate trong quy trình kinh doanh.
Các tham số tương ứng với những tham số đã được phân tích cú pháp trước đó trong khối Get Current Page . Trong trường hợp này, tiêu đề thực tế của trang không quan trọng đối với điều hướng vì bản thân trang được chỉ định làm mã định danh nội bộ (bạn có thể chọn từ danh sách các trang).
Nếu trang không có bất kỳ tham số nào, thì việc điều hướng có thể cực kỳ đơn giản; chỉ cần chọn trang mong muốn từ danh sách được cung cấp. Nhưng trong ví dụ này, có các tham số phải được chuyển đến khối Navigate .
Tạo một trang nguồn để điều hướng
Hãy xem xét việc sử dụng các tham số trên một ví dụ cụ thể. Để làm điều này, chúng tôi sẽ tạo một trang riêng biệt từ nơi chúng tôi sẽ cần truy cập trang mục tiêu trong tương lai. Hãy thêm hai phần tử Select vào trang này (một phần tử để chọn từ danh sách chủ đề, phần tử thứ hai dành cho danh sách tác giả) và điền vào chúng các giá trị kiểm tra.
Sau đó, bạn cần thiết lập quy trình làm việc cho nút Navigate bằng cách nhấp vào nút điều hướng nào đến trang đích sẽ hoạt động. Quá trình này bắt đầu bằng cách lấy các giá trị đã chọn từ các khối Select .
Bước tiếp theo là điền vào các mô hình ảo Key-Value . Mảng của chúng được sử dụng để truyền các tham số cần thiết cho khối Navigate . Bản thân mô hình bao gồm một khóa ( Key ), là tên của tham số (trong ví dụ này là chủ đề và tác giả), cũng như giá trị của nó ( Value , tên trực tiếp của chủ đề đã chọn hoặc tên của tác giả).
Xin lưu ý rằng nhiều ký tự không được sử dụng trong URL, kể cả ký tự khoảng trắng. Do đó, tên được viết là “ Frank Paulsen ” trong URL sẽ được tự động chuyển đổi thành “ Frank%20Paulsen ”. Các khối URL Encode URL Decode có thể được sử dụng để mã hóa và giải mã theo tiêu chuẩn URL. Trong ví dụ này, để URL rõ ràng và đẹp hơn, chúng tôi sử dụng khối Replace string và thay thế khoảng trắng một cách độc lập bằng dấu “-”, hiển thị tên là “ Frank-Paulsen ”.
Bước cuối cùng là hợp nhất các cặp khóa-giá trị đã tạo thành một mảng duy nhất để chuyển thành tham số cho khối Navigate .
Bây giờ, khi bạn nhấp vào nút, bạn sẽ chuyển đến trang https://vdjyien-app.apms.io/admin/blog/No-code/Frank-Paulsen/
Bạn có thể xác minh rằng URL của nó bao gồm cả phần cố định (https://vdjyien-app.apms.io/admin/blog/) và một biến (No-code/Frank-Paulsen/) được hình thành từ các giá trị được chọn trên trang trước.
Sử dụng tham số URL để quản lý nội dung
Nhiệm vụ tiếp theo là sử dụng các tham số URL nhận được để thay đổi nội dung của trang. Ví dụ, các tham số này có thể được sử dụng để tạo một yêu cầu GET tới cơ sở dữ liệu, nhưng trong ví dụ của chúng tôi, chúng tôi sẽ chỉ hiển thị giá trị của chúng trên trang. Để làm điều này, hãy thêm hai vùng chứa vào trang có Label tương ứng.
Hãy thiết lập quy trình kinh doanh dựa trên trình kích hoạt onShow ở một trong các Label . Nhiệm vụ của nó sẽ là phân tích cú pháp URL, lấy các tham số của nó và hiển thị nó trên trang. Để thực hiện việc này, chúng tôi sử dụng khối Get Current Page và nhận giá trị của từng tham số trong một vòng lặp.
Tiếp theo, thông qua khối Switch , chúng ta lấy giá trị của tham số và hiển thị trong Label tương ứng. Đồng thời, đối với tham số Author , chúng ta sẽ thay thế ngược lại “-” bằng khoảng trắng.
Giờ đây, khi điều hướng đến một trang nhất định, không chỉ địa chỉ tĩnh của trang đó sẽ được sử dụng mà cả các tham số URL ảnh hưởng đến việc hiển thị nội dung thực tế trên trang.
Sử dụng tham số truy vấn
Theo cách gần giống như vậy, bạn có thể thêm các tham số truy vấn ( Query Params ). Sự khác biệt chính của chúng so với các tham số URL là chúng là tùy chọn. Trong ví dụ này, URL nhất thiết phải bao gồm chỉ báo về thông tin nào sẽ được hiển thị trên trang (phần chủ đề nào và tác giả nào) và các tham số bổ sung làm rõ cần thiết. Ví dụ: bạn có thể sử dụng các tham số limit và offset để tổ chức phân trang và đặt chính xác số lượng bản ghi cần truy vấn từ cơ sở dữ liệu và từ bản ghi nào để bắt đầu xuất.
Hãy thêm hai trường mới vào trang bắt đầu - Input (Integer) . Chúng tôi sẽ viết các tham số limit và offset trong đó.
Hãy thực hiện những bổ sung cần thiết cho quy trình kinh doanh nút điều hướng. Hãy tạo một mảng Tham số Query Params với các giá trị limit và giá trị offset .
Bước cuối cùng là thêm các yếu tố có thông tin từ các tham số yêu cầu, cũng như hoàn tất quy trình kinh doanh cho trang mục tiêu.
Kết quả phải là một URL như thế này:
https://vdjyien-app.apms.io/admin/blog/No-code/Frank-Paulsen/?offset=0&limit=12
Ứng dụng thực hiện điều hướng với các tham số URL và tham số truy vấn và tự động xác định nội dung của trang đích tùy thuộc vào các tham số này.
