struts2+jquery实现用户登录功能（前、后端完整代码）

最新推荐文章于 2019-09-08 07:54:13 发布

deniroo

最新推荐文章于 2019-09-08 07:54:13 发布

阅读量7.7k

点赞数

文章标签： jQuery Struts 登录

本文链接：https://blog.csdn.net/lisq037/article/details/9121681

版权

包括以下主要功能：

【1】登录

【2】注销

【3】验证码

【4】“记住我”

登录Action：

package com.fsti.ssh.action;

import org.apache.commons.lang3.StringUtils;
import org.apache.log4j.Logger;

import com.fsti.ssh.utils.JsonUtils;
import com.opensymphony.xwork2.Action;

/**
 * 登录
 * 
 * @author deniro
 */
public class LoginAction extends BaseAction {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	
	static Logger log = Logger.getLogger(LoginAction.class);
	
	/**
	 * 用户Session名称
	 */
	public static final String USER_SESSION_NAME = "user";

	/**
	 * 登出
	 * 
	 * @return
	 */
	public String logOut() {
		session.clear();
		return Action.LOGIN;
	}

	/**
	 * 登录
	 * 
	 * @return
	 */
	public String login() {
		String account = request.getParameter("account");
		String password = request.getParameter("password");
		String valificationCode = request.getParameter("valificationCode");
		
		//判断验证码
		String valificationCodeSessionValue=(String)session.get(ValificationCodeAction.VALIFICATION_CODE_SESSION_NAME);
		if(!StringUtils.equals(valificationCode, valificationCodeSessionValue)){
			JsonUtils.write(response, binder.toJson("result", Action.ERROR));
			return null;
		}
		
		//判断账号、密码；  演示使用：manager/manager
		if(StringUtils.equals("manager", account)&&StringUtils.equals("manager", password)){
			JsonUtils.write(response, binder.toJson("result", Action.SUCCESS));
			session.put(USER_SESSION_NAME, account);
			return null;
		}
		
		JsonUtils.write(response, binder.toJson("result", Action.INPUT));
		return null;
	}

}

验证码Action：

package com.fsti.ssh.action;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.imageio.stream.ImageOutputStream;

/**
 * 验证码
 * 
 * @author deniro
 */
public class ValificationCodeAction extends BaseAction {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	private ByteArrayInputStream inputStream;
	
	/**
	 * 验证码session名称
	 */
	public static final String VALIFICATION_CODE_SESSION_NAME="valificationCode";

	public String execute() throws Exception {
		
		
		// 在内存中创建图象
		int width = 60, height = 20;
		BufferedImage image = new BufferedImage(width, height,
				BufferedImage.TYPE_INT_RGB);

		// 获取图形上下文
		Graphics g = image.getGraphics();

		// 生成随机类
		Random random = new Random();

		// 设定背景色
		g.setColor(getRandColor(200, 250));
		g.fillRect(0, 0, width, height);

		// 设定字体
		g.setFont(new Font("Times New Roman", Font.PLAIN, 18));

		// 随机产生155条干扰线，使图象中的认证码不易被其它程序探测到
		int lineCount=10;//干扰线个数
		g.setColor(getRandColor(160, 200));
		for (int i = 0; i < lineCount; i++) {
			int x = random.nextInt(width);
			int y = random.nextInt(height);
			int xl = random.nextInt(12);
			int yl = random.nextInt(12);
			g.drawLine(x, y, x + xl, y + yl);
		}

		// 取随机产生的认证码(6位数字)
		int codeCount=4;//认证码个数
		String sRand = "";
		for (int i = 0; i < codeCount; i++) {
			String rand = String.valueOf(random.nextInt(10));
			sRand += rand;

			// 将认证码显示到图象中
			g.setColor(new Color(20 + random.nextInt(110), 20 + random
					.nextInt(110), 20 + random.nextInt(110)));

			// 调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成
			g.drawString(rand, 13 * i + 6, 16);
		}

		// 将认证码存入SESSION
		session.put(VALIFICATION_CODE_SESSION_NAME, sRand);

		// 图象生效
		g.dispose();
		ByteArrayOutputStream output = new ByteArrayOutputStream();
		ImageOutputStream imageOut = ImageIO.createImageOutputStream(output);
		ImageIO.write(image, "JPEG", imageOut);
		imageOut.close();
		ByteArrayInputStream input = new ByteArrayInputStream(
				output.toByteArray());
		this.setInputStream(input);
		return SUCCESS;
	}

	/*
	 * 给定范围获得随机颜色
	 */
	private Color getRandColor(int fc, int bc) {
		Random random = new Random();
		if (fc > 255)
			fc = 255;
		if (bc > 255)
			bc = 255;
		int r = fc + random.nextInt(bc - fc);
		int g = fc + random.nextInt(bc - fc);
		int b = fc + random.nextInt(bc - fc);
		return new Color(r, g, b);
	}

	public void setInputStream(ByteArrayInputStream inputStream) {
		this.inputStream = inputStream;
	}

	public ByteArrayInputStream getInputStream() {
		return inputStream;
	}

}

验证码的struts配置：

<!-- 验证码配置 -->
	<package name="valificationCode" extends="struts-default">  
		<action name="valificationCode" class="com.fsti.ssh.action.ValificationCodeAction">  
	      <result type="stream">  
	               <param name="contentType">image/jpeg</param>  
	               <param name="inputName">inputStream</param>  
	        </result>  
	 	</action> 
 	</package>

登录JS：

