html页面登录
1.页面
<!DOCTYPE HTML> <html> <head> <title>店铺管理平台</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link href="layui/css/layui.css" rel="stylesheet" type="text/css" /> <link href="layui/css/login.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="layui/layui.js"></script> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jigsaw.min.js"></script> </head> <body> <div class="container"> <div class="login"> <div class="layadmin-user-login-box"> <h2>后台登录</h2> </div> <form class="layui-form" method="post"> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-inline" style="width:245px;"> <input type="text" name="uname" id="uname" placeholder="请输入用户名" required lay-verify="required" autocomplete="off" class="layui-input" /> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">用户密码</label> <div class="layui-input-inline" style="width:245px;"> <input type="text" name="upwd" id="upwd" placeholder="请输入密码" required lay-verify="required" autocomplete="off" class="layui-input" /> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">用户类别</label> <div class="layui-input-block"> <input type="radio" name="utype" value="0" title="用户" checked="checked" /> <input type="radio" name="utype" value="1" title="管理员" /> </div> </div> <div id="captcha"></div> <div id="msg" class="ms"></div> <button class="layui-btn login-btn" lay-submit="" lay-filter="SystemLogin">登录</button> </form> </div> </div> </body> </html>
2.login.css
body {
background-color: #e7e7e7;
}
.login{
width:400px;
height:overflow;
position:absolute;
left:40%;
top:20%;
background-color:white;
padding:20px;
}
.layadmin-user-login-box{
padding:20px;
text-align:center;
}
.layadmin-user-login-box h2{
margin-bottom:10px;
font-weight:400;
font-size:30px;
color:#009688;
}
.login-btn{
width:310px;
margin-left:50px;
margin-top:30px;
}
.ms{
width:310px;
text-align:center;
}
3.初始化layui
<script type="text/javascript"> var flag=0; $(function(){ layui.use("element"); var layer; layui.use('layer', function(){ layer = layui.layer; }); layui.use('form',function(){ //只有执行了这一步，部分表单元素才会自动修饰成功 var form=layui.form; }); });
4.不规则验证码
//验证码初始化
function yzm(){
jigsaw.init({
el: document.getElementById('captcha'),
onSuccess: function() {
document.getElementById('msg').innerHTML = '通过验证！'
flag=1;
},
onFail: cleanMsg,
onRefresh: cleanMsg
})
}
function cleanMsg() {
document.getElementById('msg').innerHTML = ''
flag=0;
}
5.页面加载时候初始化验证码
<script type="text/javascript">
var flag=0;
$(function(){
//初始化验证码
yzm();});
6.登录
<script type="text/javascript"> var flag=0; $(function(){ //初始化验证码 yzm(); layui.use("element"); var layer; layui.use('layer', function(){ layer = layui.layer; }); layui.use('form',function(){ //只有执行了这一步，部分表单元素才会自动修饰成功 var form=layui.form; //表单提交 form.on('submit(SystemLogin)', function (data) { //获取用户输入值 var uname=$("#uname").val(); var upwd=$("#upwd").val(); var type=$("input:radio[name='utype']:checked").val(); //alert(flag); //判断是否验证 if(flag==0){ layer.tips("请拖动验证码到正确位置", '#captcha',{tips:[2,'red']}); }else{ layer.msg('输入正确，正在提交...',{offset:['600px','1200px']}); //拼接字符串 var content="uname="+uname+"&upwd="+upwd+"&utype="+type; $.ajax({ url:"login", type:"post", data:content, success:function(data){ alert(data); if(data=='true'){ layer.alert("登录成功", {icon: 1,offset:['400px','900px'],btn:['确定'],yes:function(){ location.href="toPage/main"; }}); }else{ layer.alert("登录失败", {icon: 2,offset:['400px','900px'],btn:['确定'],yes:function(){ location.reload(); }}); } } }); }//else结束 return false; }); }); });
7.后台
@Repository public interface UserDao { @Select("select * from userinfo where uname=#{uname} and upwd=#{upwd} and utype=#{utype}") public Userinfo login(Userinfo user); }
@Controller public class LoginController { @Autowired private UserService userService; @RequestMapping(value={"/toLogin","/"}) public String toLogin(){ System.out.println("跳转到登录页面"); return "index"; } //登录 @RequestMapping("/login") @ResponseBody public String login(Userinfo user,HttpServletRequest request){ System.out.println("登录--------"); Userinfo login = userService.login(user); if(login!=null){ request.getSession().setAttribute("user", login); return "true"; } return "false"; }
8.登录成功跳转主页面
@RequestMapping(value={"/toPage/{page}"})
public String toPage(@PathVariable("page")String page){
System.out.println("跳转到"+page+"页面");
return page;
}
