Herhangi bir web sitesi veya web uygulaması oluşturmak, navigasyon olmadan neredeyse düşünülemez. Kullanıcılar sayfalar arasında gezinmeli, farklı site bölümleri açmalı ve çeşitli bilgiler almalıdır.

Sayfa verileri

Ancak navigasyonun kendisine bakmadan önce, genel olarak bir sayfa hakkında hangi bilgileri alabileceğinizi ve bir URL'nin nelerden oluşabileceğini anlamaya değer. Bunu yapmak için Get Current Page bloğunu kullanabilir ve hangi verileri ürettiğini görebilirsiniz.

  • URL - sayfanın her zamanki biçimindeki adresi. Örneğin - https://vdjyien-app.apms.io/admin/someurl/
  • Page - AppMaster iş süreçlerinde kullanılan sayfanın dahili tanımlayıcısı. 22 karakter, rastgele harfler ve rakamlardan oluşur.
  • Title - sayfa başlığı. İnsan tarafından okunabilir biçimdeki adı.
  • URL Params . Adresi kesin olarak sabit olmayan, değişken değerler de içeren bir sayfa oluşturulabilir. Örneğin, bir sayfa belirli bir bölümdeki makalelerin bir listesini görüntüleyebilir ve bu bölümün tanımlayıcısı URL'de parametre olarak belirtilir.
  • Query Params . Ek sorgu parametreleri URL'nin sonunda “?” işaretinden sonra yazılır. işaret. Örneğin, makale listesi içeren bir sayfa için “?_limit=12&lang=tr” parametreleri İngilizce olarak yalnızca 12 makalenin gerekli olduğunu gösterebilir.

Örneğin, blog makalelerinin listesini görüntüleyen bir sayfa düşünün. URL'si "/blog/:tema/:yazar" olarak verilir. “:” sembolü, kendisinden sonra belirtilen değerin bir parametre olduğunu gösterir. Parametre olarak, makalenin konusu (teması) ve yazarının (yazar) tanımlayıcılarını alır.

Bu sayfaya gitmek için iş sürecinde Navigate bloğunu kullanmanız gerekir.

Parametreler, Get Current Page bloğunda daha önce ayrıştırılanlara karşılık gelir. Bu durumda, sayfanın kendisi bir dahili tanımlayıcı olarak belirtildiğinden (sayfa listesinden seçebilirsiniz) sayfanın gerçek başlığı gezinme için önemli değildir.

Sayfada herhangi bir parametre yoksa gezinme son derece basit olabilir; sağlanan listeden istediğiniz sayfayı seçmeniz yeterlidir. Ancak bu örnekte Navigate bloğuna iletilmesi gereken parametreler var.

Belirli bir örnekte parametrelerin kullanımını düşünün. Bunu yapmak için ileride hedef sayfaya gitmemiz gereken yerden ayrı bir sayfa oluşturacağız. Bu sayfaya iki Select öğesi ekleyelim (biri konu listesinden seçim için, ikincisi yazar listesi için) ve bunları test değerleriyle dolduralım.

Bundan sonra, açılış sayfasına hangi gezinmenin çalışması gerektiğini tıklayarak Navigate düğmesi için bir iş akışı ayarlamanız gerekir. Bu süreç, Select bloklarından seçilen değerlerin alınmasıyla başlar.

Sonraki adım, Key-Value sanal modellerini doldurmaktır. Dizileri, gerekli parametreleri Navigate bloğuna iletmek için kullanılır. Modelin kendisi, parametrenin adı (bu örnekte tema ve yazar) ve değeri ( Value , seçilen konunun doğrudan adı veya konunun adı) olan bir anahtardan ( Key ) oluşur. yazar).

Lütfen URL'de boşluk karakteri dahil pek çok karakterin kullanılamayacağını unutmayın. Bu nedenle URL'de “ Frank Paulsen ” olarak yazılan bir isim otomatik olarak “ Frank%20Paulsen ” e dönüştürülecektir. URL Encode ve URL Decode blokları, URL standartlarını kodlamak ve kodunu çözmek için kullanılabilir. Bu örnekte, URL'nin daha fazla netliği ve güzelliği için, Replace string bloğunu kullanıyoruz ve adı " Frank-Paulsen " olarak sunarak boşluğu bağımsız olarak "-" işaretiyle değiştiriyoruz.

