Tenlion/wg-basic
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善登录界面逻辑，新增登录页面预览

Browse Source
This commit is contained in:
wanggeng 2021-07-30 14:21:11 +08:00
parent 29e9184254
commit 4e8781d5e1
9 changed files with 288 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
login-base/src/main/java/ink/wgink/login/base/consts/IUserCenterConst.java
View File

@ -89,5 +89,13 @@ public interface IUserCenterConst {
* 菜单模式
*/
String MENU_MODE = "menuMode";
/**
* 页面参数
*/
String PAGE_PARAMS = "pageParams";
/**
* 自定义表单
*/
String CUSTOM_LOGIN_FORM = "customLoginForm";
}

44
login-base/src/main/java/ink/wgink/login/base/controller/route/OAuthRouteController.java
View File

@ -2,10 +2,8 @@ package ink.wgink.login.base.controller.route;
import ink.wgink.interfaces.consts.ISystemConstant;
import ink.wgink.login.base.consts.IUserCenterConst;
import ink.wgink.login.base.manager.ConfigManager;
import ink.wgink.login.base.service.IOAuthService;
import ink.wgink.login.base.service.login.ILoginFormService;
import ink.wgink.properties.BaseProperties;
import ink.wgink.properties.ServerProperties;
import ink.wgink.util.verification.code.Captcha;
import ink.wgink.util.verification.code.GifCaptcha;
import ink.wgink.util.verification.code.SpecCaptcha;
@ -22,7 +20,6 @@ import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
/**
@ -40,9 +37,7 @@ import java.util.Map;
public class OAuthRouteController {
@Autowired
private ServerProperties serverProperties;
@Autowired
private BaseProperties baseProperties;
private IOAuthService oAuthService;
@Autowired
private ILoginFormService loginFormService;
@ -54,38 +49,9 @@ public class OAuthRouteController {
@GetMapping("login")
public ModelAndView login(HttpServletRequest request) {
ModelAndView mv = new ModelAndView();
Map<String, Object> config = ConfigManager.getInstance().getConfig();
Map<String, Object> pageParams = new HashMap<>(16);
pageParams.put(IUserCenterConst.ERROR_MESSAGE, request.getSession().getAttribute(IUserCenterConst.ERROR_MESSAGE));
// 服务地址
pageParams.put(IUserCenterConst.SERVER_URL, serverProperties.getUrl());
// 系统LOGO
pageParams.put(IUserCenterConst.SYSTEM_LOGO, config.get(IUserCenterConst.SYSTEM_LOGO).toString());
// 背景图片
pageParams.put(IUserCenterConst.LOGIN_BACKGROUND_IMAGES, config.get(IUserCenterConst.LOGIN_BACKGROUND_IMAGES).toString());
// 系统标题
pageParams.put(IUserCenterConst.SYSTEM_TITLE, config.get(IUserCenterConst.SYSTEM_TITLE).toString());
// 系统标题大小，默认26
pageParams.put(IUserCenterConst.SYSTEM_TITLE_SIZE, Integer.parseInt(config.get(IUserCenterConst.SYSTEM_TITLE_SIZE).toString()));
// 系统子标题
pageParams.put(IUserCenterConst.SYSTEM_SUB_TITLE, config.get(IUserCenterConst.SYSTEM_SUB_TITLE).toString());
// 系统子标题大小，默认16
pageParams.put(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE, Integer.parseInt(config.get(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE).toString()));
// 版权年份
pageParams.put(IUserCenterConst.COPY_RIGHT_YEAR, config.get(IUserCenterConst.COPY_RIGHT_YEAR).toString());
// 版权所属
pageParams.put(IUserCenterConst.COPY_LEFT, config.get(IUserCenterConst.COPY_LEFT).toString());
// 官方链接
pageParams.put(IUserCenterConst.OFFICIAL_URL, config.get(IUserCenterConst.OFFICIAL_URL).toString());
// 开启验证码
pageParams.put(ISystemConstant.VERIFICATION_CODE, config.get(ISystemConstant.VERIFICATION_CODE).toString());
// 登录框位置
pageParams.put(IUserCenterConst.LOGIN_BOX_POSITION, config.get(IUserCenterConst.LOGIN_BOX_POSITION).toString());
// 登录表单action
pageParams.put(IUserCenterConst.LOGIN_FORM_ACTION, baseProperties.getLoginProcess().startsWith("/") ? baseProperties.getLoginProcess().substring(1) : baseProperties.getLoginProcess());
mv.addObject("pageParams", pageParams);
mv.addObject("customLoginForm", loginFormService.getActive());
Map<String, Object> pageParams = oAuthService.getPageParams(request);
mv.addObject(IUserCenterConst.PAGE_PARAMS, pageParams);
mv.addObject(IUserCenterConst.CUSTOM_LOGIN_FORM, loginFormService.getActive());
mv.setViewName("login");
return mv;
}

21
login-base/src/main/java/ink/wgink/login/base/controller/route/login/LoginFormRouteController.java
View File

@ -1,12 +1,19 @@
package ink.wgink.login.base.controller.route.login;
import ink.wgink.interfaces.consts.ISystemConstant;
import ink.wgink.login.base.consts.IUserCenterConst;
import ink.wgink.login.base.service.IOAuthService;
import ink.wgink.login.base.service.login.ILoginFormService;
import io.swagger.annotations.Api;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import javax.servlet.http.HttpServletRequest;
/**
* @ClassName: LoginFormRouteController
* @Description: 登录form
@ -19,6 +26,11 @@ import org.springframework.web.servlet.ModelAndView;
@RequestMapping(ISystemConstant.ROUTE_PREFIX + "/login-form")
public class LoginFormRouteController {
@Autowired
private IOAuthService oauthService;
@Autowired
private ILoginFormService loginFormService;
@GetMapping("save")
public ModelAndView save() {
return new ModelAndView("login/form/save");
@ -34,4 +46,13 @@ public class LoginFormRouteController {
return new ModelAndView("login/form/list");
}
@GetMapping("get-login-preview/{loginFormId}")
public ModelAndView getLoginPreview(@PathVariable("loginFormId") String loginFormId, HttpServletRequest request) {
ModelAndView mv = new ModelAndView("login/form/get-login-preview");
mv.addObject(IUserCenterConst.PAGE_PARAMS, oauthService.getPageParams(request));
mv.addObject(IUserCenterConst.CUSTOM_LOGIN_FORM, loginFormService.get(loginFormId));
mv.setViewName("login/form/get-login-preview");
return mv;
}
}

16
login-base/src/main/java/ink/wgink/login/base/service/IOAuthService.java Normal file
View File

@ -0,0 +1,16 @@
package ink.wgink.login.base.service;
import javax.servlet.http.HttpServletRequest;
import java.util.Map;
/**
* @ClassName: IOAuthService
* @Description: oauth认证
* @Author: wanggeng
* @Date: 2021/7/30 10:56 上午
* @Version: 1.0
*/
public interface IOAuthService {
Map<String, Object> getPageParams(HttpServletRequest request);
}

