Jquery JAVA 用JAVA和Jquery实现扫码登录的原理和代码

最新推荐文章于 2024-05-12 01:33:47 发布
最新推荐文章于 2024-05-12 01:33:47 发布
阅读量803 收藏 7
点赞数
分类专栏： 学习 文章标签： 扫码登录 JAVA Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41594146/article/details/82745522
版权

首先下载生成二维码的Jquery插件:https://pan.baidu.com/s/1eZESxNxgFDxsuc8ik8Ahjg

贴上前端代码,供参考

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">


	var flag = false;
	//登录
	function login() {
		if ($('#user_name').val().length < 1) {
			alert('请输入用户名');
			return;
		} else if ($('#user_pwd').val().length < 1) {
			alert('请输入密码');
			return;
		}
var ss=GetQueryString('s');
		$.ajax({
			type : "post",
			url : "useraction.action?methodName=loginup",
			dataType : "json",
			data : {
				user_name : $('#user_name').val(),
				user_pwd : $('#user_pwd').val(),
				s:ss,
				d : new Date()
			},
			success : function(data) {
				//返回处理的方法
				if (data!=0) {
					if (GetQueryString('m') == 'go') {
						location.href = "findBook.jsp?go=to";
						return;
					}
					if(data==2){
						location.href = "index.jsp";
					}else if(data==1){
						location.href = "addBook.jsp";
					}
					
				} else {
					alert('登录失败');
					location.href="login.jsp"
				}
			}
		});
	}
	setInterval("iflogin();", "1500");//定时器
	//判断是否登录
	function iflogin() {
		$.ajax({
			type : "post",
			url : "useraction.action?methodName=loginfalg",
			dataType : "json",
			data : {
				 <%String x = UUID.randomUUID().toString();%>
				   random:'<%=x%>',
				d : new Date()
			},
			success : function(data) {
				//返回处理的方法
				if (data!=0) {
					if (GetQueryString('m') == 'go') {
						location.href = "findBook.jsp?go=to";
						return;
					}
					if(data==2){
						location.href = "index.jsp";
					}else if(data==1){
						location.href = "addBook.jsp";
					}
				}
			}
		});
	}

	//获取地址栏的值
	function GetQueryString(name) {
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
		var r = window.location.search.substr(1).match(reg);
		if (r != null)
			return unescape(r[2]);
		return null;
	}
	var ll = true;
	//显示
	function er() {
		if (ll) {
			$('#tables').show();
			$('#tab1').hide();
			ll = false;
		} else {
			$('#tables').hide();
			$('#tab1').show();
			ll = true;
		}
	}
	//生成二维码的方法
	

</script>
</head>

<body>
	<!--top-->

	<jsp:include page="commonality.jsp"></jsp:include>
	<div class="logoin_wrap mt30">
		<h2>用户登陆</h2>
		<div id="table">
			<form id='tab1'>
				<table width="100%" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td height="30px"></td>
					</tr>
				</table>
				<table width="100%" height="35" border="0" cellpadding="0"
					cellspacing="0">
					<tr>
						<td width="44%" align="right" valign="middle" class="f14">用户名：</td>
						<td width="56%" align="left" valign="middle"><input
							type="text" name="user_name" value="" id="user_name"
							class="input w180"></td>
					</tr>
				</table>
				<table width="100%" height="35" border="0" cellpadding="0"
					cellspacing="0">
					<tr>
						<td width="44%" align="right" valign="middle" class="f14">密&nbsp;&nbsp;码：</td>
						<td width="56%" align="left" valign="middle"><input
							type="password" name="user_pwd" value="" id="user_pwd"
							class="input w180"></td>
					</tr>
				</table>

				<table width="100%" height="35" border="0" cellpadding="0"
					cellspacing="0">
					<tr>
						<td width="44%" align="right" valign="middle" class="f14"></td>
						<td width="56%" align="left" valign="middle">
							<!-- 图片按钮，与type=submit按钮的效果是一样，也可以用来提交表单 --> <img
							src="images/admin_dl.png" onclick="login();" /> <!-- 							onclick="login();" -->
							<a id='er' onclick="er()">二维码登录</a>
						</td>
					</tr>
				</table>
				<table width="100%" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td>&nbsp;</td>
					</tr>
				</table>
			</form>
			<div id='tables' align="center">
				<br>
				<div>
					<a href="#" onclick="er()">帐号密码登录</a>
				</div>
			</div>
		</div>
	</div>
	<!--end content-->

	<!--footer-->

	<div id="footer_wrap">
		<p>Copyright ©2014 飞凡教育，版权所有</p>
	</div>

	<!--end footer-->
	<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>

	<script type="text/javascript">
	$(function() {
		$('#tables').hide();
		$("#tables").qrcode({
		    render: "canvas", //也可以替换为table
		    width: 250,
		    height: 250,
		    //扫码动作
	 	    text:"http://192.168.43.147:8080/BookProject/useraction.action?methodName=sm&user_name=admins&random=<%=x%>"
	<%-- 	    text: "http://192.168.43.217:8080<%=request.getRequestURI()%>" --%>
		});
	});
	</script>

