登录UI自定义:制作定制的 Mendix 登录页面

657 阅读3分钟

image.png

介绍

作为 Mendix 开发人员,我们知道用户进入应用程序时获得的第一印象至关重要。尽管 Mendix 提供了高效且用户友好的默认登录页面,但在某些情况下您可能希望个性化此设计或添加特定的验证逻辑。这就是自定义登录页面出现的时候。本文将指导您在 Mendix 中创建深度定制的登录页面,并添加验证码验证和用​​户名等功能。

为什么要自定义登录页面?

默认的 Mendix 登录页面足以满足其用途,但它可能并不总能满足我们的所有需求。也许您希望登录页面与您的品牌标识更加一致,或者您可能需要在页面上合并其他元素或验证。自定义登录页面使您可以更好地控制用户的初始印象并提供无与伦比的用户体验。

image.png

详细流程如下:

  1. 页面配置:配置登录页面并使用Bing壁纸作为背景图片。
  2. 登录信息配置:配置页面的登录信息,包括租户ID、用户名、密码、验证码。
  3. 添加和配置登录微流程:在新创建的页面中,您需要添加一个数据视图并将其数据源设置为“微流程”。然后,创建一个新的 Microflow,负责验证用户输入的凭据。
  4. 添加输入字段和验证码功能:在数据视图中,添加与用户名、密码和验证码相对应的输入字段。对于验证码,您可以使用按钮触发微流来生成验证码并将其显示在页面上。
  5. 添加登录按钮:登录按钮的单击事件应触发 Microflow 来验证用户的输入。如果输入的用户名、密码和验证码正确,用户就能成功登录。

image.png

image.png

image.png

页面布局和 CSS

页面的架构和 CSS 样式对于用户体验非常重要。确保您的页面设计时尚且吸引人,引导用户轻松完成每个步骤。Mendix 提供一系列样式选项,使您能够根据您的品牌定制界面。

image.png

配置匿名用户角色

要允许未登录的用户访问您的登录页面,您需要在 Mendix 项目设置中为匿名用户角色分配权限。这允许他们访问您的自定义登录页面。

image.png

登录页面展示

到此阶段,您的自定义登录页面应该已准备好执行操作。通过在浏览器中访问 Mendix 应用程序的 URL,您应该能够与新的登录页面进行交互。通过输入用户名和密码来运行测试,检查验证码功能,并确认登录过程是否成功执行。

image.png

结论

本指南仅概述自定义登录页面的基础知识。Mendix 为开发人员提供了无限UI定制能力,允许您根据业务需求添加额外的功能和元素。无论是集成第三方身份验证还是提供“忘记密码”选项,您都可以使用 Mendix 轻松实现。通过深思熟虑的设计,您可以创造真正无与伦比的用户体验。

最后,热烈欢迎大家留言评论、参与讨论。如果您需要更详细的信息或有具体疑问,请随时询问。我们高度重视您的想法,并渴望从您的见解中学习,我们努力在这里创建一个互动学习社区。