07-项目训练_短信登陆和退出登录
2024-05-09 17:20:04
目录
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);elsemsg.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="data: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();}elseisUser = 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 contentvar 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="data:images/head.png" alt="">
</div>
<div class="aui-ver-form"><img class="logo" src="data: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!]
07-项目训练_短信登陆和退出登录相关推荐
- java手机验证码登陆_在Web项目中手机短信验证码实现的全过程记录
这篇文章主要给大家介绍了关于在Web项目中实现短信验证码的全过程记录,文中通过示例代码介绍的非常详细,在文末跟大家提供了源码下载,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧. 前言 最近在做 ...
- AbpVnext 扩展企业微信扫码登录（钉钉登陆、短信登陆、微信登陆等）Vue框架
目录 1.开始开发准备 1.1 企业微信扫码登陆接入流程 1.2 开启网页授权登陆 1.3 构造独立窗口登陆二维码 1.4 构造内嵌登陆二维码 @@登陆顺序: 1. 发现文档配置 2. 获取token ...
- 一周完成的小项目-某银行短信发送
上周五突然告知给某银行做一个发短信的小项目,要求本周四上线,对此我只能说呵呵 项目要求发送短信,发送记录,发送审核,发送限制,基本的权限控制等等. 果断使用Jeecg,这样我就只用做业 ...
- 电信卡_短信查询指令
电信卡_短信查询指令 尊敬的用户,欢迎使用电信短信营业厅,您可以直接回复所选菜单编号(或拼音代码)进行业务受理和查询. 1.费用查询 (101)(SSHF) 实时话费 (102)(ZHYE) 帐户余额 ...
- Springboot短信验证和第三方登录
短信验证 准备工作:登录阿里云控制台->购买短息服务->创建签名->创建模板. 登录控制台购买短信服务 创建签名(注意:创建access的子账户时需保存access的相关信息值) 创 ...
- 手机短信注册验证与登录功能
文章目录 一.前言 二.准备工作 三.发布短信 1.基本测试发布 ①可-使用测试模板进行调试 ②测试结果 ③注意,可能会调试失败,是因为没有余额.进入首页点击头像>进入余额充值:一条大概4分钱 ...
- Win10《芒果TV》更新v3.8.50勇敢版：新增短信和扫码登录
勇敢,是心中最初的信仰,实景科幻实验节目<勇敢的世界>,重装上阵对抗升级,<中餐厅2>皇阿玛圣驾亲临,坐镇中国味道.Win10版<芒果TV>全平台同步更新勇敢版v3 ...
- Springboot+redis+榛子云短信验证服务进行登录
Springboot+redis+榛子云短信验证服务进行登录 前言 最近在做尚医通的医院预约挂号管理系统时,做到了使用阿里云的短信验证服务,但是现在阿里云的短信验证服务审核听说非常严格,主要是我没有专 ...
- 第53章 短信验证服务和登录的前端定义实现
1 向src\router\index.js添加定义 { path: '/LoginSms', name: '手机号登录', component: () => import('../views/ ...
最新文章
- 松耦合和紧耦合的架构设计、性能对比
- Spring官网阅读（二）（依赖注入及方法注入）
- 【ORACLE 高可用】ORACLE STREAM 基于用户的流复制配置 案例
- 多项式求逆模板（NTT + mod）
- 【渝粤题库】国家开放大学2021春1349学前教育科研方法答案
- 根据注释生成项目文档
- 1060. 爱丁顿数(25)-PAT乙级真题
- c#生成随机彩色验证码例子
- 【服务器正在运行中】以及【切换到】等错误问题的解决
- ActivityMQ入门案例
- 拉扎维模拟CMOS集成电路设计python建模工程——利用matplotlib绘制NMOS与PMOS转移特性曲线
- vscode快建创建vue模板
- 05｜音频降噪概述(1)一传统降噪方法
- pt和px有什么区别?pt和px如何转换?
- access函数的用法
- 微信白名单服务器ip地址,微信服务器白名单IP列表
- python送程序员收入_程序员学Python后惊叹，这么丰厚的收入是Java给不了的！
- landsat7数据预处理
- 2023年AP微观经济学考什么？
- 弘辽科技：如何快速提升抖音小店