servlet+jdbc+html+css实现后台管理登陆
![效果图](http://img.e-com-net.com/image/info8/d3ce4751cc4e49dea7bdd4ac3c2480a0.jpg)
这个简洁的界面,大家可以自己去加以修改完善。
好了,开始步入正题。
这个web工程的思路是什么呢?
- 登陆界面点击登陆
- 登陆成功,跳转到登陆成功界面
- 登陆失败,跳转到登陆失败界面
好了,我们的具体思路呢?
- 三个jsp文件,一个登陆界面,一个登陆成功后跳转的界面,一个登陆失败后跳转的界面。
- 一个servlet,用来处理点击登陆后的逻辑处理
- 一个css文件夹,一个jsp文件夹
- 连接sql server数据库,进行查询,对结果进行逻辑判断
- 如果查询到的账号和密码与登陆输入的一致,则登陆成功,反之,登陆失败。
首先,我们新创建一个web项目,点击new—>>>Dynamic Web Project—>>>输入项目名称—>>>最后勾选上自动生成web.xml文件。具体看下图:
![效果图](http://img.e-com-net.com/image/info8/8ac35e6fb55a46ca9a54b5520809a5d1.jpg)
注意:记得勾选上web.xml配置文件
![效果图](http://img.e-com-net.com/image/info8/f453acea873e476e99a72823eccdda27.jpg)
web工程的结构图如下:
![效果图](http://img.e-com-net.com/image/info8/8f9d0e80f1a14351a7ba43c2e496649c.jpg)
在开始我们的项目前,因为要用到jdbc连接数据库。我们先干两件事,导入servlet-api.jar包,导入数据库驱动包。这是必须的。否则报错。
sql server 2008的jdbc驱动jar包下载地址:
SQl server 2008 的jdbc驱动下载地址: 密码:55o3
第一步:导入servlet-api.jar包,该包在tomcat的lib目录下。
第二步:窗口(windows)—>>>首选项(preferences)—->>>>选择Java—>>>选择已安装的JRES(Installed JRES)—>>>选中standard VM—->>>选择编辑(Edit)—->>>>选择增加额外的包(Add External Jars)—>>>选择你的servlet-api.jar包导入—->>>确定完成导入。演示操作如下:
![效果图](http://img.e-com-net.com/image/info8/4162cd1a20334117a93d70d696c657cc.jpg)
![效果图](http://img.e-com-net.com/image/info8/27ce892cb6764a69b51149e952fb3023.png)
build path为编译环境的导入。而以上操作为全局操作,该操作不可少。
在上面操作完成后,我们开始正式地编写代码。
首先新建一个01文件夹,new—>>>folder—>>>01—ok;该文件夹用来保存jsp文件。然后我们创建一个login.jsp文件。
代码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<meta charset="UTF-8">
<title>表单提交title>
<link rel="stylesheet" href="../css/form.css"/>
head>
<body>
<div id="container">
<div id="title_nav">div>
<div id="content">
<div id="form_sub">
<p id="manage_tx">管理员登陆面板p>
<form id="form_sub_a" action="<%=request.getContextPath()%>/mylogin" method="post">
<p class="tx_01">账号: <input class="input_va" type="text" name="user" />p>
<p class="tx_01">密码: <input class="input_va" type="password" name="password" />p>
<input class="btn_s" type="submit" value="登陆" />
<input class="btn_s" type="reset" value="取消" />
form>
div>
div>
div>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
从上面的代码中截取关键进行讲解:
"manage_tx">管理员登陆面板
看到该段代码,这是一个form表单,里面四个input控件。一个输入框,一个密码框。一个提交按钮,一个重置密码。
form中的action的值为上下文的路径加上servlet的映射地址。该映射地址在web.xml配置中的中。下面我们会讲到servlet在web.xml中的配置。
上下文的路径我们通过下面这个函数得到:
<%=request.getContextPath()%>
那么我们的action的完整路径就是
action="<%=request.getContextPath()%>/mylogin"
然后在写完了登陆页面后,我们开始配置下一个servlet。
在WebContent目录下的Web-INF下的web.xml文件中,增加一个servlet。
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
<display-name>py01display-name>
<servlet>
<servlet-name>LoginTestservlet-name>
<servlet-class>com.mero.test.LoginServlet.LoginTestservlet-class>
servlet>
<welcome-file-list>
<welcome-file>index.htmlwelcome-file>
<welcome-file>index.htmwelcome-file>
<welcome-file>index.jspwelcome-file>
<welcome-file>default.htmlwelcome-file>
<welcome-file>default.htmwelcome-file>
<welcome-file>default.jspwelcome-file>
welcome-file-list>
<servlet-mapping>
<servlet-name>LoginTestservlet-name>
<url-pattern>/myloginurl-pattern>
servlet-mapping>
web-app>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
我们截取关键代码讲解下:
<servlet>
<servlet-name>LoginTestservlet-name>
<servlet-class>com.mero.test.LoginServlet.LoginTestservlet-class>
servlet>
这个servlet标签中有两子标签,是该servlet的名字,是servlet的类逻辑地址。我们采取包名+servlet类名。windows下采取按住ctrl+鼠标右键移动到该地址上,如果变深色,则代表该标签欸之正确。
我们再看到标签,这个是配置servlet的映射地址。里面同样有两个子标签,一个,另外一个是标签。这个标签可以随便填写。
<servlet-mapping>
<servlet-name>LoginTestservlet-name>
<url-pattern>/myloginurl-pattern>
servlet-mapping>
配置好了web.xml后,我们创建该名为LoginTest的servlet。
在src目录下新建一个包,再创建一个servlet。右键—>new—->servlet。在这里,我们新建的servlet和之前在web.xml中配置的名称一样。取名LoginTest.java。
LoginTest.java具体代码如下:
package com.mero.test.LoginServlet;
import java.io.IOException;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import javax.servlet.RequestDispatcher;
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 com.mero.test.DbDao;
/**
* Servlet implementation class LoginTest
*/
@WebServlet("/LoginTest")
public class LoginTest extends HttpServlet {
public Connection conn=null;
public static String username;
public static String password;
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public LoginTest() {
super();
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
username=request.getParameter("user");
password=request.getParameter("password");
System.out.println(username);
System.out.println(password);
System.out.println("得到request请求参数成功");
try {
conn=DbDao.getConnection();
Statement statement=conn.createStatement();
ResultSet set=statement.executeQuery("select username,password from userInfo where username=790710371");
while(set.next()){
String name=set.getString(1);
String pwd=set.getString(2);
if(username!=null&&password!=null&&username.equals(name)&&password.equals(pwd)){
String forward="/01/success.jsp";
RequestDispatcher df=request.getRequestDispatcher(forward);
df.forward(request, response);
}else{
String forward="/01/failed.jsp";
RequestDispatcher df=request.getRequestDispatcher(forward);
df.forward(request, response);
}
}
} catch (ClassNotFoundException e1) {
e1.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
挑选关键代码进行讲解:
我们看到下面这段代码。我们先通过数据库工具类得到connection连接对象,再通过如下方法获取Statement对象。
Statement statement=conn.createStatement();
我们通过下面方法得到结果集对象 ,Statement对象执行sql语句得到结果集
String sql="select * From table"
ResultSet set=statement.excuteQuery(sql);
然后遍历数据库查询得到账号密码:
while(set.next()){
String username=set.getString(1);
String password=set.getString(2);
.....
}
我们再将得到的字符串与请求得到的参数进行对比。如果参数一致则d登陆成功跳转到success.jsp界面,否则登陆失败跳转到failed。
逻辑判断如下:
if(username!=null&&password!=null&&username.equals(name)&&password.equals(pwd)){
String forward="/01/success.jsp";
RequestDispatcher df=request.getRequestDispatcher(forward);
df.forward(request, response);
}else{
String forward="/01/failed.jsp";
RequestDispatcher df=request.getRequestDispatcher(forward);
df.forward(request, response);
}
这里的jsp转发请点击查看上篇文章:Java web第九课(登陆后的转发)
然后看到我们的工具类,这个类中只包含了得到connection对象以及关闭Statement对象和关闭connection对象的三个方法。
DbDao.java代码如下:
package com.mero.test;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.sql.Statement;
public class DbDao {
public static Connection conn=null;
public static Connection getConnection() throws ClassNotFoundException{
Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver");
System.out.println("加载驱动成功");
try {
Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver");
if(null==conn){
System.out.println("暂时未连接");
conn=DriverManager.getConnection("jdbc:sqlserver://localhost:1433;DatabaseName=Test","sa", "adadadada");
return conn;
}
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
return conn;
}
public static void closeStatement(Statement statement){
if(statement!=null){
try {
statement.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
public static void closeConnection(Connection conn){
if(conn!=null){
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
Class.forName(String arg0);
这个方法用来加载数据库驱动,不同的数据库以及数据库版本的不同填写的不一样。请注意你的数据库版本。我采用的是SQL server 2008.
String Url="jdbc连接方式:数据库类型:带端口的主机地址"
Connection conn=DriverManager.getConnection(Url,Datebase,username,password);
最后编写我们的登陆成功和登陆失败的两个跳转界面的jsp文件。分别为success.jsp和failed.jsp文件。
success.jsp文件和failed.jsp文件中的代码几乎相同。如下:
success.jsp代码:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登陆成功提示title>
head>
<body>
登陆成功 <br/>
你的登陆信息如下:<br/>
账号:<%=request.getParameter("user") %><br/>
密码:<%=request.getParameter("password") %><br/>
<a href="<%=request.getContextPath()%>/01/login.jsp">返回登陆界面a>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
failed.jsp代码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登陆失败提示title>
head>
<body>
登陆失败 <br/>
你的登陆信息如下:<br/>
账号:<%=request.getParameter("user") %><br/>
密码:<%=request.getParameter("password") %><br/>
<a href="<%=request.getContextPath()%>/01/login.jsp">返回登陆界面a>
body>
html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
这样,再给出最后一个CSS样式文件 :
form.css代码如下:
@CHARSET "UTF-8";
*{
margin: 0;
}
body{
width: 100%;
height: 100;
background-color: lightpink;
}
#container{
width: 100%;
heiipsght: 100%;
}
#title_nav{
width: 100%;
height: 40px;
background-color: skyblue;
}
#content{
width: 100%;
height: 1000px;
background-color: lightpink;
}
#form_sub{
margin-left: auto;
margin-right: auto;
width: 400px;
height:270px;
margin-top: 100px;
text-align: center;
font-family: 微软雅黑;
background-color: #008AB8;
}
#manage_tx{
padding-top: 20px;
padding-bottom: 20px;
font-size: 25px;
outline-width:2px;
outline-style:dashed;
color:blanchedalmond;
background-color:#95CAE4;
background-repeat: no-repeat;
}
#form_sub_a{
margin-top: 30px;
margin-bottom: 30px;
font-family: sans-serif;
font-size: 15px;
color:purple;
outline-width: 1px;
}
.tx_01{
color:#95CAE4;
font-size:18px;
font-family: 微软雅黑;
}
.input_va{
width:60%;
height:25px;
border:1px solid darkseagreen;
outline:none;
margin-top: 10px;
padding-left:10px;
padding-top: 3px;
border-radius:30px;
}
.btn_s{
width:100px;
height:30px;
padding: 5px;
margin:20px 30px;
border-radius:5px;
background: transparent;
color: white;
}
.btn_s:hover{
color:red;
opacity:0.5;
}
.btn_s:ACTIVE{
color: orange;
}
.btn_s:visited{
color: red;}
.btn_s:left{
color:white;}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
ok了,以上便是所有的文件讲解。
代码写完之后。我们导出该项目到桌面,格式为war。然后把war文件放到我们的tomcat目录的webapps下。然后双击bin目录下的startup.bat文件开启服务器,服务器将自动解压缩该war文件。
打开浏览器,输入localhost:8080/py01/01/login.jsp
最后上两张效果图: 这两个jsp非常简单,为了简单此Demo并未增加样式。
![效果图](http://img.e-com-net.com/image/info8/59cb47db71114a049d704d7c81671170.jpg)
![效果图](http://img.e-com-net.com/image/info8/d19267c3731842a0b9e34e0aa97aab83.jpg)