登录页

编辑
  • 文档创建者:文档助手1
  • 浏览次数:9636次
  • 编辑次数:35次
  • 最近更新:童海海 于 2019-06-06
  • 1. 描述

    登录页是指输入用户名密码登录系统页面,如图所示:

    自定义登录页包括登录页插件和设置登录网页,如下图:



    2. 登录页面插件 

    2.1 登录页插件设置

    登录数据决策系统,选择管理系统>外观配置>登录页,对如下内容进行设置:

    登录方式选择登录页插件
    登录标题自定义设置
    登录logo点击上传按钮,上传自定义 logo
    登录风格默认,安装插件后可以切换
    登录主题色点击按钮选择颜色
    背景图片点击上传按钮,上传自定义图片

    设置如下图所示:


    注:修改登录主题色,即修改遮罩颜色、登录按钮、图标等颜色。 

    注:登录主题色应用于 2019-5-20 及以后的 JAR 文件。


    2.2 修改前后效果对比展示

    登录页插件内容更改前后效果展示,如下图:


    2.3 登陆页面还原设置

    登录页面插件设置暂不支持还原设置,如需还原请登录数据决策系统,对登录页插件进行如下设置:

    1)登录标题:数据决策系统

    2)登录 logo(右击可保存默认 logo):logo.png

    3)登录主题色:RGB(54, 133, 242,)

    4)登录背景(右击可保存默认背景图片):

    设置如下图:


    3. 设置登录网页

    3.1 更改登录网页

    若不希望使用内置的登录界面,想自定义一个网页作为登录界面,请选择设置登录网页完全自定义登录界面,如下图:



    注:将 login.html 放在相对路径,即%FR_HOME%/webroot目录下

    注:文本框里输入自定义页面的地址,如果在同一个工程下面可以用相对路径,如果在不同工程下跨域使用,请使用http://ip:port/工程名/这种形式

    login.html 页面的代码如下:


    <html><head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>登录Demo</title>
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <style>
            .container {
                display: flex;
                justify-content: center;
            }
            .login-box {
                width: 300px;
                margin-top: 100px;
            }
            .login-box h2 {
                font-size: 26px;
                text-align: center;
                margin-bottom: 25px;
            }
            .login-item {
                margin-bottom: 20px;
            }
        </style>
    <body>
    <div>
        <form action="" method="post" onsubmit="return false;">
            <h2>数据决策系统</h2>
            <div>
                <label for="inputUsername">用户名</label>
                <input type="text" id="inputUsername" placeholder="用户名" required="" autofocus="">
            </div>
            <div>
                <label for="inputPassword">密码</label>
                <input type="password" id="inputPassword" placeholder="密码" required="">
            </div>
            <button class="btn btn-lg btn-primary btn-block" type="submit" id="submitBtn">登录</button>
        </form>
    </div>
    <script>
        document.getElementById("submitBtn").addEventListener("click", function () {
            var username = document.getElementById("inputUsername").value.trim();
            var password = document.getElementById("inputPassword").value.trim();
            if (username === "") {
                window.alert("请输入用户名");
                return false;
            }
            if (password === "") {
                window.alert("请输入密码");
                return false;
            }
            var xhr = new XMLHttpRequest();
            // 登录API
            xhr.open("post", "http://localhost:8075/webroot/decision/login");
            xhr.setRequestHeader("Content-type","application/json");
            // 登录参数
            xhr.send(JSON.stringify({
                username: username,
                password: password,
                validity: -1
            }));
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var v = JSON.parse(xhr.responseText).data;
                    if (v) {
                        // 保存token并跳转到对应链接
                        addCookie("fine_auth_token", v.accessToken, "/", -1);
                        window.top.location.href = v.url;
                    } else {
                        window.alert(JSON.parse(xhr.responseText).errorMsg);
                    }
                }
            };
            return false;
        });
        function addCookie (name, value, path, expiresHours) {
            var cookieString = name + "=" + escape(value);
            if (expiresHours && expiresHours > 0) {
                var date = new Date();
                date.setTime(BI.getTime() + expiresHours * 3600 * 1000);
                cookieString = cookieString + "; expires=" + date.toGMTString();
            }
            if (path) {
                cookieString = cookieString + "; path=" + path;
            }
            document.cookie = cookieString;
        }
    </script>
    </body></html>

    代码详情解释请查看 自定义登录界面

    注:如果自定义登录页面和报表工程不在同一个域内,即要跨域,那么,自定义登录页面就需要进行 单点登录

    3.2 效果查看

    点击保存,登出系统,看到的自定义登录页面如下图:


    此页面是代替原有的数据决策系统的登录页面,如需要集成自己企业的登录页面需要进行单点登录或过滤机制。

    4. 其他说明

    若修改之后想要恢复默认设置,则通过修改 FineDB 中 FINE_CONF_ENTITY 表中以 AppearanceConfig.xxx 开头的字段数值来解决,默认数据如下图所示:


    详细修改方式  还原登录网页设置


    附件列表


    主题: 数据决策系统
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]