La creazione di un sito o di un'applicazione web è quasi impensabile senza la navigazione. Gli utenti devono navigare tra le pagine, aprire diverse sezioni del sito e ricevere varie informazioni.
Dati della pagina
Ma prima di esaminare la navigazione in sé, vale la pena di capire quali informazioni si possono ottenere su una pagina in generale e in cosa può consistere un URL. Per farlo, si può usare il blocco Get Current Page e vedere quali dati produce.
- URL - l'indirizzo della pagina nella sua forma abituale. Ad esempio - https://vdjyien-app.apms.io/admin/someurl/
- Page - l'identificatore interno della pagina, che viene utilizzato nei processi aziendali di AppMaster. È composto da 22 caratteri, un insieme casuale di lettere e numeri.
- Title - titolo della pagina. Il nome della pagina nella forma leggibile dall'uomo.
- URL Params. Una pagina può essere creata in modo che il suo indirizzo non sia strettamente fisso, ma includa anche valori variabili. Ad esempio, una pagina può visualizzare un elenco di articoli in una sezione specifica, e l'identificatore di questa sezione è semplicemente indicato nell'URL come parametro.
- Query Params. Ulteriori parametri di query sono scritti alla fine dell'URL dopo il segno "?". Ad esempio, per una pagina con un elenco di articoli, i parametri "?_limit=12&lang=en" potrebbero indicare che sono richiesti solo 12 articoli in inglese.
Immaginiamo, ad esempio, una pagina che mostra un elenco di articoli di un blog. Il suo URL è "/blog/:tema/:autore". Il simbolo ":" indica che il valore specificato dopo di esso è un parametro. Come parametri, accetta gli identificatori dell'argomento dell'articolo (tema) e del suo autore (autore).
Per navigare in questa pagina, è necessario utilizzare il blocco Navigate nel processo aziendale.
I parametri corrispondono a quelli analizzati in precedenza nel blocco Get Current Page blocco. In questo caso, il titolo effettivo della pagina non è importante per la navigazione, poiché la pagina stessa è specificata come identificatore interno (è possibile selezionarla dall'elenco delle pagine).
Se la pagina non ha parametri, la navigazione può essere estremamente semplice: basta selezionare la pagina desiderata dall'elenco fornito. Ma in questo esempio, ci sono dei parametri che devono essere passati al blocco Navigate al blocco.
Creare una pagina di origine per la navigazione
Consideriamo l'uso dei parametri in un esempio specifico. A tale scopo, creeremo una pagina separata da cui in futuro dovremo andare alla pagina di destinazione. Aggiungiamo due elementi Select a questa pagina (uno per la selezione dall'elenco degli argomenti, il secondo per l'elenco degli autori) e riempiamoli con i valori di prova.
Successivamente, è necessario impostare un flusso di lavoro per il pulsante Navigate cliccando sul quale la navigazione verso la pagina di destinazione deve funzionare. Questo processo inizia ottenendo i valori selezionati dai blocchi Select blocchi.
Il passo successivo è il popolamento dei Key-Value modelli virtuali. Il loro array viene utilizzato per passare i parametri necessari al blocco Navigate blocco. Il modello stesso è composto da una chiave (Key), che è il nome del parametro (in questo esempio, tema e autore), così come il suo valore (Valueil nome diretto dell'argomento selezionato o il nome dell'autore).
Si noti che molti caratteri non possono essere utilizzati nell'URL, compreso il carattere spazio. Pertanto, un nome scritto come "Frank Paulsen" nell'URL sarà automaticamente convertito in "Frank%20Paulsen". URL Encode e URL Decode possono essere usati per codificare e decodificare secondo gli standard degli URL. In questo esempio, per una maggiore chiarezza e bellezza dell'URL, utilizziamo il blocco Replace string e sostituiamo autonomamente lo spazio con il segno "-", presentando il nome come "Frank-Paulsen".
Il passo finale consiste nell'unire le coppie chiave-valore generate in un unico array da passare come parametro al blocco Navigate blocco.
Ora, facendo clic sul pulsante, si accede alla pagina https://vdjyien-app.apms.io/admin/blog/No-code/Frank-Paulsen/.
È possibile verificare che il suo URL è composto da una parte costante (https://vdjyien-app.apms.io/admin/blog/) e da una variabile (No-code/Frank-Paulsen/) formata dai valori selezionati nella pagina precedente.
Utilizzo dei parametri URL per gestire i contenuti
Il compito successivo è quello di utilizzare i parametri URL ricevuti per modificare il contenuto della pagina. Questi parametri possono essere utilizzati, ad esempio, per formulare una richiesta al database. GET al database, ma nel nostro esempio, ci limiteremo a visualizzare il loro valore sulla pagina. A tale scopo, aggiungiamo due contenitori alla pagina con il corrispondente Label.
Impostiamo un processo aziendale basato sul trigger onShow in uno dei contenitori Label. Il suo compito sarà quello di analizzare l'URL, ottenere i suoi parametri e visualizzarli sulla pagina. Per farlo, utilizziamo il blocco Get Current Page e otteniamo il valore di ogni parametro in un ciclo.
Successivamente, attraverso il blocco Switch otteniamo il valore del parametro e lo visualizziamo nella pagina corrispondente. Label. Allo stesso tempo, per il parametro Author, sostituiamo "-" con uno spazio.
Ora, quando si naviga verso una determinata pagina, non verrà utilizzato solo il suo indirizzo statico, ma anche i parametri URL che influenzano l'effettiva visualizzazione dei contenuti della pagina.
Utilizzo dei parametri di query
In modo pressoché analogo, è possibile aggiungere parametri di query (Query Params). La loro differenza principale rispetto ai parametri URL è che sono opzionali. In questo esempio, l'URL include necessariamente un'indicazione di quali informazioni devono essere visualizzate nella pagina (quale sezione tematica e quale autore), e i parametri aggiuntivi forniscono i chiarimenti necessari. Ad esempio, si possono usare i parametri limit e offset per organizzare la paginazione e impostare esattamente quanti record interrogare dal database e da quale record iniziare l'output.
Aggiungiamo due nuovi campi alla pagina iniziale - Input (Integer). In essi scriveremo i parametri limit e offset.
Facciamo le aggiunte necessarie al processo aziendale del pulsante di navigazione. Formiamo un array di Query Params con i valori limit e offset.
L'ultimo passo consiste nell'aggiungere elementi con le informazioni dei parametri di richiesta e nel completare il processo di business per la pagina di destinazione.
Il risultato dovrebbe essere un URL come questo:
https://vdjyien-app.apms.io/admin/blog/No-code/Frank-Paulsen/?offset=0&limit=12
L'applicazione implementa la navigazione con parametri URL e parametri di query e determina dinamicamente il contenuto della pagina di destinazione in base a questi parametri.
