登录（带验证码图片）小案例
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了登录（带验证码图片）小案例相关的知识，希望对你有一定的参考价值。
1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
2 <html>
3 <head>
4 <title>Title</title>
5 <script type="text/javascript">
6 function _change() {
7 var imgEle = document.getElementById("image");
8 imgEle.src = "/VerifyCodeServlet?a="+new Date().getTime();
9
10 }
11 </script>
12 </head>
13 <body>
14 <%--本页面提供登录表单，还要显示错误信息--%>
15 <h1>登录</h1>
16 <%
17 /*
18 读取名为uname的cookie.
19 如果为空显示：""
20 如果不为空显示：Cookie的值
21 */
22 String uname = "";
23 Cookie[] cs = request.getCookies();//获取请求中所有的cookie
24 if(cs != null) { //如果存在cookies
25 for(Cookie c : cs) { //循环遍历所有的cookie
26 if("uname".equals(c.getName())){ //查找名为uname的cookie
27 uname = c.getValue();//获取这个cookie的值，给uname这个变量
28 }
29 }
30 }
31 %>
32 <%
33 String message = "";
34 String msg = (String) request.getAttribute("msg");//获取request域中的名为msg的属性
35 if (msg!=null) {
36 message = msg;
37 }
38 %>
39
40 <font color="red"><b><%=message %></b></font>
41 <form action="/LoginServlet" method="post">
42 <%-- 把cookie中的用户名显示到用户文本框中 --%>
43 <table border="0">
44 <tr>
45 <td>用户名：</td>
46 <td><input type="text" name="username" value="<%=uname %>"size="15"/></td>
47 </tr>
48 <tr>
49 <td>密 码：</td>
50 <td><input type="password" name="password" size="15"/>
51 </td>
52 </tr>
53 <tr>
54 <td>验证码：</td>
55 <td><input type="text" name="verifyCode" size="6"/><img id="image" src="/VerifyCodeServlet">
56 <a href="javascript:_change()">换一张</a>
57 </td>
58 </tr>
59 </table>
60 <br/>
61 <input type="submit" value="登录" style="color: black">
62 </form>
63 </body>
64 </html>
1 @WebServlet(name = "LoginServlet",urlPatterns = "/LoginServlet")
2 public class LoginServlet extends HttpServlet {
3 protected void doPost(HttpServletRequest request, HttpServletResponse response)
4 throws ServletException, IOException {
5 /*
6 *校验验证码
7 * 1、从session中获取周期的验证码
8 * 2、从表单中获取用户填写的验证码
9 * 3、进行比较
10 * 4、如果相同，向下执行，否则保存错误信息到request域，转发到login.jsp
11 * */
12 String sessionCode = (String) request.getSession().getAttribute("session_vcode");
13 String paramCode = request.getParameter("verifyCode");
14 if (!paramCode.equalsIgnoreCase(sessionCode)) {
15 request.setAttribute("msg","验证码错误！");
16 request.getRequestDispatcher("/jsps/login.jsp").forward(request,response);
17 return;
18 }
19
20 /*
21 * 1、获取表单数据
22 * */
23 request.setCharacterEncoding("utf-8");
24 //获取
25 String username = request.getParameter("username");
26 String password = request.getParameter("password");
27 /*
28 * 2、校验用户名和密码是否正确
29 * */
30 if (!"itcast".equalsIgnoreCase(username)) { //登录成功
31 /*
32 * 附加项：把用户名保存到cookie中，发送给客户端浏览器
33 * 当再次打开login.jsp时，login.jsp中会读取request中的cookie，把它显示到用户名文本框中
34 * */
35 Cookie cookie = new Cookie("uname",username);//创建cookie
36 cookie.setMaxAge(60*60*24);//设置cookie命长为1天
37 response.addCookie(cookie);
38 /*
39 * 3、如果成功
40 * 保存用户信息到session中
41 * 重定向到succ1.jsp
42 * */
43 HttpSession session = request.getSession();//获取session
44 session.setAttribute("username",username);//向session域中保存用户名
45 response.sendRedirect("/jsps/succ1.jsp");
46 }else { //登录失败
47 /*
48 * 4、如果失败
49 * 保存错误信息到request域中
50 * 转发到login.jsp
51 * */
52 request.setAttribute("msg","用户或密码错误");
53 RequestDispatcher qr = request.getRequestDispatcher("/jsps/login.jsp");//得到转发器
54 qr.forward(request,response);//转发
55 }
56 }
57
58 protected void doGet(HttpServletRequest request, HttpServletResponse response)
59 throws ServletException, IOException {
60 doPost(request,response);
61 }
62 }
1 @WebServlet(name = "VerifyCodeServlet",urlPatterns = "/VerifyCodeServlet")
2 public class VerifyCodeServlet extends HttpServlet {
3 protected void doGet(HttpServletRequest request, HttpServletResponse response)
4 throws ServletException, IOException {
5 /*
6 * 1、保存图片
7 * 2、保存图片上的文本到session域中
8 * 3、把图片响应给客户端
9 * */
10 VerifyCode vc = new VerifyCode();
11 BufferedImage image = vc.getImage();
12 request.getSession().setAttribute("session_vcode",vc.getText());//保存图片上的文本到session域中
13
14 try {
15 VerifyCode.output(image,response.getOutputStream());
16 } catch (Exception e) {
17 e.printStackTrace();
18 }
19 }
20 }
1 /*
2 * 验证码图片生成方法
3 * */
4 public class VerifyCode {
5 private int w = 70;
6 private int h = 35;
7 private Random r = new Random();
8 //可选的字体
9 private String[] fontNames = {"宋体","华文楷体","黑体","微软雅黑","楷体_GB2312"};
10 //可选的字符
11 private String codes = "23456789abcdefghijklmnopqrstuvwsyzABCDEFGHIJKLMNOPQRSTUVWSYX";
12 private Color bgColor = new Color(255,255,255);
13 private String text;
14
15 //生成随机的颜色
16 private Color randomColor() {
17 int red = r.nextInt(150);
18 int green = r.nextInt(150);
19 int blue = r.nextInt(150);
20 return new Color(red,green,blue);
21 }
22
23 //生成随机字体
24 private Font randomFont() {
25 int index = r.nextInt(fontNames.length);
26 String fontName = fontNames[index];//生成随机的字体名称
27 int style = r.nextInt(4);//生成随机的样式，0（无样式），1（粗体），2（斜体），3（粗体加斜体）
28 int size = r.nextInt(5)+25;//生成随机字号24-28
29 return new Font(fontName,style,size);
30 }
31
32 //画干扰线
33 private void drawLine(BufferedImage image) {
34 int num = r.nextInt(6);
35 Graphics2D g2 = (Graphics2D)image.getGraphics();
36 for (int i = 0; i < num; i++) {//生成两个点的坐标，即4个值
37 int x1 = r.nextInt(w);
38 int y1 = r.nextInt(h);
39 int x2 = r.nextInt(w);
40 int y2 = r.nextInt(h);
41 g2.setStroke(new BasicStroke(1.5F));
42 g2.setColor(Color.BLUE);//干扰线是蓝色
43 g2.drawLine(x1,y1,x2,y2);//画线
44 }
45 }
46
47 //生成随机一个字符
48 private char randomChar() {
49 int index = r.nextInt(codes.length());
50 return codes.charAt(index);
51 }
52
53 //创建一个BufferedImage
54 private BufferedImage creatImage() {
55 BufferedImage image = new BufferedImage(w,h,BufferedImage.TYPE_INT_RGB);
56 Graphics2D g2 = (Graphics2D) image.getGraphics();
57 g2.setColor(this.bgColor);
58 g2.fillRect(0,0,w,h);
59 return image;
60 }
61
62 //调用这个方法得到验证码
63 public BufferedImage getImage() {
64 BufferedImage image = creatImage(); //创建图片缓冲区
65 Graphics2D g2 = (Graphics2D) image.getGraphics();//得到绘制环境
66 StringBuilder sb = new StringBuilder();//用来装载生成的验证码文本
67 for (int i = 0; i <4 ; i++) {//循环四次，每次随机生成一个字符
68 String s = randomChar()+"";//随机生成一个字符
69 sb.append(s);//把字母添加到sb中
70 float x = i * 1.0F * w / 4;//设置当前字符的x轴坐标
71 g2.setFont(randomFont());//设置随机字体
72 g2.setColor(randomColor());//设置随机颜色
73 g2.drawString(s,x,h-5);//画图
74 }
75 this.text = sb.toString();//把生成的字符串赋给了this.text
76 drawLine(image);//添加干扰线
77 return image;
78 }
79 //返回验证码图片上的文本
80 public String getText() {
81 return text;
82 }
83 //保存图片到指定的输出流
84 public static void output (BufferedImage image, OutputStream out)
85 throws Exception{
86 ImageIO.write(image,"JPEG",out);
87 }
88 }
1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
2 <html>
3 <head>
4 <title>Title</title>
5 </head>
6 <body>
7 <h1>succ1</h1>
8 <%
9 String username = (String)session.getAttribute("username");
10 if(username == null) {
11 request.setAttribute("msg","您还没有注册");
12 request.getRequestDispatcher("/jsps/login.jsp").forward(request,response);
13 return;
14 }
15 %>
16 欢迎<%=username %>
17 </body>
18 </html>
以上是关于登录（带验证码图片）小案例的主要内容，如果未能解决你的问题，请参考以下文章