jsp实现登录界面

2022-06-16 15:48:43 来源:易采站长站 作者:

jsp实现登录界面

本文实例为大家分享了jsp实现登录界面的具体代码,供大家参考,具体内容如下7Yk站长之家-易采站长站-Easck.Com

一.用户登录案例需求:

1.编写login.jsp登录页面
 username & password 两个输入框7Yk站长之家-易采站长站-Easck.Com
2.使用Druid数据库连接池技术,操作mysql,day14数据库中user表7Yk站长之家-易采站长站-Easck.Com
3.使用JdbcTemplate技术封装JDBC7Yk站长之家-易采站长站-Easck.Com
4.登录成功跳转到SuccessServlet展示:登录成功!用户名,欢迎您7Yk站长之家-易采站长站-Easck.Com
5.登录失败跳转到login.jsp展示:登录失败,用户名或密码错误,验证码错误7Yk站长之家-易采站长站-Easck.Com

二.分析

7Yk站长之家-易采站长站-Easck.Com

三.>

1. 创建项目,配置文件,导入jar包7Yk站长之家-易采站长站-Easck.Com

7Yk站长之家-易采站长站-Easck.Com

2. 创建数据库环境7Yk站长之家-易采站长站-Easck.Com

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页面7Yk站长之家-易采站长站-Easck.Com

<%@ 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>
 
    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入,建议使用1.9以上的版本 -->
    <script src="js/jquery-2.1.0.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <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>&times;</span></button>
           <strong>${log_msg}</strong>
        </div>
      </div>
  </body>
</html>

4.在domain包下创建类LoginUser7Yk站长之家-易采站长站-Easck.Com

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数据库连接,创建数据库连接池对象7Yk站长之家-易采站长站-Easck.Com

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,  用来显示验证码的7Yk站长之家-易采站长站-Easck.Com

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进行交互7Yk站长之家-易采站长站-Easck.Com

7Yk站长之家-易采站长站-Easck.Com

代码:7Yk站长之家-易采站长站-Easck.Com

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层的,操作数据库,查询数据库7Yk站长之家-易采站长站-Easck.Com
操作数据库的UserDao接口:7Yk站长之家-易采站长站-Easck.Com

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

操作数据库的UserDaoImpl实现类:7Yk站长之家-易采站长站-Easck.Com

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中7Yk站长之家-易采站长站-Easck.Com

<%@ 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>
 
    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入,建议使用1.9以上的版本 -->
    <script src="js/jquery-2.1.0.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
    </script>
  </head>
  <body>
  <div align="center">
      <a
      href="${pageContext.request.contextPath }/userListServlet" style="text-decoration:none;font-size:33px">查询所有用户信息
    </a>
  </div>
  </body>
</html>

四.尾声

效果图:7Yk站长之家-易采站长站-Easck.Com

7Yk站长之家-易采站长站-Easck.Com

其他:7Yk站长之家-易采站长站-Easck.Com

login.jsp中form表单的action路径的写法7Yk站长之家-易采站长站-Easck.Com
            * 虚拟目录+Servlet的资源路径7Yk站长之家-易采站长站-Easck.Com

BeanUtils工具类,简化数据封装7Yk站长之家-易采站长站-Easck.Com
            * 用于封装JavaBean的7Yk站长之家-易采站长站-Easck.Com

1. JavaBean:标准的Java类7Yk站长之家-易采站长站-Easck.Com

1). 要求:7Yk站长之家-易采站长站-Easck.Com
1. 类必须被public修饰7Yk站长之家-易采站长站-Easck.Com
2. 必须提供空参的构造器7Yk站长之家-易采站长站-Easck.Com
3. 成员变量必须使用private修饰7Yk站长之家-易采站长站-Easck.Com
4. 提供公共setter和getter方法7Yk站长之家-易采站长站-Easck.Com

2). 功能:封装数据7Yk站长之家-易采站长站-Easck.Com

最后:用户登录的模块功能全部结束!7Yk站长之家-易采站长站-Easck.Com

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持易采站长站。7Yk站长之家-易采站长站-Easck.Com

如有侵权,请联系QQ:279390809 电话:15144810328

