900字范文 > 黑马登录案例验证码无法正常显示原因

黑马登录案例验证码无法正常显示原因

时间：2018-09-18 04:39:55

相关推荐

黑马登录案例验证码无法正常显示原因

验证码图片输出格式不对
过滤器拦截了,修改，先不拦截试试@WebFilter(“/”)，@WebFilter(“/*”)
清理浏览器缓存

将PNG改为jpg就好了，但一旦启动成功后，再改回PNG也没问题，改了一个之后，其他几个项目的验证码没有改动还是PNG也可以显示出来了，原因未知，可能是浏览器显示的问题过滤器将验证码生成的servlet拦截了，去除就好了清除浏览器缓存

//将内存中的图片输出到浏览器//参数一：图片对象//参数二：图片的格式，如PNG,JPG,GIF//参数三：图片输出到哪里去ImageIO.write(image,"PNG",response.getOutputStream());

改为

ImageIO.write(image,"jpg",response.getOutputStream());

CheckCodeServlet .java

package CheckCodeServlet;import javax.imageio.ImageIO;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.awt.*;import java.awt.image.BufferedImage;import java.io.IOException;import java.util.Random;@WebServlet(name = "CheckCodeServlet", urlPatterns = "/getCheckCode")public class CheckCodeServlet extends HttpServlet {@Overridepublic void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}@Overridepublic void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//服务器通知浏览器不要缓存response.setHeader("pragma","no-cache");response.setHeader("cache-control","no-cache");response.setHeader("expires","0");//在内存中创建一个长80，宽30的图片，默认黑色背景//参数一：长//参数二：宽//参数三：颜色int width = 80;int height = 30;BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);//获取画笔Graphics g = image.getGraphics();//设置画笔颜色为灰色g.setColor(Color.GRAY);//填充图片g.fillRect(0,0, width,height);//产生4个随机验证码，12EyString checkCode = getCheckCode();//将验证码放入HttpSession中request.getSession().setAttribute("CHECKCODE_SERVER",checkCode);//设置画笔颜色为黄色g.setColor(Color.YELLOW);//设置字体的小大g.setFont(new Font("黑体",Font.BOLD,24));//向图片上写入验证码g.drawString(checkCode,15,25);//将内存中的图片输出到浏览器//参数一：图片对象//参数二：图片的格式，如PNG,JPG,GIF//参数三：图片输出到哪里去ImageIO.write(image,"jpg",response.getOutputStream());}/*** 产生4位随机字符串*/private String getCheckCode() {String base = "0123456789ABCDEFGabcdefg";int size = base.length();Random r = new Random();StringBuffer sb = new StringBuffer();for(int i=1;i<=4;i++){//产生0到size-1的随机值int index = r.nextInt(size);//在base字符串中获取下标为index的字符char c = base.charAt(index);//将c放入到StringBuffer中去sb.append(c);}return sb.toString();}}

login.jsp无法切换验证码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE html> <html lang="zh-CN"><head><base href="<%=basePath%>"/><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>管理员登录</title><link href="css/bootstrap.min.css" rel="stylesheet"><script src="js/jquery-2.1.0.min.js"></script><script src="js/bootstrap.min.js"></script><script type="text/javascript"></script></head><body><div class="container" style="width: 400px;"><h3 style="text-align: center;">管理员登录</h3><form action="http://localhost:8080/loginServlet" method="post"><div class="form-group"><label for="user">用户名：</label><input type="text" name="username" class="form-control" id="user" placeholder="请输入用户名"/></div><div class="form-group"><label for="password">密码：</label><input type="password" name="password" class="form-control" id="password" placeholder="请输入密码"/></div><div class="form-inline"><label for="verify">验证码：</label><input type="text" name="verifycode" class="form-control" id="verifycode" placeholder="请输入验证码" style="width: 120px;"/><a href="javascript:refreshCode()"><img src="/getCheckCode" title="看不清点击刷新" id="checkCodeImg"/></a></div><hr/><div class="form-group" style="text-align: center;"><input class="btn btn btn-primary" type="submit" value="登录"></div></form><div class="alert alert-warning alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" ><span>×</span></button><strong>登录失败!</strong></div></div></body></html>

CodeServlet .java

package com.itheima.web;import javax.imageio.ImageIO;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.awt.*;import java.awt.image.BufferedImage;import java.io.IOException;import java.util.Random;@WebServlet(urlPatterns = "/codeServlet")public class CodeServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//使用java代码响应验证码//1.创建画布对象int width = 120;int height = 40;BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);//2.获取当前画布的画笔Graphics gh = image.getGraphics();//3.设置画笔的颜色gh.setColor(Color.white);//4.绘制背景gh.fillRect(0,0,width,height);//5.绘制边框gh.setColor(Color.red);gh.drawRect(0,0,width-1,height-1);//6.绘制验证码String codeSource = "abcdefghijxlmnopqrstuvwxyz1234567890";Random rd = new Random();String serveCode = "";for(int i=0;i<4;i++){String code = codeSource.charAt(rd.nextInt(codeSource.length()))+"";serveCode+=code;//设置颜色//创建一个随机的颜色Color color = new Color(rd.nextInt(255),rd.nextInt(255),rd.nextInt(255));gh.setColor(color);//设置字体Font font = new Font("黑体",Font.ITALIC,30);gh.setFont(font);//绘制字符串gh.drawString(code,i*30+10,30);}//将验证码保存到session中request.getSession().setAttribute("serverCode",serveCode);//绘制干扰线for(int i=0;i<7;i++){Color color = new Color(rd.nextInt(255),rd.nextInt(255),rd.nextInt(255));gh.setColor(color);gh.drawLine(rd.nextInt(width),rd.nextInt(height),rd.nextInt(width),rd.nextInt(height));}//将画布响应给浏览器ImageIO.write(image,"jpg",response.getOutputStream());}}

login.html点击可以切换验证码

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>登录页面</title><link href="css/bootstrap.min.css" rel="stylesheet"><link href="css/login.css" rel="stylesheet"><script src="js/jquery.js"></script><script src="js/bootstrap.js"></script></head><body><div class="container text-center"><form class="form-signin" action="loginServlet"><h2 class="form-signin-heading">登录页面</h2><input type="text" id="username" name="username" class="form-control" placeholder="用户名" required autofocus><input type="password" id="password" name="password" class="form-control" placeholder="密码" required>请输入验证码:<input type="text" name="userCode"> <img src="codeServlet" id="myimg"> <a href="#" onclick="changeImg()">看不清，换一张</a><input type="checkbox" id="myCheck" name="remember" value="yes" checked="checked" > 记住用户名和密码<button class="btn btn-lg btn-primary btn-block" type="submit">登录</button></form></div></body><script>function changeImg() {//获取img标签对象var myimg = document.getElementById("myimg");//设置标签的src属性myimg.src="codeServlet?id="+new Date().getTime();}//应该获取浏览器中的cookie，填充到登录页面上。//username=zhangsan; password=123456var cookies = document.cookie;//字符串按照(;空格)去切割var cookieArray = cookies.split("; ");//遍历数组for(var i=0;i<cookieArray.length;i++){//cookieArray[i] 代表了一个cookie 例如： password=123456//再次按照(=)切割,cookie代表了浏览器的每一个cookievar cookie = cookieArray[i].split("=");//切割后cookie[0] 就是cookie名 cookie[1] 就是cookie的valueif(cookie[0]=="username"){//将用户名填入到username的输入框document.getElementById("username").value=cookie[1];}else if(cookie[0]=="password"){//将密码填入到password的输入框document.getElementById("password").value=cookie[1];}}</script></html>

login.sql

/*Navicat Premium Data TransferSource Server : MySQL57Source Server Type : MySQLSource Server Version : 50735Source Host : localhost:3306Source Schema : user_managerTarget Server Type : MySQLTarget Server Version : 50735File Encoding : 65001Date: 08/04/ 10:11:21*/SET NAMES utf8mb4;SET FOREIGN_KEY_CHECKS = 0;-- ------------------------------ Table structure for login-- ----------------------------DROP TABLE IF EXISTS `login`;CREATE TABLE `login` (`id` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,`username` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,`password` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,`uid` int(50) NOT NULL,PRIMARY KEY (`id`, `uid`) USING BTREE) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;-- ------------------------------ Records of login-- ----------------------------INSERT INTO `login` VALUES ('1', 'admin', '123', 0);INSERT INTO `login` VALUES ('10', 'nidaye4', '111', 3);INSERT INTO `login` VALUES ('11', 'nidaye4', '111', 3);INSERT INTO `login` VALUES ('3', 'root', 'root', 0);INSERT INTO `login` VALUES ('3', 'zhangsan', '123456', 1);INSERT INTO `login` VALUES ('4', 'lisi', '000', 4);INSERT INTO `login` VALUES ('5', 'nidaye', '111', 3);INSERT INTO `login` VALUES ('6', 'nidaye2', '111', 3);INSERT INTO `login` VALUES ('7', 'nidaye3', '111', 3);INSERT INTO `login` VALUES ('8', 'nidaye4', '111', 3);INSERT INTO `login` VALUES ('9', 'nidaye4', '111', 3);SET FOREIGN_KEY_CHECKS = 1;

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。