天天看點
傳回

07-項目訓練_短信登陸和登出

目錄

​​1，導入微信前端頁面​​

​​2，編寫wx/UserController​​

​​3，補充工具類​​

​​4，修改前端頁面index.html 、login.html，實作短信驗證登入、登出功能​​

完整項目在這裡實時更新<(￣︶￣)↗[GO!]：

​​​https://github.com/GoodbyeFirefly/ExpressManagementSystemhttps://github.com/GoodbyeFirefly/ExpressManagementSystem

07-項目訓練_短信登陸和登出
https://github.com/GoodbyeFirefly/ExpressManagementSystem​​

1，導入微信前端頁面

07-項目訓練_短信登陸和登出

将缺失的部分導入對應的檔案夾中

2，編寫wx/UserController

07-項目訓練_短信登陸和登出
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中添加該類的資訊

07-項目訓練_短信登陸和登出

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">©新職課版權所有</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>
微信前端 短信登陸 開課吧 JavaWeb開發 html
上一篇: 07-項目訓練_二維碼展示
下一篇: php7操作mongodb資料庫

繼續閱讀