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

包括以下主要功能:

【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>


  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值