关于登录界面登录验证，个人项目

阿里巴巴素材库这个网址可以找图标，比如验证码的图标等等

@Controller //注解使类加载
@ReuestMapping("/system") //注解请求的路径
public class SystemController{

	@RequestMapping(value="/login",method=RequestMethod.GET)
	public ModelAndView login(ModelAndView model){
		model.setViewName("system/login");
		return model;
	}
}

@RequestMapping(value="/login",method=RequestMethod.POST)//get是请求一个页面，post是提交一个表单
@ResponseBody
public Map<String,String> loginAct(User user,String cpacha,HttpServletRequest request){
	Map<String,String> ret = new HashMap<String,String>();
	if(user == null){
		ret.put("type","error");
		ret.put("msg","请填写用户信息");
		return ret;
	}
	if(StringUtils.isEmpty(cpacha) ){
		ret.put("type","error");
		ret.put("msg","请填写验证码");
		return ret;
	}
	if(StringUtils.isEmpty(user.getUsername()) ){
		ret.put("type","error");
		ret.put("msg","请填写用户名");
		return ret;
	}
	if(StringUtils.isEmpty(user.getPassword()) ){
		ret.put("type","error");
		ret.put("msg","请填写密码");
		return ret;
	}
	Object attribute  = request.getSession().getAttribute("loginCpacha");
	if(loginCpacha == null){
		ret.put("type","error");
		ret.put("msg","会话超时，请刷新页面");
		return ret;
	}
	if(!cpacha.toUpperCase().equals(loginCpacha.toString().toUpperCase())){
			ret.put("type","error");
		ret.put("msg","验证码错误");
		return ret;
}
	//不是上面几种情况就到成功界面
	ret.put("type","success");
	ret.put("msg","登录成功");
	return ret;
}

验证码的功能在controller页面里

	/**
	 * 本系统所有的验证码均采用此方法
	 * @param vcodeLen
	 * @param width
	 * @param height
	 * @param cpachaType:用来区别验证码的类型，传入字符串
	 * @param request
	 * @param response
	 */
	@RequestMapping(value="/get_cpacha",method=RequestMethod.GET)
	public void generateCpacha(
			@RequestParam(name="vl",required=false,defaultValue="4") Integer vcodeLen,
			//表示验证码区域有四个需要输入的字符
			@RequestParam(name="w",required=false,defaultValue="100") Integer width,
			@RequestParam(name="h",required=false,defaultValue="30") Integer height,
			@RequestParam(name="type",required=true,defaultValue="loginCpacha") String cpachaType,
			HttpServletRequest request,
			HttpServletResponse response){
		CpachaUtil cpachaUtil = new CpachaUtil(vcodeLen, width, height);
		String generatorVCode = cpachaUtil.generatorVCode();
		request.getSession().setAttribute(cpachaType, generatorVCode);
		BufferedImage generatorRotateVCodeImage = cpachaUtil.generatorRotateVCodeImage(generatorVCode, true);
		try {
			ImageIO.write(generatorRotateVCodeImage, "gif", response.getOutputStream());
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

分析每段代码：

@RequestMapping(value="/get_cpacha",method=RequestMethod.GET)//设置验证码代码的位置
	public void generateCpacha(//设置验证码的长度宽度
	//设置验证码的类型，是按照登陆页面设计的
			@RequestParam(name="vl",required=false,defaultValue="4") Integer vcodeLen,
			@RequestParam(name="w",required=false,defaultValue="100") Integer width,
			@RequestParam(name="h",required=false,defaultValue="30") Integer height,
			@RequestParam(name="type",required=true,defaultValue="loginCpacha") String cpachaType,
			HttpServletRequest request,
			HttpServletResponse response){
		CpachaUtil cpachaUtil = new CpachaUtil(vcodeLen, width, height);
		String generatorVCode = cpachaUtil.generatorVCode();

request.getSession().setAttribute(cpachaType, generatorVCode);
		BufferedImage generatorRotateVCodeImage = cpachaUtil.generatorRotateVCodeImage(generatorVCode, true);
		try {
			ImageIO.write(generatorRotateVCodeImage, "gif", response.getOutputStream());
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

ImageIO.write(generatorRotateVCodeImage, "gif", response.getOutputStream());：形成一个输出流，输入到response

验证码要设置的东西：
1.鼠标放在验证码区域，鼠标变成一只手的样子
2. 鼠标放在验证码区域，有一段提示文字“点击更改验证码”
3. 鼠标点击验证码区域，验证码更换（页面里面设置一个function函数）

function changeCpacha(){
		$("#cpacha-img").attr("src",'get_cpacha?vl=4&w=150&h=40&type=loginCpacha&t=' + new Date().getTime());
	}
		document.querySelector(".login-button").onclick = function(){
				var username = $("#username").val();
				var password = $("#password").val();
				var cpacha = $("#cpacha").val();
				if(username == '' || username == 'undefined'){
					alert("请填写用户名！");
					return;
				}
				if(password == '' || password == 'undefined'){
					alert("请填写密码！");
					return;
				}
				if(cpacha == '' || cpacha == 'undefined'){
					alert("请填写验证码！");
					return;
				}

这个代码意思是jQuery方式获取用户输入的账号，密码和验证码

				var username = $("#username").val();
				var password = $("#password").val();
				var cpacha = $("#cpacha").val();

	接着就是对三个值的验证，只是验证了输入框里是否输入字符，正确性并无验证

if(username == '' || username == 'undefined'){
					alert("请填写用户名！");
					return;
				}
				if(password == '' || password == 'undefined'){
					alert("请填写密码！");
					return;
				}
				if(cpacha == '' || cpacha == 'undefined'){
					alert("请填写验证码！");
					return;
				}

前端用ajax的方式把数据提交给后端

$.ajax({
	url:'login',
	data:{username:username,password:password,cpache:cpacha},
	type:'post',
	dataType:'json',
	success:function(data){
	
	//最上面的四个if判断语句判断完之后，如何data.type判断为success，则窗口进入index页面，
	//否则弹出错误信息，错误信息有可能是验证码，用户名，密码
	
	if(data.type == 'sucess'){
	window.location = 'index';
	}else{
	alert(data.msg);
}
}


})