JSP前后台交互實現注冊、登錄功能

一、注冊功能

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;
        
    }