JSP前后台交互实现注册登录功能

Posted 2020-11-09 1960366876tz

一、注册功能

1、html页面

　　登录界面

　　　　　　<div class="mid_main">
                <div class="title">
                
                </div>
                <form action="<%=path %>/loginCheck" method="post">
                    <input type="text" name="userName" placeholder="用户名" class="input1"><br>
                    <input type="password" name="pwd" placeholder="密码" class="input2"><br>
                    <input type="submit" name="sub" value="立即登录" class="submit"><br>
                </form>
                <span id="re" onclick="Click()">没有账号？点我注册</span>
            </div>

　　注册界面 ，将值传给servlet

　　　　　　　<div class="reg">
                <span class="tit">注册</span>
                <form action="<%=path %>/registeManage" method="post">
                    <span>用户名：</span><input type="text" name="user" placeholder="请输入用户名" id="user"><br>
                    <span>密码：</span><input type="password" name="password" placeholder="请输入密码" id="pas"><br>
                    <span>再次输入:</span><input type="password" name="repassword" placeholder="重复密码" id=repas><br>
                    <input type="button" value="注册"  id="sub2" onclick="zhuce()">
                    <input type="button" value="取消"  id="cancle" onclick="quxiao()">
                    
                </form>
            </div>

 

2、js代码

function Click(){
    document.getElementsByClassName("mid_main")[0].style.display="none";
    document.getElementsByClassName("reg")[0].style.display="block";
    
}
function quxiao(){
    document.getElementById("user").value="";
    document.getElementById("pas").value="";
    document.getElementById("repas").value="";
    document.getElementsByClassName("reg")[0].style.display="none";
    document.getElementsByClassName("mid_main")[0].style.display="block";
}

function zhuce(){
    var user=document.getElementById("user").value;
    var pas=document.getElementById("pas").value;
    var repas=document.getElementById("repas").value;
    var reg=/^\w{3,}$/;
    if(reg.test(pas)==true &&user.length>0&&pas==repas){
        //提交表单
        document.forms[1].submit();
    }else{
        if(user.length==0){
            alert("用户名不能为空");
            return;
        }else if(reg.test(pas)==false){
            alert("格式错误，必须为字母数字下划线，至少3位");
            return;
        }else if(pas!=repas){
            alert("两次输入不一致");
            return;
        }
    }
    alert("注册成功!");
    document.getElementsByClassName("reg")[0].style.display="none";
    document.getElementsByClassName("mid_main")[0].style.display="block";
}

3、servlet中获取值

　　　　　　//设置编码格式
            request.setCharacterEncoding("utf-8");
            
            String user=request.getParameter("user");
            String password=request.getParameter("password");
            
            //插入数据库
            boolean isSuccess= registeUserWithInfo(user, password);
            if(isSuccess){
                //跳转到登录页
                response.sendRedirect(request.getContextPath()+"/prac02/login.jsp");
            }else{
                //跳转到注册界面
                response.sendRedirect(request.getContextPath()+"/prac02/login.jsp");
            }

4、操作数据库的 registeUserWithInfo()方法

    public boolean  registeUserWithInfo(String user,String pwd){
        Connection conn=null;
        PreparedStatement pstmt=null;
        try {
            //1、加载驱动类
            Class.forName("oracle.jdbc.driver.OracleDriver");
            //2、获取数据库连接
            conn=DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:orcl","ajeesia","123456");
            //3、加载句柄
            String sql="insert into  t_registe values(?,?,?)";
            pstmt= conn.prepareStatement(sql);
                
            int index=findMainIndex();
            pstmt.setObject(1, index);
            pstmt.setObject(2, user);
            pstmt.setObject(3, pwd);
                
                
            int count =pstmt.executeUpdate();
            return count>0;
                

            
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }finally{
            try {
                pstmt.close();
                conn.close();
                
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
        return false;
        
    }

 

二、登录功能

1、传值给servlet

　　　　　　　　　　<form action="<%=path %>/loginCheck" method="post">
                    <input type="text" name="userName" placeholder="用户名" class="input1"><br>
                    <input type="password" name="pwd" placeholder="密码" class="input2"><br>
                    <input type="submit" name="sub" value="立即登录" class="submit"><br>
                </form>

 

2、servlet中获取值

        request.setCharacterEncoding("utf-8");
        
        String userName=request.getParameter("userName");
        String pwd=request.getParameter("pwd");


            if(isExist(userName, pwd)){
            //登录成功，跳转到
            response.sendRedirect("studentsManage");
        }else{
            //登录失败
            response.sendRedirect("prac02/login.jsp");
        }
        

 

3、操作数据库的isExist()方法

/**
     * 返回值为false表示登录失败
     * @param userName
     * @param pwd
     * @return
     */
    public boolean isExist(String userName,String pwd){
        
        Connection conn=null;
        PreparedStatement pstmt=null;
        ResultSet rs=null;
        
        
        //校验是否成功，默认失败
        boolean flag=false;
        try {
            //加载驱动类
            Class.forName("oracle.jdbc.driver.OracleDriver");
            
            //获取数据库连接
            conn=DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:orcl","ajeesia","123456");

            //加载句柄
            String sql="select * from t_registe where userName=? and pwd=?";
            
            pstmt=conn.prepareStatement(sql);
            
            pstmt.setObject(1, userName);
            pstmt.setObject(2, pwd);
            
            //执行sql语句，返回结果集
            rs=pstmt.executeQuery();
            
            //遍历结果集
            flag=rs.next();
            
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }finally{
            try {
                if(rs!=null)rs.close();
                if(pstmt!=null)pstmt.close();
                if(conn!=null)conn.close();
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
        
        return flag;
        
    }