Mendix - 最简易方法自定义登录界面
精华
乌嗯乌嗯文
2021.06.21 16:37发布于通用
2.31k4
有需求,就会有解决方案。

🐸解决思路:

1,利用修改原生登录文件login.html(本文推荐)。

2,开放游客访问权限,通过调用指定微流判断过程指向,达到登录效果(不推荐,可依据情况适用)。

 

🐸版本:9.0.5(不支持时还请查看使用版本是否有调整等)

 

🐸解决步骤:

1,找到项目的登录文件。项目名/theme/login.html。

2,将<div class="loginpage">内容清空(注意备份)或注释掉。添加以下代码:

<div>
     <form id="loginForm" autocomplete="off">
         <input type="text" name="" id="usernameInput">
         <input type="password" name="" id="passwordInput">
         <button id="loginButton" type="submit">Sign in</button>
      </form>
</div>

3,找到 login.js 文件,一般存放在 deployment.js/web/js 下面,将该文件夹复制到 theme 文件夹下

4,编辑 login.js 文件,需要修改部分逻辑:

// 确保能获取到关键值(登录框,账号,密码,登录按钮)
var loginForm = byId("loginForm");
var usernameInput = byId("usernameInput");
var passwordInput = byId("passwordInput");
var loginButton = byId("loginButton");
// 确保发送登录请求时的值为我们的账号和密码
var xhr = new XMLHttpRequest(),
var json = JSON.stringify({
     action: "login",
     params: {
           username: usernameInput.value,
           password: passwordInput.value
     }
});
// 在该文件中,还存在部分不需要的东西,可以按照情况注释掉即可

5,重启项目,此时该登录门户中只包含基础的架构,开发者们可以依据情况自行更改和布局。

 

 

qrcode_for_gh_aaddf72a9aaf_258.jpg

红猪、peekaboo
点赞
收藏
手机查看
举报
4个评论
倒序看帖
仅看楼主
    红猪
    2021.06.21 17:23 发布
    #1

    最后这是您的个人微信吗

    首赞
    评论
    举报
    乌嗯乌嗯文
    评论
    红猪
    2021.06.21 17:27 发布
    作者

    不是。。刚建的一个公众号😅

    首赞
    评论
    举报
    红猪
    评论
    乌嗯乌嗯文
    2021.06.21 17:28 发布

    关注你了偶

    首赞
    评论
    举报
    xg
    2023.08.21 18:19 发布
    #2
    如果实现sso是要改哪里的代码
    首赞
    评论
    举报