快捷導(dǎo)航

JSP+Servlet制作Java Web登錄功能的全流程解析

更新時(shí)間：2016年05月25日 17:25:50 作者：xing

Web頁(yè)面登陸功能包括前端的界面以及后臺(tái)的數(shù)據(jù)庫(kù)寫(xiě)入,這里我們總結(jié)了JSP+Servlet制作Java Web登陸功能的全流程解析,需要的朋友可以參考下

0.新建web項(xiàng)目
首先，在MyEclipse里新建java web項(xiàng)目，項(xiàng)目名為login。此時(shí)，項(xiàng)目中包含一個(gè)src文件夾和一個(gè)WebRoot文件夾，以及Java Web自帶的JRE庫(kù)文件夾和J2EE庫(kù)文件夾。其中，在WebRoot文件夾下，包含了WEB-INF文件夾和一個(gè)index.jsp頁(yè)面文件。
接下來(lái)，新建一個(gè)JSP頁(yè)面，命名為login.jsp。
項(xiàng)目文件的結(jié)構(gòu)如下：

2016525171501569.jpg (203×184)

1.設(shè)計(jì)login.jsp頁(yè)面
打開(kāi)login.jsp頁(yè)面后，修改第一行的代碼為pageEncoding="utf-8"，防止頁(yè)面中文出現(xiàn)亂碼。接下來(lái)在body部分定義form表單，用于用戶輸入用戶名和密碼。頁(yè)面代碼如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
 <head>
 <base href="<%=basePath%>">
 <title>登陸頁(yè)面</title> 
 </head>

 <body>
 <form action="login" method="post">
 用戶名：<input name="username" type="text" /><br/>
 密碼：<input name="password" type="password" /><br/>
 <input type="submit" value="提交" />
 </form>
 </body>
</html>

2.新建servlet文件
接下來(lái)，在MyEclipse中新建一個(gè)loginServlet.java,并定義在包文件夾a下（包名自己決定）。文件夾目錄如下：

2016525171642557.jpg (176×63)

雙擊，打開(kāi)loginServlet.java文件，在doPost方法內(nèi)，通過(guò)request.getParameter()方法獲取login頁(yè)面的username和password，并通過(guò)response.sendRedirect()方法跳轉(zhuǎn)到index.jsp頁(yè)面。頁(yè)面代碼如下：

package a; 
import java.io.IOException; 
import javax.servlet.ServletConfig; 
import javax.servlet.ServletException; 
import javax.servlet.ServletRequest; 
import javax.servlet.ServletResponse; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse;

public class loginServlet implements javax.servlet.Servlet{ 
 public void doPost(HttpServletRequest request,HttpServletResponse response)
 throws ServletException,IOException{
 String userName = request.getParameter("username");//取得用戶名
 String password = request.getParameter("password");//取得密碼
 response.sendRedirect("index.jsp");
 }

 public void destroy() { 
 }

 public ServletConfig getServletConfig() {
  return null;
 }

 public String getServletInfo() {
  return null;
 }

 public void init(ServletConfig arg0) throws ServletException {  
 }

 public void service(ServletRequest request, ServletResponse response)
   throws ServletException, IOException {
  HttpServletRequest rq = (HttpServletRequest)request;
  HttpServletResponse rs = (HttpServletResponse) response;
  doPost(rq,rs);

 }
}

3.配置servlet
打開(kāi)WEB-INF文件夾下的web.xml文件，通過(guò)設(shè)置這個(gè)網(wǎng)站的首頁(yè)為login.jsp。接下來(lái)配置servlet。頁(yè)面代碼如下：

<?xml version="1.0" encoding="UTF-8"?> 
<web-app version="2.5" 
 xmlns="http://java.sun.com/xml/ns/javaee" 
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
 http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
 <servlet>
<servlet-name>LoginServlet</servlet-name> 
<servlet-class>a.loginServlet</servlet-class> 
</servlet> 
 <servlet-mapping>
<servlet-name>LoginServlet</servlet-name> 
<url-pattern>/login</url-pattern> 
</servlet-mapping> 
 <welcome-file-list>
 <welcome-file>login.jsp</welcome-file>
 </welcome-file-list>
</web-app>

4.測(cè)試頁(yè)面
最后看看運(yùn)行效果，選擇運(yùn)行，選擇某個(gè)版本的tomcat啟動(dòng)。頁(yè)面效果如下：

2016525171740590.jpg (238×126)

2016525171806832.jpg (251×71)

5.配置數(shù)據(jù)源
（1）創(chuàng)建數(shù)據(jù)庫(kù)
打開(kāi)mysql數(shù)據(jù)庫(kù)，新建數(shù)據(jù)庫(kù),此處命名為login數(shù)據(jù)庫(kù)，在數(shù)據(jù)庫(kù)中創(chuàng)建表login,并且設(shè)置username和password字段。數(shù)據(jù)庫(kù)的設(shè)計(jì)表如下：

