JSP实现登陆页面(表单提交、连接数据库、实现页面跳转)
1.数据库设计
2.主页面展示
3.代码展示:
index.jsp
< % @ page language= "java" contentType= "text/html; charset=UTF-8" pageEncoding= "UTF-8" % >
< ! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< meta http- equiv= "Content-Type" content= "text/html; charset=UTF-8" >
< title> 登陆页面< / title> < link rel= "stylesheet" type= "text/css" href= "css/style.css" / > < link rel= "stylesheet" href= "https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" >
< / head>
< body> < div id= "bigBox" > < h1> LOGIN< / h1> < div class = "inputBox" > < form action= "check.jsp" method= "post" > < div class = "inputText" > < i class = "fa fa-user-circle" style= "color: whitesmoke;" > < / i> < input type= "text" placeholder= "手机号或邮箱" name= "username" / > < / div> < div class = "inputText" > < i class = "fa fa-key" style= "color: whitesmoke;" > < / i> < input type= "password" placeholder= "密码" name= "password" / > < / div> < input type= "submit" class = "inputButton" value= "LOGIN" / > < / form> < / div> < / div>
< / body>
< / html>
登录页面对应的CSS文件
body { margin : 0; padding : 0; background-image : url(../img/国漫.jpg) ; background-repeat : no-repeat;
}
a { color : #666; text-decoration : none;
}
#bigBox
{ margin : 0 auto; margin-top : 100px; padding : 20px 50px; background-color : #000000; width : 500px; height : 400px; border-radius : 20px; text-align : center; background-image : linear-gradient ( 60deg, #29323c 0%, #485563 100%) ;
}
#bigBox h1
{ font-size : 40px; color : floralwhite;
}
#bigBox .inputBox
{ margin-top : 35px;
}
#bigBox .inputBox .inputText
{ margin-top : 20px;
}
#bigBox .inputBox .inputText input
{ border : 0; padding : 10px 10px; border-bottom : 1px solid white; background-color : #00000000; color : white; width : 200px; height : 40px; font-size : 20px;
}
#bigBox .inputBox .inputText i
{ color : white;
}
#bigBox .inputBox .inputButton
{ border : 0; width : 200px; height : 50px; color : white; margin-top : 55px; border-radius : 20px; background-image : linear-gradient ( to right, #b8cbb8 0%, #b8cbb8 0%,#b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%) ;
}
check.jsp
< % @ page language= "java" contentType= "text/html; charset=UTF-8" pageEncoding= "UTF-8" % >
< % @ page import = "java.sql.*" % >
< ! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< meta http- equiv= "Content-Type" content= "text/html; charset=UTF-8" >
< title> Insert title here< / title>
< / head>
< body> < % String username = request. getParameter ( "username" ) ; String password = request. getParameter ( "password" ) ; Connection connection = null; Statement statement = null; ResultSet rs = null; try { Class. forName ( "com.mysql.jdbc.Driver" ) ; connection = DriverManager. getConnection ( "jdbc:mysql://localhost:3306/test01" , "root" , "root" ) ; statement = connection. createStatement ( ) ; String sql = "select count(*) from login where username = '" + username+ "' and password = '" + password+ "' " ; rs = statement. executeQuery ( sql) ; int count = - 1 ; if ( rs. next ( ) ) { count = rs. getInt ( 1 ) ; } if ( count > 0 ) { request. getRequestDispatcher ( "success.jsp" ) . forward ( request, response) ; } else { request. getRequestDispatcher ( "error.jsp" ) . forward ( request, response) ; } } catch ( ClassNotFoundException e) { e. printStackTrace ( ) ; } catch ( SQLException e) { e. printStackTrace ( ) ; } finally { try { if ( rs != null) rs. close ( ) ; if ( statement != null) statement. close ( ) ; if ( connection != null) connection. close ( ) ; } catch ( SQLException e) { e. printStackTrace ( ) ; } } % >
< / body>
< / html>
success.jsp
< % @ page language= "java" contentType= "text/html; charset=UTF-8" pageEncoding= "UTF-8" % >
< ! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< meta http- equiv= "Content-Type" content= "text/html; charset=UTF-8" >
< title> 登陆成功< / title> < link rel= "stylesheet" href= "https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" > < link rel= "stylesheet" type= "text/css" href= "css/style.css" / >
< / head>
< body> < div id= "main" > < i class = "fa fa-diamond fa-5x" style= "color: #ed9db2; size: 50;" > < / i> < h3 style= "display: inline-block; " > 登陆成功!!< / h3> < / div>
< / body>
< / html>
error.jsp
< % @ page language= "java" contentType= "text/html; charset=UTF-8" pageEncoding= "UTF-8" % >
< ! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html>
< head>
< meta http- equiv= "Content-Type" content= "text/html; charset=UTF-8" >
< title> 登陆失败< / title> < link rel= "stylesheet" href= "https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" > < link rel= "stylesheet" type= "text/css" href= "css/style.css" / >
< / head>
< body> < div id= "main" > < i class = "fa fa-exclamation-triangle fa-5x" style= "color: darkgrey; size: 50;" > < / i> < h3 style= "display: inline-block; " > 登陆失败,请重新检查用户名或密码是否正确!!< / h3> < / div>
< / body>
< / html>