Struct2或者SSH项目中添加手机短信登录及期间遇到的一些问题

关于程序中如何发送短信,可以参考我的上一篇博客,这里就不多陈述了。

一.首先我们从页面看起,主要页面元素如下

<form id="phoneFrom" >
	 <label for="user-name" class="am-u-sm-3 am-form-label" >手   机 </label>
	 <input type="text" class="am-form-field" name="phone" id="phoneNum" value="" placeholder="预留手机号...">
	         		
	 <button class="am-btn am-btn-default" type="button" οnclick="subform(this)">获取验证码</button>
	             		
</form>

<div class="am-input-group am-input-group-sm">
	<label for="user-name" class="am-u-sm-3 am-form-label">验证码</label>				
        <input type="text" class="am-form-field" name="username" id="codeNum" placeholder="输入验证码" >
</div>
				
<div class="am-modal-footer">
	<span class="am-modal-btn" id="submitSpan" >登录</span>
</div>

  JS处理:

<script type="text/javascript">
function subform(obj){ 
    $.ajax({  
                cache: false,//cache为true则从缓存中取数据,如果数据会变动,则需将此设为false  
                type: "POST",  
                url:"${pageContext.request.contextPath}/phoneLogin.action",  
                data:$('#phoneFrom').serialize(),// 你的formid  
                async: false,  
                dataType:"json",//设置需要返回的数据类型
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.status);
                        alert(XMLHttpRequest.readyState);
                        alert(textStatus);
                    }, 
                success: function(data) {    
                    if("true" == data.result){
                    	var submitSpan = document.getElementById("submitSpan");
                        //js中动态为标签元素添加点击事件,有如下四种方式,我这里使用了第二种
                        /*submitSpan.onclick = function () {
                   			 phoneLogin();
                 		} */
                 	submitSpan.onclick = phoneLogin;//后面不能加(),不然就直接执行该方法了
                    	//submitSpan.attachEvent("onclick",phoneLogin);//Mozilla系列,并不支持该方法,需要用到addEventListener                 
                    	//submitSpan.addEventListener("onclick", phoneLogin, true);

                    } else {
                    	alert("该用户不存在,或未绑定手机");
                    
                    }
                }  
            });  
}  
function phoneLogin(){
	var phone = document.getElementById("phoneNum").value;
	var code = document.getElementById("codeNum").value;
	var formdata = {  
                    "codeLoginPhone" : phone,  
                    "codeLoginCode" : code
                };  
    $.ajax({  
        type: "POST",  
        url: "${pageContext.request.contextPath}/phoneCodeLogin.action",  
        contentType: "application/json; charset=utf-8",  
        data: JSON.stringify(formdata),  
        dataType: "json",  
        success: function (message) { 
            if ("true" == message.result) {  
                //登录验证成功,跳转到主页
                var url = "${pageContext.request.contextPath}/mainPage.jsp";
   		window.location.href=url;   
            } else {  
                alert("保存失败");  
            }   
        },  
        error: function (message) {  
            $("#request-process-patent").html("提交数据失败!");  
        }  
    });   	
}
</script>



二.action中如何处理

   第一步,输入手机号,提交,后台验证用户是否存在,若存在,则发送短信验证码,参数使用ModelDriven方式获取,返回json格式数据,json由map转化而成

/**
	 * 使用手机号码登录
	 * @return
	 * @throws Exception
	 */
	public String phoneLogin() {		
        try {
        	Map<String,Object> map = new HashMap<String,Object>();
        	String loginPhone = adminKissfly.getPhone();
        	adminKissfly = adminKissflyService.findAdminByPhone(loginPhone);
			//判断登录是否成功
			if(adminKissfly==null){
				//当前手机号用户不存在,失败	
				map.put("result","false");
				return INPUT;
			}else{
	    		//验证码,我这里使用的是四位随机数
	    		String code = RandomUtils.makeRandomNum();
	    		//发送手机短信
	    		Map<String,String> phoneMap = new HashMap<String,String>();
	    		phoneMap.put("phone", loginPhone.trim());
	    		phoneMap.put("text", "验证码:" + code);
	    		String backMes = MessageUtils.SendMessage(phoneMap);
	    		System.out.println("短信发送情况返回码为:" + backMes);
	    		if("1".equals(backMes)){
	    			this.setRequest(ServletActionContext.getRequest());
		    		HttpSession session = request.getSession();
		    		session.setMaxInactiveInterval(60*1);//设置session有效期60秒
		    		session.setAttribute(loginPhone, code);//将验证码放入session中,60秒内有效,用于和用户输入的验证码进行比对
		    		//将数据放在Map中,然后再将Map转化成Json	            
		                map.put("result","true");
		                this.setResult(map);
		                return "phoneLoginSuccess";
	    		}else{
	    			return INPUT;
	    		}
	    		
			}

        } catch (Exception e) {
            e.printStackTrace();
        }
        return INPUT;
	}

    第二步:用户输入验证码并提交,服务器将用户输入的验证码和session中的验证码进行对比,若一致,则登录成功

/**
	 * 检验验证码是否正确
	 * @return
	 */
	public String phoneCodeLogin() {		
		try {
			this.setRequest(ServletActionContext.getRequest());
			request.setCharacterEncoding("UTF-8"); 
			ServletInputStream input = request.getInputStream();
			int len = request.getContentLength();
			if (len <= 0) {
			    return "";
			}
			byte[] buffer = new byte[len];
			input.read(buffer);
			String message = new String(buffer,"UTF-8");

			JSONObject allMessage = new JSONObject(message);
			String phone = allMessage.getString("codeLoginPhone");
			HttpSession session = request.getSession();
			String sendCode= (String) session.getAttribute(phone);
			String code = allMessage.getString("codeLoginCode");
			if(null!=sendCode&&code.equals(sendCode)){
				System.out.println("验证码一致,登录通过");
				adminKissfly = adminKissflyService.findAdminByPhone(phone);
				//判断登录是否成功
				if(adminKissfly==null){
					//失败	
					return INPUT;
				}else{
                                        //将登录信息保存在session中
                                        ServletActionContext.getRequest().getSession().setAttribute("adminKissfly", adminKissfly);
					Map<String,Object> map = new HashMap<String,Object>();
					map.put("result","true");
					this.setResult(map);
					return "phoneCodeLoginSuccess";
				}
			}
		} catch (Exception e) {
			System.out.println(e.getMessage() + e);
			e.printStackTrace();
		}
		return INPUT;
	}


三.配置文件的编辑

   Struct.xml的配置

<action name="phoneLogin" class="loginFlyAction" method="phoneLogin">
		   <result name="phoneLoginSuccess" type="json">
                <param name="root">result</param>
            </result>
		</action>
		<action name="phoneCodeLogin" class="loginFlyAction" method="phoneCodeLogin">
		   <result name="input">/loginFly.jsp</result>
		   <result name="phoneCodeLoginSuccess" type="json">
                <param name="root">result</param>
            </result>
		</action>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值