2016525171824608.jpg (502×132)

上圖中的id作為主鍵，使得數(shù)據(jù)庫(kù)的表至少符合第二范式的要求，其中username和password字段是login表內(nèi)獨(dú)有的字段，因此此表符合第三范式的要求。
接下來(lái)在login表中填入數(shù)據(jù)，此例的數(shù)據(jù)如下：

2016525172109682.jpg (477×48)

（2）連接數(shù)據(jù)庫(kù)
在MyEclipse中連接數(shù)據(jù)庫(kù)，此處采用加載JDBC驅(qū)動(dòng)的方法連接數(shù)據(jù)庫(kù)。首先下載mysql的驅(qū)動(dòng)，接下來(lái)需要導(dǎo)入mysql的jar包到我們的項(xiàng)目中來(lái)，在包資源管理器中右鍵JRE系統(tǒng)庫(kù)，選擇構(gòu)造路徑-配置構(gòu)建路徑選項(xiàng)卡，彈出的Java構(gòu)建路徑選項(xiàng)卡中，通過(guò)添加外部JAR(X)按鈕加載mysql.jar文件。
　　接下來(lái)，在項(xiàng)目中新建DBUtil.java文件，用于連接mysql數(shù)據(jù)庫(kù)。此處略去連接數(shù)據(jù)庫(kù)的原理，DBUtil.java文件的源代碼如下,請(qǐng)更改源代碼中的數(shù)據(jù)庫(kù)名稱和連入mysql的用戶名密碼等信息：

package a; 
import java.sql.*;

public class DBUtil { 
 boolean bInited = false;
 //加載驅(qū)動(dòng)
 public void initJDBC() throws ClassNotFoundException {
 //加載MYSQL JDBC驅(qū)動(dòng)程序
 Class.forName("com.mysql.jdbc.Driver");
 bInited = true;
 System.out.println("Success loading Mysql Driver!");
 }

 public Connection getConnection() throws ClassNotFoundException,
 SQLException{
 if(!bInited){
 initJDBC();
 }
 //連接URL為 jdbc:mysql//服務(wù)器地址/數(shù)據(jù)庫(kù)名
 //后面的2個(gè)參數(shù)分別是登陸用戶名和密碼
 Connection conn = DriverManager.getConnection(
 "jdbc:mysql://localhost:3306/數(shù)據(jù)庫(kù)名","用戶名","密碼");
 return conn;
 }


 public boolean loginSuccess(String userName,String password){
 boolean returnValue = false;
 String sql = "SELECT * FROM login";
 Connection conn = null;
 Statement stmt = null;
 ResultSet rs = null;

 try{
 conn = getConnection();
 stmt = conn.createStatement();
 rs = stmt.executeQuery(sql);
 while(rs.next()){
 String userNameInDB = rs.getString("username");
 String passwordInDB = rs.getString("password");
 if(userNameInDB.equals(userName) &&
 passwordInDB.equals(password)){
 returnValue = true;
 break;
 }
 }
 }catch (ClassNotFoundException e) {
 e.printStackTrace();
 }catch (SQLException e) {
 e.printStackTrace();
 }

 return returnValue;

 }
}

　　上文中l(wèi)oginSuccess()方法內(nèi)，用于在數(shù)據(jù)庫(kù)中查找用戶名和密碼與傳入?yún)?shù)username、password匹配的情況。一旦找到，則返回true結(jié)果。

（3）修改Servlet業(yè)務(wù)邏輯
修改loginServlet.java文件的業(yè)務(wù)邏輯，在其中加入連接數(shù)據(jù)庫(kù)的語(yǔ)句。其中，主要的頁(yè)面跳轉(zhuǎn)邏輯寫(xiě)著了doPost()方法內(nèi)，修改后的doPost()方法如下：

public void doPost(HttpServletRequest request,HttpServletResponse response) 
 throws ServletException,IOException{
 String userName = request.getParameter("username");//取得用戶名
 String password = request.getParameter("password");//取得密碼
 DBUtil db = new DBUtil();//構(gòu)建數(shù)據(jù)庫(kù)對(duì)象
 boolean canLogin = db.loginSuccess(userName, password);
 if(canLogin){//根據(jù)登陸情況，跳轉(zhuǎn)頁(yè)面
 response.sendRedirect("index.jsp");
 }else{
 response.sendRedirect("login.jsp");
 }
 }

（4）測(cè)試頁(yè)面
調(diào)試后的頁(yè)面效果如下：

2016525171929132.jpg (235×120)