07-项目训练_短信登陆和退出登录

目录

1，导入微信前端页面

2，编写wx/UserController

3，补充工具类

4，修改前端页面index.html 、login.html，实现短信验证登录、登出功能

---

完整项目在这里实时更新<(￣︶￣)↗[GO!]：
https://github.com/GoodbyeFirefly/ExpressManagementSystemhttps://github.com/GoodbyeFirefly/ExpressManagementSystemhttps://github.com/GoodbyeFirefly/ExpressManagementSystem

1，导入微信前端页面

将缺失的部分导入对应的文件夹中

2，编写wx/UserController

package com.xxy.wx;

import com.xxy.bean.Message;
import com.xxy.bean.User;
import com.xxy.mvc.ResponseBody;
import com.xxy.service.CourierService;
import com.xxy.service.UserService;
import com.xxy.util.JSONUtil;
import com.xxy.util.RandomUtil;
import com.xxy.util.SMSUtil;
import com.xxy.util.UserUtil;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class UserController {
    @ResponseBody("/wx/loginSms.do")
    public String sendSms(HttpServletRequest request, HttpServletResponse response) {
        String userPhone = request.getParameter("userPhone");
        String code = String.valueOf(RandomUtil.getCode());
        boolean flag = SMSUtil.send(userPhone, code);// 向控制台发送验证码
        Message msg = new Message();
        if (flag) {
            msg.setStatus(0);
            msg.setResult("验证码已发送，请查收");
        } else {
            msg.setStatus(-1);
            msg.setResult("验证码下发失败，请检查手机号或稍后再试");
        }
        UserUtil.setLoginSms(request.getSession(), userPhone, code);// 将手机号对应的验证码信息存入session中
        return JSONUtil.toJSON(msg);
    }

    @ResponseBody("/wx/login.do")
    public String login(HttpServletRequest request, HttpServletResponse response) {
        String userPhone = request.getParameter("userPhone");
        String userCode = request.getParameter("code");
        String sysCode = UserUtil.getLoginSms(request.getSession(), userPhone);// 获取存储在session中的信息
        Message msg = new Message();
        if (sysCode == null) {
            // 该手机号未获取短信
            msg.setStatus(-1);
            msg.setResult("该手机号码未获取短信");
        } else if (sysCode.equals(userCode)) {
            User user = new User();
            user.setUserphone(userPhone);
            // 手机号和验证码一致，登录成功
            if (CourierService.findByPhone(userPhone) != null) {
                // 快递员登录（包含普通用户的权限）
                msg.setStatus(1);
                user.setUser(false);// 这是新添加的属性，用于判断该手机号是用户还是快递员
            } else {
                // 普通用户登录
                msg.setStatus(0);
                user.setUser(true);
            }

            UserUtil.setWxUser(request.getSession(), user);// 将手机号和验证码的对应信息存入session

        } else {
            // 验证码不一致，登录失败
            msg.setStatus(-2);
            msg.setResult("验证码不一致");
        }
        return JSONUtil.toJSON(msg);
    }

    @ResponseBody("/wx/logout.do")
    public String logout(HttpServletRequest request, HttpServletResponse response) {
        request.getSession().invalidate();
        Message msg = new Message(0);
        return JSONUtil.toJSON(msg);
    }

    @ResponseBody("/wx/uerInfo.do")
    public String userInfo(HttpServletRequest request, HttpServletResponse response) {
        User user = UserUtil.getWxUser(request.getSession());
        Boolean isUser = user.getUser();
        Message msg = new Message();
        if (isUser)
            msg.setStatus(0);
        else
            msg.setStatus(1);
        msg.setResult(user.getUserphone());
        return JSONUtil.toJSON(msg);
    }
}

在application.properties中添加该类的信息

3，补充工具类

补充UserUtil工具类：将手机及短信信息存入session、从session中取出短信信息、将用户身份存入session、从session中取出用户身份信息

package com.xxy.util;

import com.xxy.bean.User;

import javax.servlet.http.HttpSession;

public class UserUtil {
    public static String getUsername(HttpSession session) {
        return (String) session.getAttribute("adminUsername");
    }

    public static String getUserphone(HttpSession session) {
        // 还未存储录入人的信息，这里先暂时代替一下
        return "18888888888";
    }
    public static String getLoginSms(HttpSession session, String userPhone) {
        return (String) session.getAttribute(userPhone);
    }
    public static void setLoginSms(HttpSession session, String userPhone, String code) {
        session.setAttribute(userPhone, code);
    }

