历史版本24 :登录页 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 描述编辑
登录网页是指输入用户名密码登录系统页面。
自定义登录网页包括登录页插件和设置登录网页,如下图:
2. 登录页面插件 编辑
2.1 登录标题
登录标题可以自定义,修改后,点击保存按钮即可,如下图:
2.2 背景图片
若不需要调整整体登录界面格式,只需要修改背景,选择
,点击图片上传按钮,上传背景图片,然后点击保存按钮即可,如下图:注:自定义登陆界面的图片是有大小限制的,不小于1024*768。
注:此处背景图片的修改仅对PC端生效,移动端则需要通过主题插件进行修改。
3. 设置登录网页编辑
3.1 更改登录网页
若不希望使用内置的登陆界面,想自定义一个网页作为登陆界面,请选择
完全自定义登录界面,如下图:注:将login.html放在相对路径,即%FR_HOME%/webroot目录下
注:文本框里输入自定义页面的地址,如果在同一个工程下面可以用相对路径,如果在不同工程下跨域使用,请使用http://ip:port/工程名/这种形式
login.html页面的代码如下:
<html lang="zh-CN"><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 class="container">
<form class="login-box" action="" method="post" onsubmit="return false;">
<h2>数据决策系统</h2>
<div class="login-item">
<label for="inputUsername" class="sr-only">用户名</label>
<input type="text" id="inputUsername" class="form-control" placeholder="用户名" required="" autofocus="">
</div>
<div class="login-item">
<label for="inputPassword" class="sr-only">密码</label>
<input type="password" id="inputPassword" class="form-control" 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开头的字段数值来解决,默认数据如下图所示:
修改相应的字段,然后重启服务器即可。