版权声明:欢迎转载,转载请标明转载地址 https://blog.csdn.net/u010520146/article/details/86061302
代码如下:
<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>用户登录</title>
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css?t=1545041465480" media="all">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
<script type="text/javascript" src="static/js/jquery.qrcode.js"></script>
<script type="text/javascript" src="static/js/qrcode.js"></script>
</head>
<body>
<div >
</div>
<div class="page-header">
<h1 class="text-center">登录中心</h1>
</div>
<div class="loginContent maincontainer container" style="width: 25%; margin: auto;">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="userLogin">
<div class="form-group">
<label>账号</label>
<input name="username" class="form-control" id="username" placeholder="请输入您的账号">
</div>
<div class="form-group">
<label>密码</label>
<input name="password" type="password" class="form-control" id="password" placeholder="请输入您的密码">
</div>
<div class="submit">
<button onclick="login()" class="btn btn-primary btn-lg btn-block">登录</button>
</div>
</div>
<div class="tab-pane fade" id="qrCodeLogin">
<div class="form-group" style=" width: 100%;height: 250px;">
<div style=" height: auto; width:65%" class="img-rounded img-responsive center-block" id="qrcode"></div>
</div>
</div>
</div>
<div style="height: 40px; ">
<a onclick="setChangeLogin(this)" id="login_type" style="text-decoration: none;line-height: 40px;float: right" data-toggle="tab">二维码登录</a>
</div>
</div>
</body>
<script th:inline="javascript" type="text/javascript">
jQuery('#qrcode').qrcode({
render : "table",
text : "http://www.baidu.com"
});
function setChangeLogin(obj){
var text = $(obj).text();
if(text=='二维码登录'){
$('#login_type').attr('href','#qrCodeLogin');
$(obj).text('密码登录');
}else {
$('#login_type').attr('href','#userLogin');
$(obj).text('二维码登录');
}
}
function login() {
var username=$('#username').val();
var password=$('#password').val();
if(username==""){
parent.layer.msg("请填写您的用户名");
$("#username").focus();
}else if(password==""){
parent.layer.msg("请填写您的密码");
$("#password").focus();
}else {
var url = [[${backUrl}]];
parent.layer.load(1);
$.ajax({
url: "/login",
type: 'POST',
data: {
username: username,
password: password
},
dataType: 'json',
success: function (json) {
parent.layer.closeAll();
if (json.errCode == 0) {
layer.alert('登录成功');
} else {
layer.alert(json.errMsg);
}
}
});
}
}
</script>
</html>
效果图
密码登录
二维码登录