    public static User getWxUser (HttpSession session) {
        return (User) session.getAttribute("wxUser");
    }
    public static void setWxUser(HttpSession session, User user) {
        session.setAttribute("wxUser", user);
    }
}

4，修改前端页面index.html 、login.html，实现短信验证登录、登出功能

index.html

<!DOCTYPE html>
<html>
<head>
	<title>快件e栈服务平台</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<link href="css/normalize.css" type="text/css" rel="stylesheet" />
	<link href="css/main.css" type="text/css" rel="stylesheet" />
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="layer/layer.js" type="text/javascript"></script>
	<script src="js/notice.js"  type="text/javascript"></script>
	<script src="js/common.js" type="text/javascript"></script>
</head>
<body>
	<div class="content">
		<div class="top autoH">
			<div class="logo autoH">
				<img src="images/logo.png" width="100%">
			</div>
		</div>
		<div class="middle">
			<form id="theForm">
				<div class="forminput">
					<input type="text" id="expressNum" name="expressNum" placeholder="请输入快递单号...">
					<input id="PageContext" type="hidden" value="${pageContext.request.contextPath}" />
					<div class="submBtn"></div>
				</div>
			</form>
		</div>
		<div class="funContdiv">
			<div class="funCont">
				<div class="userFun">
					<p class="funIcon userFunColor1"></p>
					<p class="funTxt">个人中心</p>
				</div>
				<div class="userFun">
					<p class="funIcon userFunColor2"></p>
					<p class="funTxt">懒人排行</p>
				</div>
				<div class="userFun">
					<p class="funIcon userFunColor3"></p>
					<p class="funTxt">取货二维码</p>
				</div>
				<div class="userFun">
					<p class="funIcon userFunColor4"></p>
					<p class="funTxt">我的快件</p>
				</div>
					<div class="userFun" id="userFun5">
						<p class="funIcon userFunColor5"></p>
						<p class="funTxt">快递助手</p>
					</div>
					<div class="userFun">
						<p class="funIcon userFunColor6"></p>
						<p class="funTxt">退出登录</p>
					</div>
			</div>
		</div>
	
		<div class="footer">
			<p class="copytxt">&copy;新职课版权所有</p>
		</div>
	</div>

	<script type="text/javascript">
		var isUser;
		var userPhone;
		$(function () {
			$.getJSON("/wx/uerInfo.do", null, function (data) {
				userPhone = data.result;
				if (data.status == 0){
					isUser = true;
					$("#userFun5").hide();
				}
				else
					isUser = false;
				// layer.message("欢迎您：" + userPhone);
			});
		});

	$(function(){
		var pageContextVal = $("#PageContext").val();
		$(".userFun").click(function(){
			var clickNum = $(this).index();
			switch(clickNum){
				//个人中心
				case(0): 
					window.location.href= "wxUserhome.html"; 
					break;
				case(1): 
					window.location.href= "lazyboard.html"; 
					break;
				case(2): window.location.href= "personQRcode.html"; break;
				case(3): window.location.href= "expressList.html"; break;
				case(4): window.location.href= "expressAssist.html"; break;
				case(5):
					$.getJSON("/wx/logout.do", null, function (data) {
						window.location.href= "login.html";
					});
					break;
			}
		});

		var initFunc = function(){
			var windowH = $(document).height();
			var windowW = $(document).width();

			$(".content").css({"height": windowH+"px"});

			var contentW = $(".content").width();
			var contentH = $(".content").height();

			var contH = windowH / 3;
			$(".autoH").css({"height": contH+"px"});

			// userFunH  content
			var middleH = $(".middle").height() + 40;
			var userFunH = contentH - contH - middleH - 30 -20; //footer,userfun(margin)
			$(".funContdiv").css({"height":userFunH+"px"});

			var funIconH = $(".funIcon").width(); 
			$(".funIcon").css({"height": funIconH+"px","line-height": funIconH+"px","border-radius": funIconH/2 +"px","font-size":funIconH/2 +"px"});

		};

		initFunc();

		$(window).resize(function(){
			initFunc();
		});

		// input focus
		$(".middle .forminput input").focus(function(){
			$(".middle .forminput").css({"border":"1px solid rgba(31,114,255,.75)","box-shadow":"0 0 8px rgba(31,114,255,.5)"});
		});

		// input blur
		$(".middle .forminput input").blur(function(){
			$(".middle .forminput").css({"border":"1px solid #333333","box-shadow":"none"});
		});

		//submit arrow
		$(".submBtn").click(function(){
			var expressNum = $("#expressNum").val();//快递单号
			 $.ajax({
				    type:'GET',
				    url:pageContextVal+'/ul/indexQueryExpress',
				    data:{'expressNum':expressNum},
				    dataType: "json",
				    success:function(data){
				    	var jsontmp = data;
						switch(jsontmp.code) {
							case "1" : rzAlert("操作提示",jsontmp.message); break;
							case "0" : 
								rzAlert("操作提示",jsontmp.message);
								break;
						}
				    },
				    error:function(){
				      
				    }
				});
		});
	});
	</script>
