用jsp实现登录界面

傷城~ 2023-10-04 17:33 20阅读 0赞

## 一.用户登录案例需求： ##

1.编写login.jsp登录页面  
username & password 两个输入框  
2.使用Druid数据库连接池技术,操作mysql，day14数据库中user表  
3.使用JdbcTemplate技术封装JDBC  
4.登录成功跳转到SuccessServlet展示：登录成功！用户名,欢迎您  
5.登录失败跳转到login.jsp展示：登录失败，用户名或密码错误,验证码错误

## 二.分析 ##

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg5bC955qE5rKJ6buY_size_20_color_FFFFFF_t_70_g_se_x_16][]

## 三. 开发步骤 ##

### 1. 创建项目，配置文件，导入jar包 ###

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg5bC955qE5rKJ6buY_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

### 2. 创建数据库环境 ###

CREATE DATABASE day17;  
USE day17;  
CREATE TABLE loginUSER( -- 创建表  
id INT PRIMARY KEY AUTO\_INCREMENT,  
username VARCHAR(20) NOT NULL,  
PASSWORD VARCHAR(20) NOT NULL  
);

### 3.创建前端login.jsp和css页面 ###

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html lang="zh-CN">
      <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">
        
        <script src="js/jquery-2.1.0.min.js"></script>
        
        <script src="js/bootstrap.min.js"></script>
        <script type="text/javascript">
          //切换验证码
           function refreshCode(){
    		  img=document.getElementById("vcode"); //获取验证码图片对象
    		  var time=new Date().getTime();  //时间戳
    		  img.src="${pageContext.request.contextPath }/checkcode?"+time;
    	}
        </script>
      </head>
      <body>
      	<div class="container" style="width: 400px;">
      		<h3 style="text-align: center;">管理员登录</h3>
            <form action="${pageContext.request.contextPath}/checklogin" 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="vcode">验证码：</label>
    	        <input type="text" name="verifycode" class="form-control" id="verifycode" placeholder="请输入验证码" style="width: 120px;"/>
    	        <a href="javascript:refreshCode()"><img src="${pageContext.request.contextPath }/checkcode" title="看不清点击刷新" id="vcode"/></a>
    	      </div>
    	       <div style="color: red;">${log_msg}</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>${log_msg}</strong>
    		</div>
      	</div>
      </body>
    </html>

### 4.在domain包下创建类LoginUser ###

package domain;
    
    public class LoginUser {
    	private int id;
    	private String userName;
    	private String password;
    	public int getId() {
    		return id;
    	}
    	public void setId(int id) {
    		this.id = id;
    	}
    	public String  getUserName() {
    		return userName;
    	}
    	public void setUserName(String userName) {
    		this.userName = userName;
    	}
    	public String getPassword() {
    		return password;
    	}
    	public void setPassword(String password) {
    		this.password = password;
    	}
    	@Override
    	public String toString() {
    		return "LoginUser [id=" + id + ", userName=" + userName + ", password=" + password + "]";
    	}
    	
    	
    
    }

### 5.写utils包下的工具类JDBCUtils ，主要是与mysql数据库连接，创建数据库连接池对象 ###

package cn.itcast.util;
    
    			import com.alibaba.druid.pool.DruidDataSourceFactory;
    			
    			import javax.sql.DataSource;
    			import javax.xml.crypto.Data;
    			import java.io.IOException;
    			import java.io.InputStream;
    			import java.sql.Connection;
    			import java.sql.SQLException;
    			import java.util.Properties;
    			
    			/**
    			 * JDBC工具类 使用Durid连接池
    			 */
    			public class JDBCUtils {
    			
    			    private static DataSource ds ;
    			
    			    static {
    			
    			        try {
    			            //1.加载配置文件
    			            Properties pro = new Properties();
    			            //使用ClassLoader加载配置文件，获取字节输入流
    			            InputStream is = JDBCUtils.class.getClassLoader().getResourceAsStream("druid.properties");
    			            pro.load(is);
    			
    			            //2.初始化连接池对象
    			            ds = DruidDataSourceFactory.createDataSource(pro);
    			
    			        } catch (IOException e) {
    			            e.printStackTrace();
    			        } catch (Exception e) {
    			            e.printStackTrace();
    			        }
    			    }
    			
    			    /**
    			     * 获取连接池对象
    			     */
    			    public static DataSource getDataSource(){
    			        return ds;
    			    }
    			
    			
    			    /**
    			     * 获取连接Connection对象
    			     */
    			    public static Connection getConnection() throws SQLException {
    			        return  ds.getConnection();
    			    }
    			}

### 6.创建web层的checkcode的servlet, 用来显示验证码的 ###

