jsp实现登录界面-JSP实战-JSP编程-硕编程

首页 » JSP编程 » JSP实战

jsp实现登录界面

本文实例为大家分享了jsp实现登录界面的具体代码，供大家参考，具体内容如下

一.用户登录案例需求：

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

二.分析

三. 开发步骤

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

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>
 
    <!-- 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" >
              &times;</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进行交互

代码：

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中

<%@ 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>

四.尾声

效果图：

其他：

beanutils工具类，简化数据封装
* 用于封装javabean的

1. javabean：标准的java类

1）. 要求：

1. 类必须被public修饰
2. 必须提供空参的构造器
3. 成员变量必须使用private修饰
4. 提供公共setter和getter方法

2）. 功能：封装数据

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持硕编程。

JSP实战