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>