64
login-base/src/main/java/ink/wgink/login/base/service/impl/OAuthServiceImpl.java Normal file
View File

@ -0,0 +1,64 @@
package ink.wgink.login.base.service.impl;
import ink.wgink.interfaces.consts.ISystemConstant;
import ink.wgink.login.base.consts.IUserCenterConst;
import ink.wgink.login.base.manager.ConfigManager;
import ink.wgink.login.base.service.IOAuthService;
import ink.wgink.properties.BaseProperties;
import ink.wgink.properties.ServerProperties;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import javax.servlet.http.HttpServletRequest;
import java.util.HashMap;
import java.util.Map;
/**
* @ClassName: OAuthServiceImpl
* @Description: Oauth认证
* @Author: wanggeng
* @Date: 2021/7/30 10:57 上午
* @Version: 1.0
*/
@Service
public class OAuthServiceImpl implements IOAuthService {
@Autowired
private ServerProperties serverProperties;
@Autowired
private BaseProperties baseProperties;
@Override
public Map<String, Object> getPageParams(HttpServletRequest request) {
Map<String, Object> config = ConfigManager.getInstance().getConfig();
Map<String, Object> pageParams = new HashMap<>(16);
pageParams.put(IUserCenterConst.ERROR_MESSAGE, request.getSession().getAttribute(IUserCenterConst.ERROR_MESSAGE));
// 服务地址
pageParams.put(IUserCenterConst.SERVER_URL, serverProperties.getUrl());
// 系统LOGO
pageParams.put(IUserCenterConst.SYSTEM_LOGO, config.get(IUserCenterConst.SYSTEM_LOGO).toString());
// 背景图片
pageParams.put(IUserCenterConst.LOGIN_BACKGROUND_IMAGES, config.get(IUserCenterConst.LOGIN_BACKGROUND_IMAGES).toString());
// 系统标题
pageParams.put(IUserCenterConst.SYSTEM_TITLE, config.get(IUserCenterConst.SYSTEM_TITLE).toString());
// 系统标题大小，默认26
pageParams.put(IUserCenterConst.SYSTEM_TITLE_SIZE, Integer.parseInt(config.get(IUserCenterConst.SYSTEM_TITLE_SIZE).toString()));
// 系统子标题
pageParams.put(IUserCenterConst.SYSTEM_SUB_TITLE, config.get(IUserCenterConst.SYSTEM_SUB_TITLE).toString());
// 系统子标题大小，默认16
pageParams.put(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE, Integer.parseInt(config.get(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE).toString()));
// 版权年份
pageParams.put(IUserCenterConst.COPY_RIGHT_YEAR, config.get(IUserCenterConst.COPY_RIGHT_YEAR).toString());
// 版权所属
pageParams.put(IUserCenterConst.COPY_LEFT, config.get(IUserCenterConst.COPY_LEFT).toString());
// 官方链接
pageParams.put(IUserCenterConst.OFFICIAL_URL, config.get(IUserCenterConst.OFFICIAL_URL).toString());
// 开启验证码
pageParams.put(ISystemConstant.VERIFICATION_CODE, config.get(ISystemConstant.VERIFICATION_CODE).toString());
// 登录框位置
pageParams.put(IUserCenterConst.LOGIN_BOX_POSITION, config.get(IUserCenterConst.LOGIN_BOX_POSITION).toString());
// 登录表单action
pageParams.put(IUserCenterConst.LOGIN_FORM_ACTION, baseProperties.getLoginProcess().startsWith("/") ? baseProperties.getLoginProcess().substring(1) : baseProperties.getLoginProcess());
return pageParams;
}
}