然后贴上后端代码

public class UserAction extends ActionSupport implements ModelDriven<User> {
	private User u = new User();
	private UserDao ud = new UserDaoImpl();

	/**
	 * 
	 * @Title: add
	 * @Description: 注册
	 * @param request
	 * @param response
	 * @return
	 * @return String
	 */
	public ActionForward add(HttpServletRequest request, HttpServletResponse response) {

		try {
			int index = ud.AddUser(u);
			String str = JSON.toJSONString(index);
			super.print(str, response);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}

	/**
	 * 
	 * @Title: loginup
	 * @Description: (判断是手机还是电脑登录)
	 * @param request
	 * @param response
	 * @return
	 * @return ActionForward
	 */
	public void loginup(HttpServletRequest request, HttpServletResponse response) {
		if (request.getParameter("s") == null || request.getParameter("s").equals("")) {
			login(request, response);
		} else {
			Phonelogin(request, response);
		}
	}

	/**
	 * @Title: Phonelogin
	 * @Description: (手机登录)
	 * @param request
	 * @param response
	 * @return
	 * @return ActionForward
	 */
	public ActionForward Phonelogin(HttpServletRequest request, HttpServletResponse response) {
		try {
			User login = null;
			// String user_pwd = request.getParameter("user_pwd");
			login = ud.Login(u);
			if (login != null) {// 登录成功
				System.out.println("手机登陆");
				request.getSession().setAttribute("user", login);// 也存在手机会话中
				if (login.getUser_type() == 2) {
					// 是用户
					String str = JSON.toJSONString(2);
					super.print(str, response);
					return null;
				} else {// 管理员
					String str = JSON.toJSONString(1);
					super.print(str, response);
					return null;
				}
			} else {// 登录失败
				String str = JSON.toJSONString(0);
				super.print(str, response);
			}
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}

	/**
	 * 
	 * @Title: sm
	 * @Description: (判断有没有扫码动作)
	 * @param request
	 * @param response
	 * @return
	 * @return ActionForward
	 */
	public ActionForward sm(HttpServletRequest request, HttpServletResponse response) {
		String random = request.getParameter("random");// 随机字符用来区分用户
		Object attribute = request.getSession().getAttribute("user");// 用户手机的对象
		if (u.getUser_name() != null) {
			System.out.println("扫码");
			if (attribute != null) {// 如果在手机上登录
				String str = "登录成功";
				User u = (User) attribute;// 将手机的登录的用户放入ServletContext
				request.getServletContext().setAttribute(random, u);
				try {
					response.getWriter().print("<script>alert('登录成功')</script>");
				} catch (IOException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
			} else {// 如果在手机上没有登录
				try {
					response.getWriter().print("<script>alert('您还未登录'); location.href='login.jsp?s=m'</script>");
				} catch (IOException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
			}
		}
		return null;
	}

	/**
	 * 
	 * @Title: login
	 * @Description: 电脑登陆
	 * @param request
	 * @param response
	 * @return
	 * @return ActionForward
	 */
	public ActionForward login(HttpServletRequest request, HttpServletResponse response) {
		try {
			System.out.println("电脑登录");
			int flag = 0;
			User user = ud.Login(u);
			if (user != null) {
				request.getSession().setAttribute("user", user);
				if (user.getUser_type() == 2) {// 如果是用户
					flag = 2;
					String str = JSON.toJSONString(flag);
					super.print(str, response);
					return null;
				} else {
					flag = 1;// 管理员
					String str = JSON.toJSONString(flag);
					super.print(str, response);
					return null;
				}
			} else {
				flag = 0;
			}
			// request.getSession().getServletContext().setAttribute("user", user);
			String str = JSON.toJSONString(flag);
			super.print(str, response);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}

	/**
	 * 
	 * @Title: Judge
	 * @Description: 判断是否重复
	 * @param request
	 * @param response
	 * @return
	 * @return ActionForward
	 */
	public ActionForward judge(HttpServletRequest request, HttpServletResponse response) {
		int index = 0;
		try {
			index = ud.Judge(u);
			String str = JSON.toJSONString(index);
			super.print(str, response);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}

	/**
	 * 
	 * @Title: loginfalg
	 * @Description: (login不停的请求)
	 * @param request
	 * @param response
	 * @return
	 * @return ActionForward
	 */
	public ActionForward loginfalg(HttpServletRequest request, HttpServletResponse response) {
		// 手机端对象
		String random = request.getParameter("random");
		User attribute = null;
		if (random != null) {
			attribute = (User) request.getServletContext().getAttribute(random);// 扫码动作对象
		}
		int index = 0;// 用index作为条件让用户判断
		if (attribute != null) {// 有扫码动作 和手机端登录时
			System.out.println("成功");
			/**
			 * 将手机端对象保存到session
			 */
			request.getSession().setAttribute("user", attribute);
			index = attribute.getUser_type();// 是不是管理员
			/**
			 * 将扫码动作保存下来的对象清空
			 */
			request.getServletContext().setAttribute(random, null);
		}
		String str = JSON.toJSONString(index);
		try {
			super.print(str, response);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return null;
	}

	/**
	 * 
	 * @Title: exit
	 * @Description: (用户退出系统)
	 * @param request
	 * @param response
	 * @return
	 * @return ActionForward
	 */
	public ActionForward exit(HttpServletRequest request, HttpServletResponse response) {
		request.getSession().setAttribute("user", null);// 退出使用的
		// request.getServletContext().setAttribute("userfalg", null);//
		return new ActionForward(false, "login.jsp");
	}

实现登录的原理是首先在手机和电脑在同一局域网下,如果然后用手机浏览器访问登录页面,在手机端访问登录页面的时候后面带个?s=xxx,或者&s=xxx,在手机端登录之后,使用浏览器的扫码功能扫描显示的二维码即可,详情请看代码,如有不懂的地方请留言

beyond丿qq:1559810637
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Java扫码登录原理
愤怒的懒洋洋的博客
04-20 1万+
Java轻松玩转扫码登录一、博主自言        最近公司项目中遇到了，发现不少朋友都对这个不了解，正好自己也对这感兴趣。所以就研究了下。        扫码登录技术觉得是不错的干货。就分享给打大家了。希望会对大家有所帮助，欢迎留言提问。        PS文章底部是我的代码下载链接，大家可以自行下载。 二、原理简介流程图1、进入网站-生成UUID2、跳转到二维码页面（二维码的生成与UUID关联...
jQuery实现二维码扫描功能
10-20
主要介绍了jQuery利用jquery.qrcode.min.js插件实现二维码扫描功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jquery.qrcode.js下载以及扫码登录实现
12-14
jquery.qrcode.js下载以及扫码登录实现,jquery.qrcode.js下载以及扫码登录实现,jquery.qrcode.js下载以及扫码登录实现
扫码登录代码框架——java
04-20
扫码登录，解压后可以看看帮助引导，更好的让你了解项目，也可以查看我的博客文章。
使用vue+weixin-js-sdk实现公众号页面的扫码功能
no pains,no gains
03-22 914
vue+barcode 实现app端的扫码功能 同样的，详细的api文档描述可以看微信官方文档，这里就简单列一下用到的点。 1.引入weixin-js-sdk 依赖 vue全局使用 npm install weixin-js-sdk import wx from "weixin-js-sdk"; Vue.prototype.wx = wx; 2.通过config接口注入权限验证配置 此处的appId、timestamp、nonceStr、signature都是从后端接口获得。(大部分调试时间都
Java最新面试官：如何实现扫码登录功能？，撸了大神写的spring源码笔记
最新发布
2401_84584324的博客
05-12 1425
我们总是喜欢瞻仰大厂的大神们，但实际上大神也不过凡人，与菜鸟程序员相比，也就多花了几分心思，如果你再不努力，差距也只会越来越大。实际上，作为程序员，丰富自己的知识储备，提升自己的知识深度和广度是很有必要的。
详解java实现简单扫码登录功能(模仿微信网页版扫码)
08-26
"Java 实现简单扫码登录...Java 实现简单扫码登录功能需要使用 Java 语言、js 语言和 jQuery.qrcode.js 库等技术，实现生成二维码、循环请求服务端、判断是否被扫描、超时失效功能、登录成功后产生 sessionId 等步骤。
java实现手机扫描二维码后网站跳转新页面
10-21
本篇文章将详细讲解如何使用Java来实现这一功能，主要涉及两种库：ZXing（Zebra Crossing）和Hutools。 ZXing是一个开源的二维码和条形码处理库，提供了多种编码和解码功能。而Hutools是一个轻量级的Java工具包，也...
spring boot+jquery扫码登陆实例
07-31
在本实例中，我们将探讨如何使用Spring Boot与jQuery结合实现扫码登录功能。Spring Boot是Java领域的一款快速开发框架，简化了Spring应用的初始搭建以及开发过程。而jQuery是一款广泛使用的JavaScript库，它使得DOM...
jquery代码制作扫一扫在线二维码(QRCode)生成器
04-25
jquery 代码制作扫一扫在线二维码(QRCode)生成器 特效处理
实现扫描二维码功能项目源码JAVA整合HTML5.zip
07-18
实现扫描二维码功能项目源码JAVA整合HTML5
java实现二维码带logo或不带logo源码,可以直接运行测试类生产二维码及扫码测试
09-14
可直接测试，或拷入相关代码，直接可用。下载压缩包解压后导入eclipse，导入maven项目，其logo设置，扫码后访问的地址，可参考我的另一篇博文：https://blog.csdn.net/weixin_40841731/article/details/82692305
Jquery学习 Jquery源代码 Jquery数据库操作
03-28
Jquery学习 Jquery源代码 Jquery数据库操作 Jquery学习 Jquery源代码 Jquery数据库操作 绝对有用，技术含量
java实现简单扫码登录功能(模仿微信网页版扫码)
weixin_38851693的博客
12-04 1965
java实现简单扫码登录功能 模仿微信pc网页版扫码登录 使用js代码生成qrcode二维码减轻服务器压力 js循环请求服务端,判断是否qrcode被扫 二维码超时失效功能 二维码被扫成功登录,服务端产生sessionId,传到页面使用js保存cookie 多线程 生成qrcode相关js jquer...
jQuery 画二维码
Alex_majm的博客
09-21 2105
这篇文章主要 介绍了jQuery利用jquery.qrcode.min.js插件实现二维码扫描功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下   二维码：利用图形模拟二进制0、1的概念，达到存储少量数据的功能，一般移动端浏览器解析出二维码里面隐藏的url数据会自动进行跳转，常见的支付宝、微信扫描登陆就是利用该原理  Jquery二维码的实现：jquery.qrcode.min.js插...
用JQ完成用户登录功能(带cookie原理)
LaoYangSaid的博客
06-20 697
https://editor.csdn.net/md/?articleId=106872942 在此代码的基础上增添 创建一个HTML用来声明cookie进行输出 <!-- 这个页面是用来专门读取Cookie --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi.
Jquery扫描二维码的简单实现
ZERONELOVE
03-03 5617
二维码：利用图形模拟二进制0、1的概念，达到存储少量数据的功能，一般移动端浏览器解析出二维码里面隐藏的url数据会自动进行跳转，常见的支付宝、微信扫描登陆就是利用该原理 Jquery二维码的实现：jquery.qrcode.min.js插件 HTML正文：<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>
C# MVC 微信扫码支付教程：扫码支付代码实例详解
C# MVC 微信支付教程系列之扫码支付代码实例 本文主要讲解了微信扫码支付的实现方法，扫码...微信扫码支付是一种非常方便和广泛应用的支付方式，通过使用C# MVC框架和微信支付API，可以轻松实现微信扫码支付的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值