웹 애플리케이션에서 매개변수로 탐색을 수행하는 방법

웹 사이트나 웹 응용 프로그램을 만드는 것은 탐색 없이는 거의 생각할 수 없습니다. 사용자는 페이지 사이를 탐색하고 다른 사이트 섹션을 열고 다양한 정보를 받아야 합니다.

페이지 데이터

그러나 탐색 자체를 살펴보기 전에 일반적으로 페이지에 대해 얻을 수 있는 정보와 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에는 공백 문자를 포함하여 많은 문자를 사용할 수 없습니다. 따라서 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 매개 변수를 작성합니다.