AI应用开发入门12：登录注册表单路由切换教程

大家好，我是小多。在前面的课程中，我们已经完成了登录表单和验证的搭建，包括数据库查询验证用户名和密码。这一次，我们的目标是创建一个注册表单，并与登录表单进行切换。我们将使用路由容器和页面组件来实现这个功能。现在，让我们开始吧！

AI应用开发入门12：登录注册表单路由切换教程

首先，我们在页面中增加一个路由容器，放在登录卡片的上方。这个路由容器不能单独使用，需要与路由的页面容器一起使用。所以，我们在路由容器下方再放两个页面组件，一个是登录页，一个是注册页。我们将登录页和注册页分别命名为“登录页”和“注册页”，并给它们设置路径。

接下来，我们需要将原来的登录卡片移动到登录页下面。我们可以直接将卡片拖动到登录页的容器内。现在我们有了登录页的卡片。

下一步是添加一个新的按钮，我们将它的文本设置为"去注册"。在按钮的类型方面，我们选择次按钮，它的默认选项就可以了。然后我们设置一下按钮的宽度和上边距，让它在页面上看起来更美观。

接下来，我们将复制这个登录卡片并粘贴到注册页。在注册页上，我们将按钮的文本改为"去登录"。这两个页面的设计就完成了。

但是，现在点击"去注册"和"去登录"按钮都没有任何效果，因为我们还没有为它们绑定事件。所以，下一步我们将为这两个按钮分别绑定事件。

首先，我们编辑“去登录”按钮的事件，打开流程，并添加一个函数定义。这个函数负责页面跳转。我们选择页面跳转的动作节点，编辑页面路径，使其指向登录页。然后，我们将这个函数复制到“去注册”按钮的事件中，并修改页面路径，使其指向注册页。

完成事件绑定后，我们需要进行一下重置。最后，我们去查看一下切换效果。点击“去注册”按钮，页面跳转到注册页；点击“去登录”按钮，页面跳转到登录页。至此，我们完成了今天的任务。

让我们回顾一下我们要完成的任务。

首先，我们要创建一个路由容器，然后在容器下添加两个路由页面：一个是登录页，另一个是注册页。然后，我们将原来的登录卡片移动到登录页下面，并添加了一个新的按钮，这个按钮的文本我们将设置为"去注册"。接下来，我们将复制这个登录卡片并粘贴到注册页，然后将按钮的文本改为"去登录"。

最后，我们将为这两个按钮绑定事件。当我们点击"去注册"按钮时，我们将跳转到注册页；当我们点击"去登录"按钮时，我们将跳转到登录页。这就是我们今天完成的任务。

下一节课，我们将完成注册后台接口的逻辑开发。请大家继续关注我们的多八多 AI 应用开发助手教程，感谢大家的支持！如果有任何问题，请在评论区留言，我会尽快为大家解答。再见！