package web.servlet;
    
    import java.io.IOException;
    import java.util.Random;
    import java.awt.Color;
    import java.awt.Font;
    import java.awt.Graphics;
    import java.awt.image.BufferedImage;
    
    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;
    
    @WebServlet("/checkcode")
    public class CheckCode extends HttpServlet{
    
    	/**
    	 * 
    	 */
    	private static final long serialVersionUID = 1L;
    
    	@Override
    	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    		// TODO Auto-generated method stub
    		this.doPost(req, resp);
    	}
    
    	@Override
    	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    		int imgwidth=100;
    		int imgheight=40;
    		//1.创建图片对象，在内存中图片（验证码图片对象）
    		BufferedImage image=new BufferedImage(imgwidth,imgheight,BufferedImage.TYPE_INT_RGB);  //也可以指定读取image=imageIO.read(new file())
    		//2.美化图片
    		Graphics g=image.getGraphics(); //获得画笔对象
    		
    		//设置画笔颜色
    		g.setColor(Color.pink);
    		//在创建的图片对象大小中填充矩形，颜色为上面设置的颜色，第一,二个参数是起始点的x,y,第三，四个参数是有多宽，有多高
    		g.fillRect(0, 0, imgwidth, imgheight);
    		
    		//重新设置画笔颜色
    		g.setColor(Color.yellow);//画框边缘颜色
    		//在image上画边框，第一,二个参数是起始点的x,y,第三，四个参数是有多宽，有多高，注意：边框占一个像素，所以需要宽和高-1才能覆盖全部
    		g.drawRect(0, 0, imgwidth-1, imgheight-1);
    		
    		//随机设置验证码的值
    		String str="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";
    		Random random=new Random();
    		StringBuilder sb=new StringBuilder();
    		//随机在image中写字符串，第三，四个参数是画的位置
    		for(int i=1;i<5;i++) {
    			int index=random.nextInt(str.length());  //随机选取字母字符
    			g.setFont(new Font("宋体", Font.PLAIN, 20));  //设置画笔大小
    			sb.append(str.charAt(index));//将随机验证码置于stringbuilder中
    			g.setColor(Color.blue);  //画笔颜色
    		    g.drawString(str.charAt(index)+"",imgwidth/5*i ,25);    
    		}
    		
    		//将验证码存储与session对象中,用于loginservlet中的验证码验证
    		String session_code=sb.toString();
    		req.getSession().setAttribute("session_code", session_code);
    		
    		//随机画干扰线,第一,二个参数是起始点的x,y,第三，四个参数是最后一个点的x,y
    		int x1=0,y1=0,x2=0,y2=0;
    		for(int i=0;i<=8;i++) {  //画8次线条
    			x1=random.nextInt(imgwidth);
    			y1=random.nextInt(imgheight);
    			x2=random.nextInt(imgwidth);
    		    y2=random.nextInt(imgheight);
    		    g.setColor(Color.gray);
    		    g.drawLine(x1, y1, x2, y2);
    		}
    		
    		//3.图片显示在页面上
    		ImageIO.write(image, "jpg", resp.getOutputStream());  //将图片写入指定文件(第三个参数是指定的位置Fileoutpotstream(new File(""))
    	}
    	
    
    }

### 7.创建web层的checklogin的servlet，用来响应用户登录的请求。主要是进行前端参数数据和UserDao进行交互 ###

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg5bC955qE5rKJ6buY_size_10_color_FFFFFF_t_70_g_se_x_16][]

代码：

