初学JSP与Servlet之登录界面2.0版本

        上一篇博客我们讲了JSP与Servlet的登录界面，这一篇博客我们在上一篇博客的基础上增加了一些功能并且美化了登录文本框、密码文本框、button按钮使用bootstrap前端框架；并且增加了验证码机制。故称为JSP与Servlet之登录界面2.0版本。

        1：首先我们修改登录页面使其变成具有bootstrap效果的界面。首先在webcontent目录下添加bootstrap的配置文件目录：http://download.csdn.net/download/u013132035/9760888(下载地址)。

         2：在登录页面修改，添加bootstrap_3的路径，并修改输入文本域、密码文本域、登录按钮、重置按钮。并且添加验证码的html文本标签。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>




	

看不清 Submit Resets ${error }

         3：在servlet包中添加ImageServlet.java进行验证码的随机产生。

package com.panli.servlet;

import java.awt.Color;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ImageServlet extends HttpServlet{

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		this.doPost(request, response);
	}

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		
		
		BufferedImage bi = new BufferedImage(68, 22, BufferedImage.TYPE_INT_BGR);
		Graphics g = bi.getGraphics();
		Color c = new Color(200, 150, 255);
		g.setColor(c);
		g.fillRect(0, 0, 68, 22);
		
		char[] ch = "ABCDEFGHIGKLMNOPQRSTUVWXYZ0123456789".toCharArray();
		Random r = new Random();
		int len = ch.length; 
		int index;
		StringBuffer sb = new StringBuffer();
		for(int i = 0; i < 4; i++){
			index = r.nextInt(len);
			g.setColor(new Color(r.nextInt(88), r.nextInt(188), r.nextInt(255)));
			g.drawString(ch[index]+"", (i*15)+3, 18);
			sb.append(ch[index]);
		}
		request.getSession().setAttribute("piccode", sb.toString());
		ImageIO.write(bi, "JPG", response.getOutputStream());
		
	}
	
	

}

        4：在UserServlet.java类中修改添加验证码的判断方法。

package com.panli.servlet;

import java.io.IOException;
import java.sql.Connection;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import com.panli.dao.UserDao;
import com.panli.model.User;
import com.panli.util.DbUtil;

public class UserServlet extends HttpServlet{
	
	UserDao userDao = new UserDao();
	DbUtil dbUtil = new DbUtil();
	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		this.doPost(request, response);
	}

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		String userName = request.getParameter("userName");
		String password = request.getParameter("password");
		
		Connection conn = null;
		try {
			conn = dbUtil.getConn();
			User user = new User(userName, password);
			User currentUser = userDao.login(conn, user);
			if(currentUser==null){
				request.setAttribute("user", user);
				request.setAttribute("error", "用户名或密码错误");
				request.getRequestDispatcher("login.jsp").forward(request, response);
				
				//System.out.println("no");
			}else{
				//System.out.println("ok");
				HttpSession session = request.getSession();
				session.setAttribute("currentUser", currentUser);
				response.sendRedirect("success.jsp");
			}
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
	}
}

        5：其他的类不需要任何修改。

          效果图如下（如果想更美观一些，可以学一些CSS样式进行微调）：