Son adım, oluşturulan anahtar/değer çiftlerini Navigate bloğuna bir parametre olarak iletmek üzere tek bir dizide birleştirmektir.

Şimdi butona tıkladığınızda https://vdjyien-app.apms.io/admin/blog/No-code/Frank-Paulsen/ sayfasına gideceksiniz.

URL'sinin hem sabit bir kısımdan (https://vdjyien-app.apms.io/admin/blog/) hem de üzerinde seçilen değerlerden oluşturulmuş bir değişkenden (No-code/Frank-Paulsen/) oluştuğunu doğrulayabilirsiniz. önceki sayfa

İçeriği yönetmek için URL parametrelerini kullanma

Sonraki görev, sayfanın içeriğini değiştirmek için alınan URL parametrelerini kullanmaktır. Bu parametreler, örneğin veritabanına bir GET isteği oluşturmak için kullanılabilir, ancak bizim örneğimizde, değerlerini sayfada göstereceğiz. Bunu yapmak için sayfaya karşılık gelen Label ile iki kapsayıcı ekleyelim.

Label birinde onShow tetikleyicisine dayalı bir iş süreci oluşturalım. Görevi, URL'yi ayrıştırmak, parametrelerini almak ve sayfada görüntülemek olacaktır. Bunu yapmak için Get Current Page bloğunu kullanırız ve bir döngüdeki her parametrenin değerini alırız.

Ardından, Switch bloğu aracılığıyla, parametrenin değerini alırız ve onu karşılık gelen Label gösteririz. Aynı zamanda Author parametresi için tersten “-” yerine boşluk koyacağız.

Artık belirli bir sayfaya giderken, yalnızca statik adresi değil, aynı zamanda sayfadaki içeriğin gerçek görüntüsünü etkileyen URL parametreleri de kullanılacaktır.

Sorgu parametrelerini kullanma

Hemen hemen aynı şekilde, sorgu parametreleri ( Query Params ) ekleyebilirsiniz. URL parametrelerinden temel farkları, isteğe bağlı olmalarıdır. Bu örnekte, URL zorunlu olarak sayfada hangi bilgilerin görüntülenmesi gerektiğine (hangi tematik bölüm ve hangi yazar) dair bir gösterge içerir ve ek parametreler gerekli açıklamaları yapar. Örneğin, sayfalandırmayı düzenlemek ve veritabanından tam olarak kaç kaydın sorgulanacağını ve çıktının hangi kayıttan başlatılacağını ayarlamak için limit ve offset parametrelerini kullanabilirsiniz.

Başlangıç sayfasına iki yeni alan ekleyelim - Input (Integer) . İçlerine limit ve offset parametrelerini yazacağız.

Gezinme butonu iş sürecine gerekli eklemeleri yapalım. limit ve offset değerleri ile bir Query Params dizisi oluşturalım.

Son adım, istek parametrelerinden bilgi içeren öğeler eklemek ve hedef sayfa için iş sürecini tamamlamaktır.

Sonuç, şöyle bir URL olmalıdır:

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

Uygulama, URL parametreleri ve sorgu parametreleri ile gezinmeyi gerçekleştirir ve bu parametrelere bağlı olarak hedef sayfanın içeriğini dinamik olarak belirler.

Was this article helpful?

AppMaster.io 101 Çarpışma Kursu

10 Modüller
2 haftalar

Nereden başlayacağınızdan emin değil misiniz? Yeni başlayanlar için hızlandırılmış kursumuzla başlayın ve AppMaster'ı A'dan Z'ye keşfedin.

Kursa Başlayın
Development it’s so easy with AppMaster!

Daha Fazla Yardıma mı ihtiyacınız var?

Herhangi bir sorunu uzmanlarımızın yardımıyla çözün. Zamandan tasarruf edin ve uygulamalarınızı oluşturmaya odaklanın.

headphones

İletişim desteği

Bize sorununuzu anlatın, size bir çözüm bulalım.

message

Topluluk Sohbeti

Soruları sohbetimizde diğer kullanıcılarla tartışın.

Topluluğa Katılın