备注：原代码使用的是阿里某短信接口，代码配置跟具体接口文档有关
<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)
@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+"’}");