package web.servlet;
    
    import java.io.IOException;
    import java.lang.reflect.InvocationTargetException;
    import java.util.Map;
    
    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 javax.servlet.http.HttpSession;
    
    import org.apache.commons.beanutils.BeanUtils;
    
    import com.mchange.v2.codegen.bean.BeangenUtils;
    
    import dao.UserDaoImpl;
    import domain.LoginUser;
    
    @WebServlet("/checklogin")
    public class CheckLogin extends HttpServlet{
    
    	/**
    	 * 
    	 */
    	private static final long serialVersionUID = 1L;
    
    	@Override
    	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    		// TODO Auto-generated method stub
    		this.doPost(req, resp);
    	}
    
    	@Override
    	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    		//1.设置编码
    		req.setCharacterEncoding("utf-8");
    		//2.获取用户的请求
    		   LoginUser loginUser=new LoginUser();
    		  Map<String, String[]> pMap=req.getParameterMap();
    		//3.使用BeanUtil封装对象
    		  try {
    			BeanUtils.populate(loginUser, pMap);
    		} catch (IllegalAccessException | InvocationTargetException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		}
    		 
    		  //4.现获取前端填写的验证码,比较验证码
    		    System.out.println(loginUser);
    		    String exc=req.getParameter("verifycode");//获取前端用户填写的验证码
    		    HttpSession htp=req.getSession();  //获取session
    		    String excode=(String) htp.getAttribute("session_code");  //获取后端checkcode随机验证码
    		    //为防止验证码重复使用，session中的session_code一旦获得，就必须删除
    		    htp.removeAttribute("session_code");
    		    if(excode!=null && excode.equalsIgnoreCase(exc)) {
    		    	//忽略字母大小写，比较验证码
    		        //如果验证码正确，再比较用户的用户名和密码
    		    //验证码正确
    		    //5.创建userDao对象
    		    	 UserDaoImpl userDaoImpl=new UserDaoImpl();  //调用与数据库的函数
    				 LoginUser lu=userDaoImpl.checkLoginUser(loginUser);
    			    if(lu!=null) {
    			    	  //如果登录成功
    			    	  //保存数据，用户信息
    			    	  htp.setAttribute("user", lu);  //在session中保存用户的信息
    			    	  htp.setAttribute("username", lu.getUserName());//在session中存储用户名
    			    	  //重定向到success.jsp页面
    			    	  resp.sendRedirect(req.getContextPath()+"/index.jsp");
    			      }
    			      else {//用户名或密码不正确
    			    	req.setAttribute("log_msg", "用户名或密码错误");  //存储错误信息，用request域存储 
    			    	//请求转发，重新回到登录页面
    					req.getRequestDispatcher("/login.jsp").forward(req, resp);
    				}	
    		    }else {//验证码不正确
    		    	req.setAttribute("log_msg", "验证码错误");  //存储错误信息，用request域存储
    		    	req.getRequestDispatcher("/login.jsp").forward(req, resp);  //请求转发，重新回到登录页面
    			}
    		    
    		  
    		  
    	}
    	
    
    }

### 8.在dao层的，操作数据库，查询数据库 ###

操作数据库的UserDao接口：

package dao;
    
    import java.util.List;
    
    import domain.User;
    
    public interface UserDao {
         public List<User> findAll();  //抽象方法
         public LoginUser checkLoginUser( LoginUser loginUser);
    }

操作数据库的UserDaoImpl实现类：

package dao;
    
    import java.util.List;
    
    import javax.xml.transform.Templates;
    
    import org.springframework.jdbc.core.BeanPropertyRowMapper;
    import org.springframework.jdbc.core.JdbcTemplate;
    
    import domain.LoginUser;
    import domain.User;
    import utils.JDBCUtils;
    
    public class UserDaoImpl implements UserDao{
        JdbcTemplate jdbcTemplate =new JdbcTemplate(JDBCUtils.getDataSource());
    	public List<User> findAll() {
    		// 操作数据库,查询
    		String sql="select * from user";
    		List<User> users=jdbcTemplate.query(sql,new BeanPropertyRowMapper(User.class));
    		return users;
    	}
    	public LoginUser checkLoginUser( LoginUser loginUser) {
    		//查询登录用户信息
    		String sqlString="select* from loginuser where username=? and password=?";
    		//System.out.println("111"+loginUser);
    		try {
    			LoginUser lu=(LoginUser) jdbcTemplate.queryForObject(sqlString, new BeanPropertyRowMapper<LoginUser>(LoginUser.class)
    					,loginUser.getUserName(),loginUser.getPassword());
    			return lu;
    		} catch (Exception e) {
    			// TODO: handle exception
    			e.printStackTrace();
    			return null;
    		}	
    	}
    }

### 9.编写success.jsp，在这里指的是index.jsp，对应在checklogin.java中 ###

## 四.尾声 ##

效果图：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg5bC955qE5rKJ6buY_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

其他：

BeanUtils工具类，简化数据封装  
\* 用于封装JavaBean的  
1. JavaBean：标准的Java类  
1. 要求：  
1. 类必须被public修饰  
2. 必须提供空参的构造器  
3. 成员变量必须使用private修饰  
4. 提供公共setter和getter方法  
2. 功能：封装数据

最后：用户登录的模块功能全部结束！！！

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg5bC955qE5rKJ6buY_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/987fbb01ec74476e837ac866e60438d2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5peg5bC955qE5rKJ6buY,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg5bC955qE5rKJ6buY_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/6f8894ba71204551bfae3c8c0a89aeac.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5peg5bC955qE5rKJ6buY,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg5bC955qE5rKJ6buY_size_10_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/25ffae6995af42fcb8c301e9fa81f133.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5peg5bC955qE5rKJ6buY,size_10,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg5bC955qE5rKJ6buY_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/0010a441856d4562a32d37cc1a1774a1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5peg5bC955qE5rKJ6buY,size_20,color_FFFFFF,t_70,g_se,x_16