WEB前端和后端实现验证码验证登录，使用HTML CSS JS 和后端springboot

验证码作用

          验证码一般是防止有人利用机器人自动批量注册、对特定的注册用户用特定程序暴力破解方式进行不断的登陆、灌水。因为验证码是一个混合了数字或符号的图片，人眼看起来都费劲，机器识别起来就更困难。像百度贴吧未登录发贴要输入验证码大概是防止大规模匿名回帖的发生。 一般注册用户ID的地方以及各大论坛都要要输入验证码

效果图

代码部分

一、HTML代码

<form class="myform" action="/login" method="post">
        <p class="myp">用户名:</p> <input type="text" placeholder="请输入用户名" name="username" class="input-val" />
        <p class="myp">密&nbsp;&nbsp;码: </p> <input type="password" placeholder="请输入密码"  name="password" class="input-val"/>
        <p class="myp">验证码：</p> <br><br><br><input type="text" value="" placeholder="请输入验证码" class="input-val" id="mytry"/>
        <canvas id="canvas" width="100" height="43"></canvas>
        <br><br>
		 <button class="btn" type="submit" >登录</button>
    </form>

二、JS代码

 <script type="text/javascript">
 var aCode = "1234";
 //页面首次加载
 $.ajax({
	url:"result",
	async:false,
	success:function(k){  
		aCode=k; 
	} 
})
//点击图片刷新
$(function(){
	var show_num = [];
	draw(show_num); 
	$("#canvas").on('click',function(){
		var _this=$(this)
		$.ajax({
			url:"result",
			async:false,
			success:function(k){
				aCode=k;
			}
		})
		draw(show_num);
	}) 
})
 $("form").submit(function(e){
	 var a=$("#adminusername").val();
	 var b=$("#adminpassworld").val();
	 var c=$("#mytry").val();

	 if(a==""){
		 alert("请输入管理员账号");
		 return false;
	 }
	 if(b==""){
		 alert("请输入密码");
		 return false;
	 }if(c==""){
		 alert("验证码不能为空");
		 return false;
	 }if(c!==aCode){
	 	alert("验证码错误");
	 	return false
	 }
 });
	function draw(show_num) {
	var canvas_width=$('#canvas').width();
	var canvas_height=$('#canvas').height();
	var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
	var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
	canvas.width = canvas_width;
	canvas.height = canvas_height; 
	var aLength = aCode.length;//获取到数组的长度
	for (var i = 0; i <= 3; i++) {
		var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
		var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
		var txt = aCode[i];//得到随机的一个内容
		show_num[i] = txt.toLowerCase();
		var x = 10 + i * 20;//文字在canvas上的x坐标
		var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
		context.font = "bold 23px 微软雅黑";

		context.translate(x, y);
		context.rotate(deg);

		context.fillStyle = randomColor();
		context.fillText(txt, 0, 0);

		context.rotate(-deg);
		context.translate(-x, -y);
	}
	for (var i = 0; i <= 5; i++) { //验证码上显示线条
		context.strokeStyle = randomColor();
		context.beginPath();
		context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
		context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
		context.stroke();
	}
	for (var i = 0; i <= 30; i++) { //验证码上显示小点
		context.strokeStyle = randomColor();
		context.beginPath();
		var x = Math.random() * canvas_width;
		var y = Math.random() * canvas_height;
		context.moveTo(x, y);
		context.lineTo(x + 1, y + 1);
		context.stroke();
	}
}

function randomColor() {//得到随机的颜色值
	var r = Math.floor(Math.random() * 256);
	var g = Math.floor(Math.random() * 256);
	var b = Math.floor(Math.random() * 256);
	return "rgb(" + r + "," + g + "," + b + ")";
}
 </script>

三、后端代码

@RequestMapping("result")
	@ResponseBody
	private String generateWord(HttpServletRequest request) {
		String[] beforeShuffle = new String[] { "2", "3", "4", "5", "6", "7",
				"8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J",
				"K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V",
				"W", "X", "Y", "Z" };
		List<String> list = Arrays.asList(beforeShuffle);
		Collections.shuffle(list);
		StringBuilder sb = new StringBuilder();
		for (int i = 0; i < list.size(); i++) {
			sb.append(list.get(i));
		}
		String afterShuffle = sb.toString();
		String result = afterShuffle.substring(5, 9);

		//char[] result1=result.toCharArray();
		HttpSession session = request.getSession();
		session.setAttribute("result", result);

		System.out.println("--------------------result="+result);
		return result;
	}

	//后台只生成随机数
		@RequestMapping(value="random.action")
		public void findRandom (HttpServletResponse response) throws IOException{
			 // 验证码字符个数
		     int codeCount = 4;
		     char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',
			            'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',
			            'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };

		     // 创建一个随机数生成器类
		        Random random = new Random();
		     // randomCode用于保存随机产生的验证码，以便用户登录后进行验证。
		        StringBuffer randomCode = new StringBuffer();
		        for (int i = 0; i < codeCount; i++) {
		            // 得到随机产生的验证码数字。
		            String strRand = String.valueOf(codeSequence[random.nextInt(36)]);
		            // 将产生的四个随机数组合在一起。
		            randomCode.append(strRand);
		        }
		        PrintWriter out = response.getWriter();
		        out.print(randomCode);

		}