$(document).ready(function(){
	
	//回车后登录
	document.onkeydown = function(e){ 
		var ev = document.all ? window.event : e; 
		if(ev.keyCode==13) { 
			login();
		} 
	};
	
	//判断之前是否有设置cookie，如果有，则设置【记住我】选择框
	if($.cookie('ssh_account')!=undefined){
		$("#rememberMe").attr("checked", true);
	}else{
		$("#rememberMe").attr("checked", false);
	}
	
	//读取cookie
	if($('#rememberMe:checked').length>0){
		$('#account').val($.cookie('ssh_account'));
		$('#password').val($.cookie('ssh_password'));
	}
	
	//监听【记住我】事件
	$("#rememberMe").click(function(){
		setOrRemoveCookies();
	});
});


//登录
function login() {
	var account=$("#account").val();
	if (account == "") {
		$("#msg").html("账号不能为空！");
		$('#account').focus();
		return;
	}
	
	var password=$("#password").val();
	if ($("#password").val() == "") {
		$("#msg").html("密码不能为空！");
		$('#password').focus();
		return;
	}
	
	var valificationCode=$("#valificationCode").val();
	if ($("#valificationCode").val() == "") {
		$("#msg").html("验证码不能为空！");
		$('#valificationCode').focus();
		return;
	}
	
	setOrRemoveCookies();
	
	$.ajax({
		  type: "POST",
		  url: "login!login.action",
		  data: "account="+account+"&password="+password+"&valificationCode="+valificationCode, 
		  dataType: "json",
		  success: function(data, textStatus){ 
				var tip="登录不成功！";
	        	switch(data.result){
				case "input":
					tip="账号或密码错误！";
					break;
				case "error":
					tip="验证码错误！";
					changeValidateCode($("#valificationCodeImg"));
					break;
				case "success":
					tip="正在进入演示平台，请稍候...";
					var	indexUrl="forward!dwz.action";
					var appPath ="/"+location.pathname.split("/")[1] +"/";
					window.location.href =appPath+ indexUrl;
					break;
	        	}
				 $("#msg").html(tip);
		   },
		  beforeSend: function(formData, jqForm, options) {
			   $("#msg").html("正在登录，请稍候...");
		   },
		  async: true
		});
}

//判断是否勾选了【记住我】选择框，进行设置或清除Cookie
function setOrRemoveCookies(){
	if($('#rememberMe:checked').length>0){//设置cookie
		$.cookie('ssh_account', $('#account').val());
		$.cookie('ssh_password', $('#password').val());
	}else{//清除cookie
		$.removeCookie('ssh_account');
		$.removeCookie('ssh_password');
	}
}


//验证码
function changeValidateCode(obj) {  
 //获取当前的时间作为参数，无具体意义  
 var timenow = new Date().getTime();  
 
 //每次请求需要一个不同的参数，否则可能会返回同样的验证码  
 //这和浏览器的缓存机制有关系，也可以把页面设置为不缓存，这样就不用这个参数了。  
 obj.attr("src","valificationCode.action?d="+timenow);
}

登录页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<%@include file="noCache.jsp" %>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SSH演示平台</title>
<link href="lib/dwz/themes/css/login.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="lib/dwz/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="lib/cookies/jquery.cookie.js"></script>
<script type="text/javascript" src="js/login.js"></script>

</head>
<body>
	<div id="login">
		<div id="login_header">
			<h1 class="login_logo">
				<a href="#"><img src="lib/dwz/themes/default/images/login_logo.gif" /></a>
			</h1>
			<div class="login_headerContent">
				<div class="navList">
					<ul>
						<li><a href="#">设为首页</a></li>
						<li><a href="#">反馈</a></li>
						<li><a href="#" target="_blank">帮助</a></li>
					</ul>
				</div>
				<h2 class="login_title"><img src="lib/dwz/themes/default/images/login_title.png" /></h2>
			</div>
		</div>
		<div id="login_content">
			<div class="loginForm">
				<form action="index.html">
					<p>
						<label>账号：</label>
						<input type="text" name="account" id="account" size="20" class="login_input" />
					</p>
					<p>
						<label>密码：</label>
						<input type="password" name="password" id="password" size="20" class="login_input" />
					</p>
					<p>
						<label>验证码：</label>
						 						
					</p>
					<p>
						<input class="login_input" type="text" size="20" id="valificationCode" />
						<span  style="cursor:pointer" οnclick="changeValidateCode($('#valificationCodeImg'))">
						<img id="valificationCodeImg"  src="valificationCode.action" alt="验证码" /> 看不清，换一张</span>
					</p>
					<p>
						 <input id="rememberMe" type="checkbox"/> 记住我
					</p>
					<div class="login_bar">
						<input class="sub" type="button" value=""  οnclick="login();"/>
					</div>
					<p></p>
					<span id="msg"></span>
				</form>
			</div>
			<div class="login_banner"><img src="lib/dwz/themes/default/images/login_banner.jpg" /></div>
			<div class="login_main">
				<div class="login_inner">
					<p>您可以使用 网易网盘 ，随时存，随地取</p>
					<p>您还可以使用 闪电邮 在桌面随时提醒邮件到达，快速收发邮件。</p>
					<p>在 百宝箱 里您可以查星座，订机票，看小说，学做菜…</p>
				</div>
			</div>
		</div>
		<div id="login_footer">
			Copyright © 2009-2013 www.fsti.com Inc. All Rights Reserved.
		</div>
	</div>
</body>
</html>