相关文章

  • jsp实现用户自动登录功能

    jsp实现用户自动登录功能

    理解并掌握Cookie的作用以及利用cookie实现用户的自动登录功能,实现下图效果 当服务器判断出该用户是首次登录的时候,会自动跳转到登录界面等待用户登录,并填入相关信息。通过设
    2020-04-28
  • JSP动态网页开发原理详解

    JSP动态网页开发原理详解

    一、什么是JSP?  JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术。  JSP这门技术的最大的特点在于,写jsp就像在写html,但它相比html而言,html只能为用户提供静态数据,而Jsp技术允许在页面中嵌套java代码,为用户提供动态数据。二、JSP原理2.1、Web服务器是如何调用并执行一个jsp页面的
    2020-07-24
  • JSP动态网页开发技术概述

    JSP动态网页开发技术概述

      在动态web项目的开发中,经常需要动态生成HTML内容(如系统中的当前在线人数需要动态生成)。如果使用Servlet实现HTML页面数据的统计,则需要使用大量的输出语句。同时,如果静态内容和动态内容混合在一起,那么也将导致程序非常臃肿。为了客服Servlet的这些缺点,Oracle(Sun)公司推出了JSP技术。1.JSP概述  JSP(Java Server Pages)是建立在Servle
    2020-07-24
  • 如何在jsp界面中插入图片

    如何在jsp界面中插入图片

    最近初学Java Web遇到一个问题,就是在jsp中没法显示图片。在网上搜索了许多内容,基本都是说路径问题,因为刚开始是凭着自己的一点半吊子html经验写的,而且我自认为不可能写错路径,但后来发现确实是路径出现了一些问题。(由此可见不要过分相信自己的半吊子经验)首先我们先要重新来认识下相对路径和绝对路径。https://zhidao.baidu.com/question
    2020-08-05
  • 骁龙678对比麒麟980哪个值得入手

    骁龙678对比麒麟980哪个值得入手

    大家都知道,麒麟980是一款已经有点年头的旗舰级别芯片了,与前代对比,进步很大,但也是有点年头的处理器了,这款处理器和刚出的高通骁龙骁龙678对比一下的话,这两者又有多少的差距呢,感兴趣的朋友不要错过了。【工艺】骁龙678:采用了11nm的工艺制程可以减少用户的能耗。麒麟980:7nm制作工艺,是目前最为成熟的芯片制作工艺,可以为用户带来更优享受【CPU】骁龙678:采用2+6的八核架构,全新的K
    2020-12-16
  • 锐龙7 5800X和i9-10900K哪款好 锐龙7 5800X和i9-10900K区别对比

    锐龙7 5800X和i9-10900K哪款好 锐龙7 5800X和i9-10900K区别对比

    锐龙7 5800X和i9-10900K哪款好?哪款值得入手?下面小编带来锐龙7 5800X和i9-10900K区别对比,希望对大家有所帮助。锐龙7 5800X和i9-10900K区别对比:一、前言:为什么网游会更需求处理器性能!也许有很多同学的“高配”电脑在玩单机游戏的时候,将画面调到最高设置下都能获得非常高的帧率,而在玩网络游戏的时候帧率会暴跌,特别是在大型团队副本或者是
    2020-12-17
  • 骁龙678对比骁龙845哪个值得买 骁龙678对比骁龙845评测

    骁龙678对比骁龙845哪个值得买 骁龙678对比骁龙845评测

    大家都知道,骁龙678是一款新出的芯片,看制程是入门的级别的,但是千万别小看现在新出的中低端芯片,有的是能打以前旗舰的,今天就给大家介绍一下骁龙678和骁龙845的参数对比,感兴趣的朋友不要错过了。【工艺】骁龙678:采用11nm的制作工艺骁龙845:采用的是10nm的制作工艺【CPU】骁龙678:为用户提供2*A76(2.2GHz)+6*A55(1.7GHz)的8核处理器,为用户提供最优的手机C
    2020-12-17
  • CPU天梯图2021年3月最新版 CPU性能排行天梯图2021

    CPU天梯图2021年3月最新版 CPU性能排行天梯图2021

      显卡是电脑中非常热门的硬件之一,在很多时候显卡的重要性高于CPU,对于小白来说需要通过显卡性能参数的比对来选购显卡,通过显卡天梯图来对比显卡型号之间的性能差异,一目了然非常直观。CPU天梯图2021年3月最新版 CPU性能排行天梯图2021:  显卡之间如何对比性能好坏?  对于目前独立显卡市场中,我们可选N卡和A卡,N卡在市场份额占比大,而A卡市场份额小一些,同级别的显卡,A卡更便宜,性价比
    2021-03-01