创建任何网站或网络应用,如果没有导航,几乎是不可想象的。用户必须在页面之间进行导航,打开不同的网站部分,并接收各种信息。

页面数据

但在研究导航本身之前,值得了解的是,你可以得到关于一个页面的一般信息,以及一个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"。符号": "表示它后面指定的值是一个参数。作为参数,它需要文章的主题(theme)和作者(author)的标识符。

要导航到这个页面,你需要使用 Navigate业务流程中的块。

这些参数对应于先前在 Get Current Page块中解析的参数。在这种情况下,页面的实际标题对导航来说并不重要,因为页面本身被指定为一个内部标识符(你可以从页面列表中选择它)。

如果该页面没有任何参数,那么导航就会非常简单;只需从提供的列表中选择所需的页面。但是在这个例子中,有一些参数必须传递给 Navigate块。

创建一个用于导航的源页面

考虑在一个具体的例子上使用参数。为了做到这一点,我们将创建一个单独的页面,将来我们需要从这里进入目标页面。让我们在这个页面上添加两个 Select元素(一个用于从主题列表中选择,另一个用于作者列表),并用测试值填充它们。

之后,你需要为这个 Navigate按钮设置一个工作流程,点击这个按钮就可以导航到着陆页。这个过程的开始是通过从 Select块中获取选定的值。

下一步是填入 Key-Value虚拟模型。它们的数组被用来将必要的参数传递给 Navigate块。模型本身由一个键(Key),它是参数的名称(在这个例子中,主题和作者),以及它的值(Value,所选主题的直接名称,或作者的名字)。

请注意,许多字符不能在URL中使用,包括空格字符。因此,在URL中写成"Frank Paulsen"的名字将被自动转换为"Frank%20Paulsen"。 URL EncodeURL 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必然包括指示哪些信息应该显示在页面上(哪个主题部分和哪个作者),而额外的参数则做出必要的澄清。例如,你可以使用limitoffset 参数来组织分页,并准确设置从数据库中查询多少条记录,以及从哪条记录开始输出。

让我们在起始页中添加两个新的字段-- Input (Integer).我们将在其中写入limitoffset 参数。

让我们对导航按钮的业务流程做必要的补充。让我们形成一个数组 Query Paramslimitoffset 的值。

最后一步是用请求参数的信息添加元素,以及完成目标页面的业务流程。

结果应该是这样的一个URL。

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

该应用程序用URL参数和查询参数实现导航,并根据这些参数动态地确定目标页面的内容。

Was this article helpful?

AppMaster.io 101 速成班

10 模块
2 周数

不知道从哪里开始?通过我们的初学者速成课程,从A到Z探索AppMaster。

开始课程
Development it’s so easy with AppMaster!

需要更多帮助?

在我们专家的帮助下解决任何问题。节省时间并专注于构建您的应用程序。

headphones

联系支持

告诉我们您的问题,我们会为您找到解决方案。

message

社区聊天

在我们的聊天中与其他用户讨论问题。

加入社区