精华内容
下载资源
问答
  • Layui登录界面

    2019-04-15 10:02:30
    Layui登录界面+主页面;登录界面粒子特效;ajax传值到后台验证用户名密码;设备管理主页面
  • LayUI登录页面

    千次阅读 2020-04-29 11:17:14
    使用LayUI对你所做系统进行前端的美化和交互完善设计,使得系统的操作和交互更加符合人机交互理念(以其中一个页面,如登录,注册,后台主页面为例,将截图上传即可,截图包括界面设计、数据交互过程、数据库数据...

    使用LayUI对你所做系统进行前端的美化和交互完善设计,使得系统的操作和交互更加符合人机交互理念,下面文章仅是登录页面的美化。

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <link rel="stylesheet" href="layui/css/layui.css">
            <style type="text/css">
          		.container{
          			width: 420px;
          			height: 320px;
    		 		 min-height: 320px;  
    		 		 max-height: 320px;  
    		 		 position: absolute;   
    		 		 top: 0;  
    		 		 left: 0;  
    		 		 bottom: 0;  
    		 		 right: 0;  
    		 		 margin: auto;  
    		 		 padding: 20px;  
    		 		 z-index: 130;  
    		 		 border-radius: 8px;  
    		 		 background-color: #fff;  
    		 		 box-shadow: 0 3px 18px rgba(100, 0, 0, .5); 
    		 		 font-size: 16px;
          		}
          		.close{
          			background-color: white;
          			border: none;
          			font-size: 18px;
          			margin-left: 410px;
          			margin-top: -10px;
          		}
     
            	.layui-input{
            		border-radius: 5px;
            		width: 300px;
            		height: 40px;
            		font-size: 15px;
            	}
            	.layui-form-item{
            		margin-left: -20px;
            	}
    			#logoid{ 
    				margin-top: -16px;
    		 		 padding-left:150px; 
    		 		 padding-bottom: 15px;
    			}
    			.layui-btn{
    				margin-left: -50px;
    				border-radius: 5px;
            		width: 350px;
            		height: 40px;
            		font-size: 15px;
    			}
    			.verity{
    				width: 120px;
    			}
    			.font-set{
    				font-size: 13px;
    				text-decoration: none; 
    				margin-left: 120px;
    			}
    			a:hover{
    			 text-decoration: underline; 
    			}
     
            </style>
        </head>
        <body>
        	<form class="layui-form" action="" method="post">
        		<div class="container">
        			<button class="close" title="关闭">X</button>
        			<div class="layui-form-mid layui-word-aux">
        				<img id="logoid" src="06.png" height="35">    				
        			</div>
    			  <div class="layui-form-item">
    			    <label class="layui-form-label">用户名</label>
    			    <div class="layui-input-block">
    			      <input type="text" name="title" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    			    </div>
    			  </div>
    			  <div class="layui-form-item">
    			    <label class="layui-form-label">密 &nbsp;&nbsp;码</label>
    			    <div class="layui-input-inline">
    			      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    			    </div>
    			    <!-- <div class="layui-form-mid layui-word-aux">辅助文字</div> -->
    			  </div>
    			   <div class="layui-form-item">
    			    <label class="layui-form-label">验证码</label>
    			    <div class="layui-input-inline">
    			      <input type="text" name="title" required  lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input verity">
    			    </div>
    			    <!-- <div class="layui-form-mid layui-word-aux">辅助文字</div> -->
    			      
    			  </div>
    <!-- 			  <div class="layui-form-item">
    				    <label class="layui-form-label">记住密码</label>
    				    <div class="layui-input-block">
    				      <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
    				    </div>
    			  </div> -->
     
    			  <div class="layui-form-item">
    			    <div class="layui-input-block">
    			      <button class="layui-btn" lay-submit lay-filter="formDemo">登陆</button>	     
    			    </div>
    			  </div>
    			   <a href="" class="font-set">忘记密码?</a>  <a href="" class="font-set">立即注册</a>
    			</div>
    		</form>
    		<script type="text/javascript" src="layui/layui.js"></script>
    		<script>
    			layui.use(['form', 'layedit', 'laydate'], function(){
    			  var form = layui.form
    			  ,layer = layui.layer
    			  ,layedit = layui.layedit
    			  ,laydate = layui.laydate;
    			  
    			  //日期
    			 /* laydate.render({
    			    elem: '#date'
    			  });
    			  laydate.render({
    			    elem: '#date1'
    			  });
    			  
    			  //创建一个编辑器
    			  var editIndex = layedit.build('LAY_demo_editor');
    			 
    			  //自定义验证规则
    			  form.verify({
    			    title: function(value){
    			      if(value.length < 5){
    			        return '标题至少得5个字符啊';
    			      }
    			    }
    			    ,pass: [
    			      /^[\S]{6,12}$/
    			      ,'密码必须6到12位,且不能出现空格'
    			    ]
    			    ,content: function(value){
    			      layedit.sync(editIndex);
    			    }
    			  });
    			  
    			  //监听指定开关
    			  form.on('switch(switchTest)', function(data){
    			    layer.msg('开关checked:'+ (this.checked ? 'true' : 'false'), {
    			      offset: '6px'
    			    });
    			    layer.tips('温馨提示:请注意开关状态的文字可以随意定义,而不仅仅是ON|OFF', data.othis)
    			  });*/
    			  
    			  //监听提交
    			  form.on('submit(demo1)', function(data){
    			    layer.alert(JSON.stringify(data.field), {
    			      title: '最终的提交信息'
    			    })
    			    return false;
    			  });
    			 
    			  //表单初始赋值
    			 /* form.val('example', {
    			    "username": "贤心" // "name": "value"
    			    ,"password": "123456"
    			    ,"interest": 1
    			    ,"like[write]": true //复选框选中状态
    			    ,"close": true //开关状态
    			    ,"sex": "女"
    			    ,"desc": "我爱 layui"
    			  })*/
    			  
    			  
    			});
    			</script>
        </body>
    </html>
    

    在这里插入图片描述

    原文链接:LayUI登录页面

    展开全文
  • 其风格简约轻盈,而组件优雅丰盈,从源代码到使用方法的每一处细节都经过精心雕琢,非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,它更...
  • layUI登录界面验证码功能模块儿封装

    千次阅读 2020-07-14 18:42:36
    用户登录界面,有个动态验证码的验证,这个是个常用的功能。 第一种做法是把动态验证码的功能放到后台来做,这样每次验码都需要请求下后台,效果不怎么好,也额外给服务端造成负担。 这负担不但指服务器承受了那一...

    用户登录界面,有个动态验证码验证,这是个常用的功能。

    第一种做法是把动态验证码的功能放到后台来做,每次刷新验码需要请求下后台。需额外给服务端造成点负担。

    这负担不但指服务器承受了那一丁点压力,还指后台繁琐的编码工作,得处理这部分逻辑。比如若后台用go语音来做的话,需要额外使用captcha第三方库,把这个功能集成进来。

    第二种做法是可以放在前端来做,如直接使用原生html5的canvas绘图来做。这种方式岂不是很赞,且很容易复用过来。但是有利有弊吧,在后台实现的验码码功能才是更安全。

    layui没提供这部分功能,这里对layui的验证码功能做了个简单封装,更好用啦,使用也变得很简单!

    效果图:

     

    使用方法:

    先在html的head中定义个canvas样式:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>登入 - 物联网平台</title>
      <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="stylesheet" href="/assets/layui/css/layui.css" media="all">
      <link rel="stylesheet" href="/assets/css/admin.css" media="all">
      <link rel="stylesheet" href="/assets/css/login.css" media="all">
      <style>
        #canvas {
            display: inline-block;
            border: 1px solid #ccc;
            border-radius: 5px;
            cursor: pointer;
        }
      </style>
    </head>

    然后在需要提示输入验证码的地方,增加占位。

    最后是使用,加载了封装好的captcha模块:

    <script>
      layui.config({
        base: '../assets/' //静态资源所在路径
      }).extend({
        index: 'lib/index' //主入口模块
      }).use(['index','form','captcha'], function(){
        var $ = layui.$
        ,setter = layui.setter
        ,admin = layui.admin
        ,form = layui.form
        ,capcha = layui.captcha;
    
        var show_num = [];
        capcha.draw(show_num);
        //显示验证码
        $("#canvas").on('click',function(){
          capcha.draw(show_num);
        });
        //提交
        form.on('submit(LAY-user-login-submit)', function(obj){
          //console.log()
          var num = show_num.join("");
          var code = obj.field["vercode"];
          console.log(num)
          //验证码判断
          if(code != num){
            layer.msg('验证码错误,请重新输入', {
            offset: '15px'
           ,icon: 5
           });
           return
          }
    ......
        
      });
      </script>

     最后附上封装好的captcha模块:

    /** layuiAdmin.std-v2020.1.24 LPPL License By https://www.layui.com/admin/ 
        captcha.js for layui
        author:yangyongzhen
    */
    ;
    layui.define(function(e) {
        var a = layui.jquery;
        var obj={
            randomColor:function() {//得到随机的颜色值
                var r = Math.floor(Math.random() * 256);
                var g = Math.floor(Math.random() * 256);
                var b = Math.floor(Math.random() * 256);
                return "rgb(" + r + "," + g + "," + b + ")";
            },
            draw:function(show_num) {
                var canvas_width=a('#canvas').width();
                var canvas_height=a('#canvas').height();
                var canvas = document.getElementById("canvas");//获取到canvas的对象,演员
                var context = canvas.getContext("2d");//获取到canvas画图的环境,演员表演的舞台
                canvas.width = canvas_width;
                canvas.height = canvas_height;
                var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
                var aCode = sCode.split(",");
                var aLength = aCode.length;//获取到数组的长度
                
                for (var i = 0; i <= 3; i++) {
                    var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
                    var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
                    var txt = aCode[j];//得到随机的一个内容
                    show_num[i] = txt.toLowerCase();
                    var x = 10 + i * 20;//文字在canvas上的x坐标
                    var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
                    context.font = "bold 23px 微软雅黑";
         
                    context.translate(x, y);
                    context.rotate(deg);
         
                    context.fillStyle = obj.randomColor();
                    context.fillText(txt, 0, 0);
         
                    context.rotate(-deg);
                    context.translate(-x, -y);
                }
                for (var i = 0; i <= 5; i++) { //验证码上显示线条
                    context.strokeStyle = obj.randomColor();
                    context.beginPath();
                    context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
                    context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
                    context.stroke();
                }
                for (var i = 0; i <= 30; i++) { //验证码上显示小点
                    context.strokeStyle = obj.randomColor();
                    context.beginPath();
                    var x = Math.random() * canvas_width;
                    var y = Math.random() * canvas_height;
                    context.moveTo(x, y);
                    context.lineTo(x + 1, y + 1);
                    context.stroke();
                }
            },
        };
        e("captcha", obj);
    });

    其实可以在进一步封装,把onclick和比较验证码的逻辑也放到js文件里。让使用变得更简单,但目前这样已经够简单了,感兴趣的可进一步封装下。 

     

    展开全文
  • layui 登录页面样式+短信接口

    千次阅读 2019-04-29 15:44:28
    备注:原代码使用的是阿里某短信接口,代码配置跟具体接口文档...物料登录</h1> <div class="container w3"> <h2>现在登录</h2> <form method="post" id="formlogin" onsubmit="ret...

    备注:原代码使用的是阿里某短信接口,代码配置跟具体接口文档有关

    <body>
        <h1>物料登录</h1>
        <div class="container w3">
            <h2>现在登录</h2>
    		<form  method="post" id="formlogin" onsubmit="return false;">
    			<div class="username">
    				<span class="username" style="height:19px">用户:</span>
    				<input type="text" name="name" class="name" placeholder="" required="" id="loginname">
    				<div class="clear"></div>
    			</div>
    			<div class="password-agileits">
    				<span class="username"style="height:19px">密码:</span>
    				<input type="password" name="password" class="password" placeholder="" required="">
    				<div class="clear"></div>
    			</div>
    			<div class="login-w3">
    					<input type="submit" class="login" value="Login" id="loginsubmit">
    			</div>
    			<div class="clear"></div>
    		</form>
    	</div>
    	<script src="js/layer.js"></script>	
    	<script src="js/login.js"></script>
    	<div class="footer-w3l">
    		<p>物料登录系统</p>
    	</div>
    </body>
    

    主要的login.js

    		//表单渲染
    		layui.use('form',function(){
    	       var form=layui.form;
    	    });
    	    function renderForm(){
    	        layui.use('form',function(){
    	            var form=layui.form;
    	            form.render();
    	        });
    	    }
    			  
    	  var redirectUrl = "${redirect}";      
    	  var LOGIN = {
                  doLogin:function() {
    					$.post("/bootable/user/login", $("#formlogin").serialize(),function(data){
    						if (data.status == 200) {
    						    var html="<div class='layui-form'>";
    						      html+="<div class='layui-form-item'>";
    							    html+="<label class='layui-form-label'>验证手机</label>";
    							    html+="<div class='layui-input-block'>";
    							      html+="<select name='phone' lay-verify='required'>";
    							        html+="<option value='1' selected>158***475</option>";
    							      html+="</select>";
    							    html+="</div>";
    							  html+="</div>";
    							  html+="<div class='layui-form-item'>";
    							    html+="<label class='layui-form-label'>验证码</label>";
    							    html+="<div class='layui-input-block'>";
    							      html+="<input type='text' id='templeteNum' name='templeteNum' required  lay-verify='required' placeholder='请输入手机验证码' autocomplete='off' class='layui-input'>";
                                      html+="<br>";
                                      html+="<input type='button' class='layui-btn layui-btn-primary' onclick='sendMessage()' id='btnSendCode' value='点击发送验证码'></input>";						    
    							    html+="</div>";
    							  html+="</div>";
    							html+="</div>";  	
    							  layer.open({
    							      skin: 'layui-layer-molv',
    								  title: '短信验证',
    								  area:['450px','300px'],
    								  content: html,
    								  anim: 2,
    								  yes:function(){
    									   $.ajax({
    								           type:'post',
    								           url:'/bootable/getSessionToken',
    								           success:function(data){
                                                   var str=JSON.parse(data);
                                                   var input_num=$("#templeteNum").val();
                                                   if(parseInt(str.TemplateParam)==parseInt(input_num)){
    													location.href = "http://******/bootable/lay";
    													str.TemplateParam=null;
                                                   }else{
                                                       layer.msg('验证码错误', {icon: 2});
                                                   }
    								              
    								           }
    								       });
    								  }
    							  }); 
    							renderForm();							  					   
    						} else {
    							alert("登录失败,原因是:" + data.msg);
    							$("#loginname").select();
    						}
    					});
    				},
    				login:function() {			
    						this.doLogin();
    				}
    			
    		};
    		$(function(){
    			$("#loginsubmit").click(function(){
    				LOGIN.login();
    			});
    		});
    		
    		
    	   //验证码发送
    	    var InterValObj; //timer变量,控制时间
    		var count = 60; //间隔函数,1秒执行
    		var curCount;//当前剩余秒数
    		function sendMessage() {
    		curCount = count;
    		var dealType; //验证方式		
    		//设置button效果,开始计时
    			$("#btnSendCode").attr("disabled", "true");
    			$("#btnSendCode").val( + curCount + "秒再获取");
    			InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次
    		  //处理验证
    			  $.ajax({
    			      type:'post',
    			      url:'/bootable/almessage/RecNum',
    			      success:function(date){			      
    			     },error:function(){
    			        alert("接口错误!")
    			     }
    			});					
    		}
    		//timer处理函数
    		function SetRemainTime() {
    			if (curCount == 0) {                
    				window.clearInterval(InterValObj);//停止计时器
    				$("#btnSendCode").removeAttr("disabled");//启用按钮
    				$("#btnSendCode").val("重新发送验证码"); 
    			}
    			else {
    				curCount--;
    				$("#btnSendCode").val( + curCount + "秒再获取");
    			}
    		}
    		
    

    说明:打开系统后,判断是否已登录,未登录(session未有数据)时调转至登录页面。

    1. 点击登录按钮,弹框验证手机号
    2. SetRemainTime函数作为倒计时控制
    3. 后端匹配可通过手机号信息
    	//登录用户
    	@RequestMapping(value="/user/login",method=RequestMethod.POST)
    	@ResponseBody
    	public commonReturn userLogin(String name,String password,HttpSession httpSession){
    		try {
    			commonReturn result=hrService.userLogin(name, password, httpSession);
    			return result;
    		} catch (Exception e) {
    			e.printStackTrace();
    			return commonReturn.build(500,e.getMessage());
    		}
    	}	
    	
    	//注销
    	@RequestMapping("/logout")
    	public String loginOut(HttpSession httpSession){
    		hrService.loginOut(httpSession);
    		return "redirect:/login";
    	}
    	
    	@RequestMapping(value="/almessage/RecNum",produces = "text/html;charset=UTF-8")
    	@ResponseBody
    	public String sendMessage(HttpSession session) throws ClientException{
    		Random random = new Random();  
    		String result="";   //6位随机数${code}  ===>>>>{"code":"随机数"}
    		for (int i=0;i<6;i++)  
    		{  
    		    result+=random.nextInt(10);  
    		}  
    		session.setAttribute("RandNumber", result);
    				
    		//设置超时时间-可自行调整
    		System.setProperty("sun.net.client.defaultConnectTimeout", "10000");
    		System.setProperty("sun.net.client.defaultReadTimeout", "10000");
    		//初始化ascClient需要的几个参数
    		final String product = "Dysmsapi";//短信API产品名称(短信产品名固定,无需修改)
    		final String domain = "dysmsapi.aliyuncs.com";//短信API产品域名(接口地址固定,无需修改)
    		//替换成你的AK
    		final String accessKeyId = "******************";
    		final String accessKeySecret = "******************************";
    		IClientProfile profile = DefaultProfile.getProfile("cn-hangzhou",accessKeyId,accessKeySecret);
    		DefaultProfile.addEndpoint("cn-hangzhou", "cn-hangzhou", product, domain);
    		IAcsClient acsClient = new DefaultAcsClient(profile);
    		 //组装请求对象
    		 SendSmsRequest request = new SendSmsRequest();
    		 request.setMethod(MethodType.POST);		 
    		 request.setPhoneNumbers("158******75");
    		 //短信签名
    		 request.setSignName("物料hfzhang");
    		 //短信模板
    		 request.setTemplateCode("SMS_120365446");		
    		 request.setTemplateParam("{'code':'"+result+"'}");
    		//请求失败这里会抛ClientException异常
    		SendSmsResponse sendSmsResponse = acsClient.getAcsResponse(request);
    		if(sendSmsResponse.getCode() != null && sendSmsResponse.getCode().equals("OK")) {
    		//请求成功
    			 return JsonUtils.objectToJson(sendSmsResponse.getMessage());
    		}
    		return JsonUtils.objectToJson(sendSmsResponse.getMessage());		
    	} 
    	
    	@RequestMapping("/getSessionToken")
    	public @ResponseBody String getSessionToken(HttpSession session){
    		String TemplateParam=(String) session.getAttribute("RandNumber");
    /*		String phoneNumber=(String) session.getAttribute("OwnPhone");*/
    		HashMap<String, String> map=new HashMap<>();
    		map.put("TemplateParam", TemplateParam);
    /*		map.put("phoneNumber", phoneNumber);*/
    		String str=JsonUtils.objectToJson(map);
    		session.removeAttribute("RandNumber");
    		return str;
    	}
    

    部分主要配置,具体短信内容在服务器端配置,code作为验证码发送至手机
    SendSmsRequest request = new SendSmsRequest();
    request.setMethod(MethodType.POST);
    request.setPhoneNumbers(“158******75”);
    //短信签名
    request.setSignName(“物料hfzhang”);
    //短信模板
    request.setTemplateCode(“SMS_120365446”);
    request.setTemplateParam("{‘code’:’"+result+"’}");

    展开全文
  • layui实现登录页面

    万次阅读 多人点赞 2019-09-29 17:37:50
    首先给看下效果图吧! html、js <!DOCTYPE html> <html> <head> <meta charset="UTF-8">...登录</title> <script src="./js/res_js/jquery-3.4.1.min.js"></sc...

    首先给看下效果图吧!

    在这里插入图片描述

    html、js

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>登录</title>
        <script src="./js/res_js/jquery-3.4.1.min.js"></script>
        <link rel="stylesheet" href="./js/layui/css/layui.css">
        <link rel="stylesheet" href="./css/adminLogin.css">
    </head>
    <body>
        <div class="wrap">
            <img src="images/back.jpg" class="imgStyle">
            <div class="loginForm">
                <form>
                    <div class="logoHead">
                        <!--<h2 style="margin-top: 15px">房产销售平台管理系统</h2>-->
                    </div>
                    <div class="usernameWrapDiv">
                        <div class="usernameLabel">
                            <label>用户名:</label>
                        </div>
                        <div class="usernameDiv">
                            <i class="layui-icon layui-icon-username adminIcon"></i>
                            <input id="loginUsername" class="layui-input adminInput" type="text" name="username" placeholder="输入用户名" >
                        </div>
                    </div>
                    <div class="usernameWrapDiv">
                        <div class="usernameLabel">
                            <label>密码:</label>
                        </div>
                        <div class="passwordDiv">
                            <i class="layui-icon layui-icon-password adminIcon"></i>
                            <input id="loginPassword" class="layui-input adminInput" type="password" name="password" placeholder="输入密码">
                        </div>
                    </div>
                    <div class="usernameWrapDiv">
                        <div class="usernameLabel">
                            <label>验证码:</label>
                        </div>
                        <div class="cardDiv">
                            <input id="loginCard" class="layui-input cardInput" type="text" name="card" placeholder="输入验证码">
                        </div>
                        <div class="codeDiv">
                            <input id="loginCode" class="layui-input codeInput"  type="button">
                        </div>
                    </div>
                    <div class="usernameWrapDiv">
                        <div class="submitLabel">
                            <label>没有账号?<a href="#" id="loginRegister">点击注册</a></label>
                        </div>
                        <div class="submitDiv">
                            <input id="loginBtn" type="button" class="submit layui-btn layui-btn-primary" value="登录"></input>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <script src="./js/layui/layui.js" type="text/javascript"></script>
        <script>
            layui.use(['layer'],function () {
                var layer = layui.layer;
            })
            $(function () {
                // 页面初始化生成验证码
                window.onload = createCode('#loginCode');
                // 验证码切换
                $('#loginCode').click(function () {
                    createCode('#loginCode');
                });
                // 登陆事件
                $('#loginBtn').click(function () {
                    login();
                });
                // 注册事件
                $('#loginRegister').click(function () {
                    register();
                });
            });
            // 生成验证码
            function createCode(codeID) {
                var code = "";
                // 验证码长度
                var codeLength = 4;
                // 验证码dom元素
                var checkCode = $(codeID);
                // 验证码随机数
                var random = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
                    'S','T','U','V','W','X','Y','Z'];
                for (var i = 0;i < codeLength; i++){
                    // 随机数索引
                    var index = Math.floor(Math.random()*36);
                    code += random[index];
                }
                // 将生成的随机验证码赋值
                checkCode.val(code);
            }
            // 校验验证码、用户名、密码
            function validateCode(inputID,codeID) {
                var inputCode = $(inputID).val().toUpperCase();
                var cardCode = $(codeID).val();
                var loginUsername = $('#loginUsername').val();
                var loginPassword = $('#loginPassword').val();
                if ($.trim(loginUsername) == '' || $.trim(loginUsername).length<=0){
                    layer.alert("用户名不能为空");
                    return false;
                }
                if ($.trim(loginPassword) == '' || $.trim(loginPassword).length<=0){
                    layer.alert("密码不能为空");
                    return false;
                }
                if (inputCode.length<=0){
                    layer.alert("验证码不能为空");
                    return false;
                }
                if (inputCode != cardCode){
                    layer.alert("请输入正确验证码");
                    return false;
                }
                return true;
            }
            // 登录流程
            function login() {
                if (!validateCode('#loginCard','#loginCode')){
                    //阻断提示
                }else {
                    var loginUsername = $('#loginUsername').val();
                    var loginPassword = $('#loginPassword').val();
                    var params = {};
                    params.loginUsername = loginUsername;
                    params.loginPassword = loginPassword;
                    var loginLoadIndex = layer.load(2);
                    $('#loginBtn').val("正在登录...");
                    $.ajax({
                        type:'post',
                        url:window.location.protocol+'//'+window.location.host+'/security-web/login.do',
                        dataType:'html',
                        data:JSON.stringify(params),
                        contentType:'application/json',
                        success:function (data) {
                            layer.close(loginLoadIndex);
                            var jsonData = JSON.parse(data);
                            if (jsonData.code == '999'){
                                window.location.href = './static/templates/main.html';
                            }
                        },
                        error:function () {
                            layer.close(loginLoadIndex);
                            $('#loginBtn').val("登录");
                        }
                    });
                }
    
            }
            // 注册流程
            function register() {
                layer.open({
                    type:'1',
                    content:$('.registerPage'),
                    title:'注册',
                    area:['430px','400px'],
                    btn:['注册','重置','取消'],
                    closeBtn:'1',
                    btn1:function (index,layero) {
                        //注册回调
                        layer.close(index);
                        var registerUsername = $('#registerUsername').val();
                        var registerPassword = $('#registerPassword').val();
                        var registerWellPassword = $('#registerWellPassword').val();
                        var selectValue = $('#roleSelect option:selected').val();
                        var params = {};
                        params.registerUsername = registerUsername;
                        params.registerPassword = registerPassword;
                        params.registerWellPassword = registerWellPassword;
                        params.selectValue = selectValue;
                        var registerLoadIndex = layer.load(2);
                        $.ajax({
                            type:'post',
                            url:window.location.protocol+'//'+window.location.host+'/security-web/register.do',
                            dataType:'json',
                            data:JSON.stringify(params),
                            contentType:'application/json',
                            success:function (data) {
                                layer.close(registerLoadIndex);
                                layer.msg(data);
                            },
                            error:function () {
                                layer.close(registerLoadIndex);
                                layer.alert("请求超时!")
                            }
                        });
                    },
                    btn2:function (index,layero) {
                        //重置回调
                        var registerUsername = $('#registerUsername').val("");
                        var registerPassword = $('#registerPassword').val("");
                        var registerWellPassword = $('#registerWellPassword').val("");
                        // 防止注册页面关闭
                        return false;
                    },
                    btn3:function (index,layero) {
                        //取消回调
                    }
                })
            }
        </script>
    
    </body>
    <div class="registerPage">
        <div class="registerDiv">
            <form>
                <div class="usernameWrapDiv">
                    <div class="usernameLabel">
                        <label>用户名:</label>
                    </div>
                    <div class="usernameDiv">
                        <i class="layui-icon layui-icon-username adminIcon"></i>
                        <input id="registerUsername" class="layui-input adminInput" type="text" name="username" placeholder="输入用户名" >
                    </div>
                </div>
                <div class="usernameWrapDiv">
                    <div class="usernameLabel">
                        <label>密码:</label>
                    </div>
                    <div class="passwordDiv">
                        <i class="layui-icon layui-icon-password adminIcon"></i>
                        <input id="registerPassword" class="layui-input adminInput" type="password" name="password" placeholder="输入密码">
                    </div>
                </div>
                <div class="usernameWrapDiv">
                    <div class="usernameLabel">
                        <label>确认密码:</label>
                    </div>
                    <div class="passwordDiv">
                        <i class="layui-icon layui-icon-password adminIcon"></i>
                        <input id="registerWellPassword" class="layui-input adminInput" type="password" name="password" placeholder="输入密码">
                    </div>
                </div>
                <div class="usernameWrapDiv">
                    <div class="usernameLabel">
                        <label>角色类型:</label>
                    </div>
                    <div class="passwordDiv">
                        <select id="roleSelect" class="layui-select">
                            <option value="">请选择...</option>
                            <option value="0">经纪人</option>
                            <option value="1">房东</option>
                        </select>
                    </div>
                </div>
            </form>
        </div>
    </div>
    </html>
    

    css

    /*登陆表单样式 start*/
    .wrap{
        width: 100%;
        height: 100%;
        background: url("../images/back.jpg") no-repeat;
        background-size: cover;
    }
    .loginForm{
        margin-left: 35%;
        margin-top: 10%;
        /*background-color: #cccccc;*/
        background-color: #e7e7e7;
        width: 400px;
        height: 400px;
        float: left;
        z-index: 9999;
        position: fixed;
        opacity: 0.75;
    }
    .usernameDiv{
        width: 300px;
        height: 40px;
        padding-left: 130px;
        padding-top: 30px;
    
    }
    .adminInput{
        width: 200px;
        height: 40px;
        font-size: 15px;
        border-radius: 0.5em;
        /*margin-left: auto;*/
        /*border: 1px solid #cccccc;*/
    }
    .passwordDiv{
        width: 300px;
        height: 40px;
        padding-left: 130px;
        padding-top: 28px;
    }
    .cardDiv{
        width: 120px;
        height: 40px;
        padding-top: 28px;
        padding-left: 14px;
        float: left;
    }
    .cardInput{
        width: 124px;
        height: 40px;
        font-size: 15px;
        border-radius: 0.5em 0em 0em 0.5em;
    }
    .codeDiv{
        width: 100px;
        height: 40px;
        padding-top: 28px;
        padding-right: 20px;
        float: left;
    }
    .codeInput{
        width: 80px;
        height: 40px;
        font-size: 15px;
        border-radius: 0em 0.5em 0.5em 0em;
        /*验证码样式*/
        font-family: Arial;
        font-style: italic;
        font-weight: bold;
        /*border: 0;*/
        letter-spacing: 2px;
        cursor: pointer;
    }
    i{
        position: absolute;
    }
    .adminIcon{
        font-size: 22px;
        margin-top: 8px;
        margin-left: 165px;
    }
    .logoHead{
        width: 250px;
        height: 60px;
        padding-left: 90px;
        padding-top: 25px;
    }
    .usernameLabel{
        width: 60px;
        height: 30px;
        font-size: 16px;
        float: left;
        margin-left: 55px;
        margin-top: 40px;
    }
    .submitLabel{
        width: 160px;
        height: 30px;
        font-size: 13px;
        float: left;
        margin-left: 55px;
        margin-top: 40px;
        cursor: pointer;
    }
    .usernameWrapDiv{
        width: 400px;
        height: 70px;
    }
    .submitDiv{
        width: 150px;
        height: 40px;
        padding-left: 10px;
        padding-top: 28px;
        float: left;
    }
    .submit{
        width: 100px;
        height: 40px;
        border-radius: 0.5em;
    }
    img{
        position: absolute;
    }
    .imgStyle{
        width: 100%;
        height: 100%;
    }
    /*登陆表单样式 end*/
    
    /*注册页面样式 start*/
    .registerPage{
        width: 100%;
        height: 100%;
        /*background-color: #cccccc;*/
        display: none;
        opacity: 0.75;
    }
    .registerDiv{
        width: 100%;
        height: 100%;
        z-index: 9999;
        opacity: 0.75;
    }
    /*注册页面样式 end*/
    
    展开全文
  • layui登录界面

    万次阅读 2018-10-12 21:13:12
    刚学了layui,写了个简单的登录界面,由于自己的菜导致出现了一些问题,现在总结下过程中碰到的问题: 1.样式导错了样式 2.输入框太长导致不好看 3.form表单的位置不对,没有在中间的位置 解决的方法: 问题1:...
  • layui登录点击响应

    2020-01-11 14:40:21
    function loginAction() { var username = $('#username').val(); var password = $('#password').val();... layui.use('layer', function(){ var layer = layui.layer; // 账号输入框检查 if ...
  • layui的iframe模板中,因为页面都是通过iframe方式引入的,所以在子(iframe)页面中使用location.href = "../user/login.html"后,跳转的页面依然显示在内联框架中,而不是父页面跳转; //parent.location.href = 要...
  • 摘要: 登陆页面 登陆页面body{background:#007457;}.header{box-shadow:0 0 20px #333;height:110px;}h1{color:#fff;display: inline-block; margin-left: 20px;line-height: 110px; }.connet{width:600px;height:...
  • 一款非常酷炫基于layui设计的响应式动画登录界面模板,自适应兼容电脑端和手机移动端的用户登录页面html模板下载,有背景动画和登录提示框动画效果。
  • , logout: 1001 //登录状态失效的状态码 // 自增加代码 , error: -1 //增加登录失败的状态码 } , msgName: 'msg' //状态信息的字段名称 , dataName: 'data' //数据详情的字段名称 }   ps:①、增加一行...
  • layui登录后token问题

    千次阅读 2019-04-06 22:53:00
    layui是一个非常简单且实用的后台管理系统搭建框架,里面的插件丰富使用简单... 先介绍layui登录这一块的使用, 登录问题主要是在token的存储调用上,先贴出后台的创建token以及拦截器的代码 首先引入jar包 ...
  • layui如何实现登录功能发布时间:2020-06-17 09:10:11来源:亿速云阅读:548作者:Leahlayui如何实现登录功能?相信很多新手小白还没学会这个技能,通过这篇文章的总结,希望你能学会学会这个技能。以下资料是实现的...
  • input type="button" id="login" class="btn btn-main" value="登录"> <link rel="stylesheet" href="/css/plugins/toastr/toastr.min.css"> <script src="/js/jquery.min.js"></scr...
  • "重定向到了登录界面" ) ; hsResponse . sendRedirect ( hsRequest . getContextPath ( ) + "/login" ) ; // 重定向到登陆界面 return false ; } } return true ; } } 2、...
  • 今天小编就为大家分享一篇SSM+layUI 根据登录信息显示不同的页面方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • LayUi登录注册

    千次阅读 2020-03-25 21:26:29
    LayUi登录注册页面附代码登录页面注册页面附加CSS,JS代码 登录页面 下面展示登录页面 代码如下。 <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" class="loginHtml"> <head> <...
  • layui登陆界面验证码

    千次阅读 2020-07-21 20:47:38
    div class="layui-form-item"> <div class="layui-col-xs6" > <input type="text" value="" placeholder="请输入验证码(不区分大小写)" class="input-val"> <canvas id="canvas" ...
  • layui实现登录

    千次阅读 2019-03-29 16:47:00
    其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发. 获得layui 你可以在LayUI官网首页下载到 layui 的最新版,它经过了自动化...
  • 一个简单的layui登陆界面

    万次阅读 多人点赞 2019-01-26 22:03:29
    &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &...layui/css/layui.css"&gt; &am
  • 使用LayUI框架写登录和注册界面时,遇到的一些小问题: <label class="layui-form-label">输入框</label> 默认有margin-left:110px; 我想写“用户名:+输入框”的时候显示就会右对齐。 没有什么好的...
  • # 都很简单 不再解释了 spring.thymeleaf.cache=false spring.mvc.static-path-pattern= /static/** 导入静态文件 导入layui,直接将整个文件夹放在static下面即可 导入jquery、页面样式文件css等等 效果图如下: ...
  • 页面 <html class="loginHtml"> <head> <meta charset="utf-8"> <title>登录页</title> <meta name="renderer" content="webkit"> <meta ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,137
精华内容 1,654
关键字:

layui登录页面