</body>
</html>

login.html

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>快件e栈用户登陆</title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body style="">
<section class="aui-flexView">
<header class="aui-navBar aui-navBar-fixed">
<a href="javascript:;" class="aui-navBar-item">

</a>
<div class="aui-center">
<span class="aui-center-title"></span>
</div>
</header>
<section class="aui-scrollView">
<div class="aui-ver-head">
<img src="images/head.png" alt="">
</div>
<div class="aui-ver-form"><img class="logo" src="images/logo.png">
<div class="aui-flex">
<div class="aui-flex-box">
<i class="icon icon-phone"></i>
<input id="phone1" type="text" autocomplete="off" placeholder="手机号码">
</div>
</div>
<div class="aui-flex">
<div class="aui-flex-box">
<i class="icon icon-code"></i>
<input id="code1" type="text" autocomplete="off" placeholder="验证码">
</div>
<div class="aui-button-code">
<input id="btnSendCode1" type="button" class="btn btn-default" value="获取验证码" onclick="sendMessage1()">
</div>
</div>
<div class="aui-ver-button">
<button onclick="binding()">立即登录 / 注册</button>
</div>
<div class="aui-cell-box">
<label class="cell-right">
<input type="checkbox" value="1" name="checkbox" checked="checked">
<i class="cell-checkbox-icon"></i>
<em>同意快递e栈注册协议</em>
</label>
</div>
</div>
</section>
</section>
<script src="js/jquery.min.js"></script>
<script src="layer/layer.js"></script>
<script type="text/javascript">
	var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;
	var count = 60;
	var InterValObj1;
	var curCount1;
	function sendMessage1() {
		curCount1 = count;
		var phone = $.trim($('#phone1').val());
		if (!phoneReg.test(phone)) {
			alert(" 请输入有效的手机号码");
			return false;
		}

		$("#btnSendCode1").attr("disabled", "true");
		$("#btnSendCode1").val( + curCount1 + "秒再获取");
		InterValObj1 = window.setInterval(SetRemainTime1, 1000);
        var windowId = layer.load();
		// 发送短信
        $.get("/wx/loginSms.do", {userPhone:phone}, function (data) {
            layer.close(windowId);
            layer.msg(data.result);
        });

	}
	function SetRemainTime1() {
		if (curCount1 == 0) {
			window.clearInterval(InterValObj1);
			$("#btnSendCode1").removeAttr("disabled");
			$("#btnSendCode1").val("重新发送");
		}
		else {
			curCount1--;
			$("#btnSendCode1").val( + curCount1 + "秒再获取");
		}
	}

	function binding(){
        if(!$(":checkbox").prop("checked")){
            layer.msg("未勾选协议,无法登陆");
            return;
        }
		//alert("正在登陆")
        // window.location.href="index.html";
        var userPhone = $.trim($('#phone1').val());
        var code = $.trim($('#code1').val());
        var windowId = layer.load();
        $.post("/wx/login.do", {userPhone:userPhone, code:code}, function (data) {
            layer.close(windowId);
            if (data.status == 0 || data.status == 1) {
                window.location.href = "index.html";
            }
            layer.msg(data.result);
        }, "JSON");
	}
</script>

</body></html>

---

章节汇总在这里（づ￣3￣）づ╭❤～@&再见萤火虫&【07-项目训练】

---

对学习Java感兴趣的同学欢迎加入QQ学习交流群：1126298731

有问题欢迎提问，大家一起在学习Java的路上打怪升级！(o゜▽゜)o☆[BINGO!]