用jsp实现登录界面

傷城~ 2023-10-04 17:33 95阅读 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页面

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html>
  4. <html lang="zh-CN">
  5.   <head>
  6.     <meta charset="utf-8"/>
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  8.     <meta name="viewport" content="width=device-width, initial-scale=1"/>
  9.     <title>管理员登录</title>
  11.     <!-- 1. 导入CSS的全局样式 -->
  12.     <link href="css/bootstrap.min.css" rel="stylesheet">
  13.     <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
  14.     <script src="js/jquery-2.1.0.min.js"></script>
  15.     <!-- 3. 导入bootstrap的js文件 -->
  16.     <script src="js/bootstrap.min.js"></script>
  17.     <script type="text/javascript">
  18.       //切换验证码
  19.        function refreshCode(){
  20.           img=document.getElementById("vcode"); //获取验证码图片对象
  21.           var time=new Date().getTime();  //时间戳
  22.           img.src="${pageContext.request.contextPath }/checkcode?"+time;
  23.     }
  24.     </script>
  25.   </head>
  26.   <body>
  27.       <div class="container" style="width: 400px;">
  28.           <h3 style="text-align: center;">管理员登录</h3>
  29.         <form action="${pageContext.request.contextPath}/checklogin" method="post">
  30.           <div class="form-group">
  31.             <label for="user">用户名：</label>
  32.             <input type="text" name="userName" class="form-control" id="user" placeholder="请输入用户名"/>
  33.           </div>
  35.           <div class="form-group">
  36.             <label for="password">密码：</label>
  37.             <input type="password" name="password" class="form-control" id="password" placeholder="请输入密码"/>
  38.           </div>
  40.           <div class="form-inline">
  41.             <label for="vcode">验证码：</label>
  42.             <input type="text" name="verifycode" class="form-control" id="verifycode" placeholder="请输入验证码" style="width: 120px;"/>
  43.             <a href="javascript:refreshCode()"><img src="${pageContext.request.contextPath }/checkcode" title="看不清点击刷新" id="vcode"/></a>
  44.           </div>
  45.            <div style="color: red;">${log_msg}</div>
  46.           <hr/>
  47.           <div class="form-group" style="text-align: center;">
  48.             <input class="btn btn btn-primary" type="submit" value="登录">
  49.            </div>
  50.           </form>
  52.         <!-- 出错显示的信息框 -->
  53.           <div class="alert alert-warning alert-dismissible" role="alert">
  54.           <button type="button" class="close" data-dismiss="alert" >
  55.               <span>×</span></button>
  56.            <strong>${log_msg}</strong>
  57.         </div>
  58.       </div>
  59.   </body>
  60. </html>

