備註：原代碼使用的是阿里某短信接口，代碼配置跟具體接口文檔有關
<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+"’}");