layui 登录页面样式+短信接口

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

<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未有数据）时调转至登录页面。

点击登录按钮，弹框验证手机号
SetRemainTime函数作为倒计时控制
后端匹配可通过手机号信息

 //登录用户@RequestMapping(value="/user/login",method=RequestMethod.POST)@ResponseBodypublic 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")@ResponseBodypublic 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产品域名（接口地址固定，无需修改）//替换成你的AKfinal 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 登录页面样式+短信接口相关推荐

微信小程序手机号验证码登录（调阿里云短信接口）
小程序效果代码 <view class='content'><form bindsubmit="formSubmit"><view class='p ...
WordPress主题zibll子比主题+新增阿里云短信/腾讯云/短信宝/风吹雨短信接口
介绍: WordPress主题zibll子比主题–版本V5.1版新增用户登录/注册/找回密码页面及多项对应设置(自动生成无需设置) 新增默认登录为弹框或页面的选项新增登录框左侧图像显示功能(支持多 ...
短信接口抓包_[实战] 实现抢票小工具amp;短信通知提醒
作者:西岚写在前言要知道在深圳上班是非常痛苦的事情,特别是我上班的科兴科技园这一块,去的人非常多,每天上班跟春运一样,如果我能换到以前的大冲上班那就幸福了,可惜,换不得. 尤其是我这个站等车的多的 ...
php短信接口加密_PHP短信接口、PHP短信验证码接口源码
PHP短信接口.PHP短信验证码接口源码时间:2016-06-13 11:53 来源:原创作者:admin PHP短信接口文档源码,PHP发短信接口,PHP在线发短信,PHP微信发短信接口 /* ...
.NET短信接口验证
.NET短信接口验证之前遇到的一个问题,因为没有接触过,所以自己上网查阅过资料也向他人请教以及老师,.NET短信接口调用,其实,网上有许多免费的短信接口平台,但也是有限度的,如果发送的数量过多,我们 ...
小豆社保「社保代缴」短信接口被盗刷解决方案-企业短信防火墙
1 小豆社保业务及需求半夜短信费用完, 怎么知道是否有问题? 小豆社保:是一家一站式人力资源SAAS服务云智慧平台,隶属于北京新琪科技有限公司, 说简单点就是解决工作变动无挂靠单位的人代缴社保的业务 ...
我们公司的短信接口被刷了，瞬间损失两万，怎么解决？（短信接口被盗刷系列1）
1 我们公司的短信接口被刷了,瞬间损失两万前两天的中午像往常一样热,太阳不知疲倦的在天空燃烧,热跑了云彩和鸟儿,马上就要点燃空气和我的脑神经.为我和电脑降温的,是我简陋的书桌上的小电扇,没有它的话, ...
短信接口被恶意调用，瞬间损失两万，怎么解决？
1 我们公司的短信接口被恶意调用,瞬间损失两万前两天的中午像往常一样热,太阳不知疲倦的在天空燃烧,热跑了云彩和鸟儿,马上就要点燃空气和我的脑神经.为我和电脑降温的,是我简陋的书桌上的小电扇,没有它的 ...
短信接口被恶意调用？企业短信防火墙+【中昱维信】短信验证码【Java】
短信接口被恶意调用?企业短信防火墙+[中昱维信]短信验证码[Java] 一.企业短信防火墙的实现 1.1 简介 1.2 第一步:获取防火墙帐号密钥 1.3 第二步:下载防火墙服务器 1.4 第三步:业 ...

layui 登录页面样式+短信接口

layui 登录页面样式+短信接口相关推荐

最新文章

热门文章