4.在domain包下创建类LoginUser

  1. package domain;
  3. public class LoginUser {
  4.     private int id;
  5.     private String userName;
  6.     private String password;
  7.     public int getId() {
  8.         return id;
  9.     }
  10.     public void setId(int id) {
  11.         this.id = id;
  12.     }
  13.     public String  getUserName() {
  14.         return userName;
  15.     }
  16.     public void setUserName(String userName) {
  17.         this.userName = userName;
  18.     }
  19.     public String getPassword() {
  20.         return password;
  21.     }
  22.     public void setPassword(String password) {
  23.         this.password = password;
  24.     }
  25.     @Override
  26.     public String toString() {
  27.         return "LoginUser [id=" + id + ", userName=" + userName + ", password=" + password + "]";
  28.     }
  32. }

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

  1. package cn.itcast.util;
  3.             import com.alibaba.druid.pool.DruidDataSourceFactory;
  5.             import javax.sql.DataSource;
  6.             import javax.xml.crypto.Data;
  7.             import java.io.IOException;
  8.             import java.io.InputStream;
  9.             import java.sql.Connection;
  10.             import java.sql.SQLException;
  11.             import java.util.Properties;
  13.             /**
  14.              * JDBC工具类 使用Durid连接池
  15.              */
  16.             public class JDBCUtils {
  18.                 private static DataSource ds ;
  20.                 static {
  22.                     try {
  23.                         //1.加载配置文件
  24.                         Properties pro = new Properties();
  25.                         //使用ClassLoader加载配置文件，获取字节输入流
  26.                         InputStream is = JDBCUtils.class.getClassLoader().getResourceAsStream("druid.properties");
  27.                         pro.load(is);
  29.                         //2.初始化连接池对象
  30.                         ds = DruidDataSourceFactory.createDataSource(pro);
  32.                     } catch (IOException e) {
  33.                         e.printStackTrace();
  34.                     } catch (Exception e) {
  35.                         e.printStackTrace();
  36.                     }
  37.                 }
  39.                 /**
  40.                  * 获取连接池对象
  41.                  */
  42.                 public static DataSource getDataSource(){
  43.                     return ds;
  44.                 }
  47.                 /**
  48.                  * 获取连接Connection对象
  49.                  */
  50.                 public static Connection getConnection() throws SQLException {
  51.                     return  ds.getConnection();
  52.                 }
  53.             }

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

  1. package web.servlet;
  3. import java.io.IOException;
  4. import java.util.Random;
  5. import java.awt.Color;
  6. import java.awt.Font;
  7. import java.awt.Graphics;
  8. import java.awt.image.BufferedImage;
  10. import javax.imageio.ImageIO;
  11. import javax.servlet.ServletException;
  12. import javax.servlet.annotation.WebServlet;
  13. import javax.servlet.http.HttpServlet;
  14. import javax.servlet.http.HttpServletRequest;
  15. import javax.servlet.http.HttpServletResponse;
  17. @WebServlet("/checkcode")
  18. public class CheckCode extends HttpServlet{
  20.     /**
  21.      * 
  22.      */
  23.     private static final long serialVersionUID = 1L;
  25.     @Override
  26.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  27.         // TODO Auto-generated method stub
  28.         this.doPost(req, resp);
  29.     }
  31.     @Override
  32.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  33.         int imgwidth=100;
  34.         int imgheight=40;
  35.         //1.创建图片对象，在内存中图片（验证码图片对象）
  36.         BufferedImage image=new BufferedImage(imgwidth,imgheight,BufferedImage.TYPE_INT_RGB);  //也可以指定读取image=imageIO.read(new file())
  37.         //2.美化图片
  38.         Graphics g=image.getGraphics(); //获得画笔对象
  40.         //设置画笔颜色
  41.         g.setColor(Color.pink);
  42.         //在创建的图片对象大小中填充矩形，颜色为上面设置的颜色，第一,二个参数是起始点的x,y,第三，四个参数是有多宽，有多高
  43.         g.fillRect(0, 0, imgwidth, imgheight);
  45.         //重新设置画笔颜色
  46.         g.setColor(Color.yellow);//画框边缘颜色
  47.         //在image上画边框，第一,二个参数是起始点的x,y,第三，四个参数是有多宽，有多高，注意：边框占一个像素，所以需要宽和高-1才能覆盖全部
  48.         g.drawRect(0, 0, imgwidth-1, imgheight-1);
  50.         //随机设置验证码的值
  51.         String str="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";
  52.         Random random=new Random();
  53.         StringBuilder sb=new StringBuilder();
  54.         //随机在image中写字符串，第三，四个参数是画的位置
  55.         for(int i=1;i<5;i++) {
  56.             int index=random.nextInt(str.length());  //随机选取字母字符
  57.             g.setFont(new Font("宋体", Font.PLAIN, 20));  //设置画笔大小
  58.             sb.append(str.charAt(index));//将随机验证码置于stringbuilder中
  59.             g.setColor(Color.blue);  //画笔颜色
  60.             g.drawString(str.charAt(index)+"",imgwidth/5*i ,25);    
  61.         }
  63.         //将验证码存储与session对象中,用于loginservlet中的验证码验证
  64.         String session_code=sb.toString();
  65.         req.getSession().setAttribute("session_code", session_code);
  67.         //随机画干扰线,第一,二个参数是起始点的x,y,第三，四个参数是最后一个点的x,y
  68.         int x1=0,y1=0,x2=0,y2=0;
  69.         for(int i=0;i<=8;i++) {  //画8次线条
  70.             x1=random.nextInt(imgwidth);
  71.             y1=random.nextInt(imgheight);
  72.             x2=random.nextInt(imgwidth);
  73.             y2=random.nextInt(imgheight);
  74.             g.setColor(Color.gray);
  75.             g.drawLine(x1, y1, x2, y2);
  76.         }
  78.         //3.图片显示在页面上
  79.         ImageIO.write(image, "jpg", resp.getOutputStream());  //将图片写入指定文件(第三个参数是指定的位置Fileoutpotstream(new File(""))
  80.     }
  83. }

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

watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg5bC955qE5rKJ6buY_size_10_color_FFFFFF_t_70_g_se_x_16

代码：

  1. package web.servlet;
  3. import java.io.IOException;
  4. import java.lang.reflect.InvocationTargetException;
  5. import java.util.Map;
  7. import javax.servlet.ServletException;
  8. import javax.servlet.annotation.WebServlet;
  9. import javax.servlet.http.HttpServlet;
  10. import javax.servlet.http.HttpServletRequest;
  11. import javax.servlet.http.HttpServletResponse;
  12. import javax.servlet.http.HttpSession;
  14. import org.apache.commons.beanutils.BeanUtils;
  16. import com.mchange.v2.codegen.bean.BeangenUtils;
  18. import dao.UserDaoImpl;
  19. import domain.LoginUser;
  21. @WebServlet("/checklogin")
  22. public class CheckLogin extends HttpServlet{
  24.     /**
  25.      * 
  26.      */
  27.     private static final long serialVersionUID = 1L;
  29.     @Override
  30.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  31.         // TODO Auto-generated method stub
  32.         this.doPost(req, resp);
  33.     }
  35.     @Override
  36.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  37.         //1.设置编码
  38.         req.setCharacterEncoding("utf-8");
  39.         //2.获取用户的请求
  40.            LoginUser loginUser=new LoginUser();
  41.           Map<String, String[]> pMap=req.getParameterMap();
  42.         //3.使用BeanUtil封装对象
  43.           try {
  44.             BeanUtils.populate(loginUser, pMap);
  45.         } catch (IllegalAccessException | InvocationTargetException e) {
  46.             // TODO Auto-generated catch block
  47.             e.printStackTrace();
  48.         }
  50.           //4.现获取前端填写的验证码,比较验证码
  51.             System.out.println(loginUser);
  52.             String exc=req.getParameter("verifycode");//获取前端用户填写的验证码
  53.             HttpSession htp=req.getSession();  //获取session
  54.             String excode=(String) htp.getAttribute("session_code");  //获取后端checkcode随机验证码
  55.             //为防止验证码重复使用，session中的session_code一旦获得，就必须删除
  56.             htp.removeAttribute("session_code");
  57.             if(excode!=null && excode.equalsIgnoreCase(exc)) {
  58.                 //忽略字母大小写，比较验证码
  59.                 //如果验证码正确，再比较用户的用户名和密码
  60.             //验证码正确
  61.             //5.创建userDao对象
  62.                  UserDaoImpl userDaoImpl=new UserDaoImpl();  //调用与数据库的函数
  63.                  LoginUser lu=userDaoImpl.checkLoginUser(loginUser);
  64.                 if(lu!=null) {
  65.                       //如果登录成功
  66.                       //保存数据，用户信息
  67.                       htp.setAttribute("user", lu);  //在session中保存用户的信息
  68.                       htp.setAttribute("username", lu.getUserName());//在session中存储用户名
  69.                       //重定向到success.jsp页面
  70.                       resp.sendRedirect(req.getContextPath()+"/index.jsp");
  71.                   }
  72.                   else {//用户名或密码不正确
  73.                     req.setAttribute("log_msg", "用户名或密码错误");  //存储错误信息，用request域存储 
  74.                     //请求转发，重新回到登录页面
  75.                     req.getRequestDispatcher("/login.jsp").forward(req, resp);
  76.                 }    
  77.             }else {//验证码不正确
  78.                 req.setAttribute("log_msg", "验证码错误");  //存储错误信息，用request域存储
  79.                 req.getRequestDispatcher("/login.jsp").forward(req, resp);  //请求转发，重新回到登录页面
  80.             }
  84.     }
  87. }

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