8
login-base/src/main/resources/templates/login.html
View File

@ -8,6 +8,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="icon" type="image/ico" href="assets/favicon.ico"/>
<link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css?v=3" media="all">
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css?v=3" media="all">
<link rel="stylesheet" href="assets/css/supersized.css?v=3">
@ -66,7 +67,7 @@
</div>
<div class="layui-col-xs5">
<div style="margin-left: 10px;">
<img src="oauth/verification-code/png" class="layadmin-user-login-codeimg" id="LAY-user-get-vercode">
<img src="oauth/verification-code/png" class="layadmin-user-login-codeimg" @click="refreshVerificationCode($event)">
</div>
</div>
</div>
@ -157,6 +158,10 @@
slides : photos
});
},
// 刷新验证码
refreshVerificationCode: function(event) {
event.target.src = event.target.src;
},
// 记住我
rememberMe: function() {
var self = this;
@ -195,7 +200,6 @@
// 复选框勾选事件
form.on('checkbox(rememberFilter)', function(data) {
self.formData.remember = data.elem.checked;
console.log(self.formData.remember);
});
// 保单验证
form.verify({

155
login-base/src/main/resources/templates/login/form/get-login-preview.html Normal file
View File

@ -0,0 +1,155 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<base th:href="${#request.getContextPath() + '/'}">
<title th:text="${systemTitle}"></title>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="icon" type="image/ico" href="assets/favicon.ico"/>
<link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css?v=3" media="all">
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css?v=3" media="all">
<link rel="stylesheet" href="assets/css/supersized.css?v=3">
<link rel="stylesheet" href="assets/layuiadmin/style/login.css?v=3" media="all">
<style th:utext="${customLoginForm.formCss}"></style>
<style th:if="${pageParams.loginBoxPosition eq 'left'}" th:utext="${customLoginForm.formLeftCss}"></style>
<style th:if="${pageParams.loginBoxPosition eq 'center'}" th:utext="${customLoginForm.formCenterCss}"></style>
<style th:if="${pageParams.loginBoxPosition eq 'default'}" th:utext="${customLoginForm.formRightCss}"></style>
</head>
<body>
<div id="app">
<div v-cloak th:if="${customLoginForm ne null}" th:utext="${customLoginForm.formHtml}"></div>
</div>
<script type="text/javascript" src="assets/js/vue.min.js"></script>
<script type="text/javascript" src="assets/layuiadmin/layui/layui.js"></script>
<script type="text/javascript" th:inline="javascript">
layui.config({
base: 'assets/layuiadmin/'
}).extend({
index: 'lib/index'
}).use(['index', 'form', 'cookie', 'md5', 'base64', 'supersized', 'common', 'ftukey', 'restajax'], function () {
var $ = layui.$;
var form = layui.form;
var layer = layui.layer;
var cookie = layui.cookie;
var md5 = layui.md5;
var base64 = layui.base64;
new Vue({
el: '#app',
data: {
pageParams: [[${pageParams}]],
formData: {
verificationCode: '',
username: '',
password: '',
remember: false
}
},
methods: {
showErrorMessage: function() {
var self = this;
if(self.pageParams.errorMessage) {
layer.msg(self.pageParams.errorMessage);
}
},
initBackground: function() {
var self = this;
var loginBackgroundImages = self.pageParams.loginBackgroundImages;
var photos = [];
if(loginBackgroundImages) {
var loginBackgroundImageArray = loginBackgroundImages.split(',');
for(var i = 0, item = loginBackgroundImageArray[i]; item = loginBackgroundImageArray[i++];) {
photos.push({
image: 'route/file/download/true/'+ item
})
}
} else {
for(var i = 1; i <= 9; i++) {
photos.push({
image: 'assets/images/backgrounds/'+ i +'.jpg'
})
}
}
$.supersized({
slide_interval : 4000, // Length between transitions
transition : 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 1000, // Speed of transition
performance : 1, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
// Size & Position
min_width : 0, // Min width allowed (in pixels)
min_height : 0, // Min height allowed (in pixels)
vertical_center : 1, // Vertically center background
horizontal_center : 1, // Horizontally center background
fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions)
fit_portrait : 1, // Portrait images will not exceed browser height
fit_landscape : 0, // Landscape images will not exceed browser width
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
slides : photos
});
},
// 刷新验证码
refreshVerificationCode: function(event) {
event.target.src = event.target.src;
},
// 记住我
rememberMe: function() {
var self = this;
var rememberMe = cookie.getCookie('rememberMe');
if(rememberMe) {
var rememberMes = base64.decode(rememberMe).split('_$WG$_');
self.formData.username = rememberMes[0];
self.formData.password = rememberMes[1];
self.formData.remember = true;
}
self.$nextTick(function() {
form.render();
});
},
// 提交表单
submitForm: function() {
var self = this;
console.log(self.pageParams);
console.log(self.formData);
layer.msg('正在登录，请稍后...', {icon: 16, time: 3000});
self.formData.password = md5(md5(md5(self.formData.password)));
return false;
},
},
mounted: function() {
var self = this;
self.showErrorMessage();
self.initBackground();
self.rememberMe();
// 复选框勾选事件
form.on('checkbox(rememberFilter)', function(data) {
self.formData.remember = data.elem.checked;
});
// 保单验证
form.verify({
username: function(value, item) {
if(!value){
return '用户名不能为空';
}
},
password: function(value, item) {
if(!value) {
return '密码不能为空';
}
},
verificationCode: function(value, item) {
if(!value) {
return '验证码不能为空';
}
}
});
}
})
});
</script>
</body>
</html>

7
login-base/src/main/resources/templates/login/form/list.html
View File

@ -129,6 +129,11 @@
return rowData;
}
},
{field:'previewPage', width:100, title: '操作', align:'center', fixed: 'right',
templet: function(row) {
return '<button type="button" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="previewPageEvent">预览效果</button>';
}
},
]
],
page: true,
@ -273,6 +278,8 @@
}, function() {
top.dialog.close(loadLayerIndex);
});
} else if(event === 'previewPageEvent') {
window.open(top.restAjax.path('route/login-form/get-login-preview/{loginFormId}', [data.loginFormId]));
}
})
});

6
login-base/src/main/resources/templates/login/form/update.html
View File

@ -296,6 +296,7 @@
<div class="layui-footer" style="left: 0;">
<button type="button" class="layui-btn" lay-submit lay-filter="submitForm">提交编辑</button>
<button type="button" class="layui-btn layui-btn-primary close">返回上级</button>
<button type="button" class="layui-btn layui-btn-normal" id="previewPageBtn">预览页面</button>
</div>
</div>
</div>
@ -533,6 +534,11 @@
});
return false;
});
$('#previewPageBtn').on('click', function() {
window.open(top.restAjax.path('route/login-form/get-login-preview/{loginFormId}', [loginFormId]));
});
$('.close').on('click', function() {
closeBox();
});