上一章节已经讲解打开Url地址后,如何实现进入登录界面,本章节讲解登录提交的功能
一、登录代码拆解
如下图,在登录界面中,表单包含两个输入框和一个验证码的输入框。
<form id="signupForm" autocomplete="off">
<h4 class="no-margins">登录:</h4>
<p class="m-t-md">你若不离不弃,我必生死相依</p>
<input type="text" name="username" class="form-control uname" placeholder="用户名" value="admin" />
<input type="password" name="password" class="form-control pword" placeholder="密码" value="admin123" />
<div class="row m-t" th:if="${captchaEnabled==true}">
<div class="col-xs-6">
<input type="text" name="validateCode" class="form-control code" placeholder="验证码" maxlength="5" />
</div>
<div class="col-xs-6">
<a href="javascript:void(0);" title="点击更换验证码">
<img th:src="@{/captcha/captchaImage(type=${captchaType})}" class="imgcode" width="85%"/>
</a>
</div>
</div>
<div class="checkbox-custom" th:if="${isRemembered}" th:classappend="${captchaEnabled==false} ? 'm-t'">
<input type="checkbox" id="rememberme" name="rememberme"> <label for="rememberme">记住我</label>
</div>
<button class="btn btn-success btn-block" id="btnSubmit" data-loading="正在验证登录,请稍候...">登录</button>
</form>因为ruoyi非分离版本使用jquery技术,所以在更换验证码,提交登录等操作都封装在另外一个js里面。
js存放的目录是static里面,具体如下图
<script src="../static/ruoyi/login.js" th:src="@{/ruoyi/login.js}"></script>二、jquery页面加载处理
$(function()是DOM 加载完毕之后执行。
$(function() {
validateKickout();
validateRule();
$('.imgcode').click(function() {
var url = ctx + "captcha/captchaImage?type=" + captchaType + "&s=" + Math.random();
$(".imgcode").attr("src", url);
});
});处理逻辑:
1、验证是否登录有效
2、验证码输入账号密码信息
3、绑定验证码的点击方法。$('.imgcode').click(function(),其中$('.imgcode')对应html里面的<img th:src="@{/captcha/captchaImage(type=${captchaType})}" class="imgcode" width="85%"/> class 样式。
三、getParam处理函数
如下是封装获取url地址的参数。
function getParam(paramName) {
var reg = new RegExp("(^|&)" + paramName + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return decodeURI(r[2]);
return null;
}处理逻辑:
1、正则表单时,获取指定paramName的值
2、window.location.search是获取url值
四、前端登录处理函数
如下是登录函数封装
function login() {
$.modal.loading($("#btnSubmit").data("loading"));
var username = $.common.trim($("input[name='username']").val());
var password = $.common.trim($("input[name='password']").val());
var validateCode = $("input[name='validateCode']").val();
var rememberMe = $("input[name='rememberme']").is(':checked');
$.ajax({
type: "post",
url: ctx + "login",
data: {
"username": username,
"password": password,
"validateCode": validateCode,
"rememberMe": rememberMe
}, success: function(r) {
if (r.code == web_status.SUCCESS) {
location.href = ctx + 'index';
} else {
$('.imgcode').click();
$(".code").val("");
$.modal.msg(r.msg);
}
$.modal.closeLoading();
}
});
}login.html引入了表单验证框架,点击表单的按钮提交,就会调用
<script src="../static/ajax/libs/validate/jquery.validate.min.js" th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>validate框架的submitHandler方法
类型:function(form)
说明,通过验证后运行的函数,默认添加该函数则不会再提交除非手动提交或者使用return true,
函数参数:该函数接收一个参数,表示当前表单dom对象
$.validator.setDefaults({
submitHandler: function() {
login();
}
});如上述代码,验证表单规则成功后,调用login函数。login函数向后端发起ajax请求,
五、后端登录处理函数
@PostMapping("/login")@ResponseBodypublic AjaxResult ajaxLogin(String username, String password, Boolean rememberMe)
{
UsernamePasswordToken token = new UsernamePasswordToken(username, password, rememberMe);
Subject subject = SecurityUtils.getSubject(); try
{
subject.login(token); return success();
} catch (AuthenticationException e)
{
String msg = "用户或密码错误";
if (StringUtils.isNotEmpty(e.getMessage()))
{
msg = e.getMessage();
}
return error(msg);
}
}如上述代码。登录成,返回一个成功的json,前端判断状态码是否成功,若成功,则执行跳转到首页。
success: function(r) {
if (r.code == web_status.SUCCESS) {
location.href = ctx + 'index';
} else {
$('.imgcode').click();
$(".code").val("");
$.modal.msg(r.msg);
}
$.modal.closeLoading();
}如上述是前端登录代码。登录成功后,通过location.href = ctx + 'index';跳转到这个url地址。
后台代码如下图,处理成功。跳转到首页。
首页效果图如下:
六、未来计划
1、ruoyi非分离版本拆解
2、ruoyi-vue-pro:讲解工作流
3、ruoyi-vue-pro:支付模块,电商模块
4、基于ruoyi-vue-pro项目开发
5、JEECG低代码开发平台
请关注我,本星球会持续推出更多的开源项目代码解析,如有更好的意见请留言回复或者私信。
来源：
互联网
本文观点不代表源码解析立场，不承担法律责任，文章及观点也不构成任何投资意见。
评论列表