操作数据库的UserDao接口：

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

操作数据库的UserDaoImpl实现类：

  1. package dao;
  3. import java.util.List;
  5. import javax.xml.transform.Templates;
  7. import org.springframework.jdbc.core.BeanPropertyRowMapper;
  8. import org.springframework.jdbc.core.JdbcTemplate;
  10. import domain.LoginUser;
  11. import domain.User;
  12. import utils.JDBCUtils;
  14. public class UserDaoImpl implements UserDao{
  15.     JdbcTemplate jdbcTemplate =new JdbcTemplate(JDBCUtils.getDataSource());
  16.     public List<User> findAll() {
  17.         // 操作数据库,查询
  18.         String sql="select * from user";
  19.         List<User> users=jdbcTemplate.query(sql,new BeanPropertyRowMapper(User.class));
  20.         return users;
  21.     }
  22.     public LoginUser checkLoginUser( LoginUser loginUser) {
  23.         //查询登录用户信息
  24.         String sqlString="select* from loginuser where username=? and password=?";
  25.         //System.out.println("111"+loginUser);
  26.         try {
  27.             LoginUser lu=(LoginUser) jdbcTemplate.queryForObject(sqlString, new BeanPropertyRowMapper<LoginUser>(LoginUser.class)
  28.                     ,loginUser.getUserName(),loginUser.getPassword());
  29.             return lu;
  30.         } catch (Exception e) {
  31.             // TODO: handle exception
  32.             e.printStackTrace();
  33.             return null;
  34.         }    
  35.     }
  36. }

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

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html>
  4. <html lang="zh-CN">
  5.   <head>
  6.     <meta charset="utf-8"/>
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  8.     <meta name="viewport" content="width=device-width, initial-scale=1"/>
  9.     <title>首页</title>
  11.     <!-- 1. 导入CSS的全局样式 -->
  12.     <link href="css/bootstrap.min.css" rel="stylesheet">
  13.     <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
  14.     <script src="js/jquery-2.1.0.min.js"></script>
  15.     <!-- 3. 导入bootstrap的js文件 -->
  16.     <script src="js/bootstrap.min.js"></script>
  17.     <script type="text/javascript">
  18.     </script>
  19.   </head>
  20.   <body>
  21.   <div align="center">
  22.       <a
  23.       href="${pageContext.request.contextPath }/userListServlet" style="text-decoration:none;font-size:33px">查询所有用户信息
  24.     </a>
  25.   </div>
  26.   </body>
  27. </html>

四.尾声

效果图：

watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg5bC955qE5rKJ6buY_size_20_color_FFFFFF_t_70_g_se_x_16 2

其他：

login.jsp中form表单的action路径的写法
* 虚拟目录+Servlet的资源路径

BeanUtils工具类，简化数据封装
* 用于封装JavaBean的

  1. JavaBean：标准的Java类
  2. 要求：
  3. 类必须被public修饰
  4. 必须提供空参的构造器
  5. 成员变量必须使用private修饰
  6. 提供公共setter和getter方法
  7. 功能：封装数据

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

发表评论

表情：
评论列表 （有 0 条评论，95人围观）

还没有评论，来说两句吧...

相关阅读

    相关 JavaBean实现用户登录界面

    应用 JavaBean 方式实现用户的登录验证，当用户在表单中填写正确的用户名和密码后，提示成功登录。若输入的密码错误，则提示“密码错误，请输入正确密码！”。

    朱雀朱雀/ 0 赞/ 2467 阅读