一、前言：

做網站開發，要求有多種搭配方式，前台技術可以使用PHP、ASP、JSP、ASP.NET、CGI等任何一種；

需要用到的基礎語言用的最多的就是HTML/CSS、JS、JAVA、XML這些了，HTML/CSS+JS可以實現對界面的描繪渲染，而JAVA則可以做后台數據處理，XML也是可以當作傳輸數據的介質（思考：XML比HTML強大這么多，為什么它沒能替代HTML？）；

這篇文章通過簡單的JSP文件實現登陸界面，所以只用到了以下技術：

HTML/CSS，簡單演示就不做CSS樣式了，可自行學習，改進源代碼

JavaScript

MYSQL使用（借助可視化窗口即可）

JDBC連接數據庫

(前往w3c/菜鳥教程學習吧)

項目中用到多種HTML標簽，例如<input>、<form>、<table>等，項目文件均采用.JSP文件，如果有遇到標簽屬性不理解的狀況請自行百度（不需要死記硬背，用的多了自然便可記住）；

里面用到的內置對象以及JDBC模塊本人也是知之甚少，如有用到（如：response）而且解釋有誤望朋友批評指正哦！

本項目中所用工具如下：

Myeclipse/eclipse(J2EE版本)

MYSQL5.7+SQLyog

MYSQL的JDBC驅動包（點擊下載）

JSTL庫（點擊下載）

chrome/IE（F12鍵）

Tomcat9.0

jdk1.8

也可以嘗試其他數據庫和工具哦！下面進入項目

二、配置Tomcat服務器

需要先配置jdk環境變量並且安裝Tomcat，可能需要制定jre目錄，這里一般都是自動檢測出來的，前往不要當作tomcat安裝目錄給更改了，保持默認下一步才是選擇安裝目錄，安裝完畢之后的Tomcat目錄是不能隨便移動或更名的，否則嚴重影響Tomcat服務開啟失敗。

打開eclipse，根據下面鏈接配置server項即可，注意選擇Tomcat版本的時候請根據自己的版本適當調整，我總是會看到有人裝的是Tomcat9.0卻當低版本用，讓人無語的很，有時eclipse版本不同可能界面有所區別，請自行甄別。

百度經驗：【查看】

三、創建項目firstproject

打開eclipse，創建動態web項目【Dynamic Web Project】，輸入名稱后點擊【完成】，項目目錄結構大概是這個樣子的：

目錄WebRoot是網站的根目錄，我們創建的頁面文件都要放在這個目錄下面才能正確被Tomcat加載並顯示出來，WEB-INF目錄中的lib目錄用來存放此項目中用到的jar包，在這里用到了三個jar文件，就是上面下載的JDBC驅動包和jstl包，復制到lib中，並且添加到build path：右鍵jar包-build path-add to build path。

四、登陸頁面login.jsp

文件內容如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<fmt:requestEncoding value="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>
</head>
<body>

<h2 align="center">快速登錄</h2>
<form name="form1" action="login_validate.jsp" method="post">

<table align="center">
<tr>
<td>用戶名：</td>
<td><input type="text" name="username1" value="${param.username1}"></td>
</tr>
<tr>
<td>密碼：</td>
<td><input type="password" name="password1"></td>
</tr>
<tr>
<td><input type="submit" value="登陸"></td>
<td><input type="reset" value="取消"></td>
</tr>
</table>
</form>
</body>
</html>

第1行：<%@ page%>指令作用於整個jsp頁面，指定jsp頁面腳本語言用的是"java"，文本類型為“富文本”，編碼方式為“UTF-8”;

第2行：引用了標准標簽庫JSTL，並設置前綴為fmt；

第3行：<fmt:requestEncoding>標簽用來指定返回給Web應用程序的表單編碼類型，如果不這么做的話很有可能讓我們提交的數據傳到下一個頁面的時候就變成了亂碼，具體請參見【菜鳥教程】；

第4行：加入HTML4的DTD約束，這么做將會使一些HTML5的東西出現警告！可以刪掉，這是自動生成的；

第8行：設置頁面標題“登陸界面”；

第12行：二級標題“快速登陸”，對齊方式“居中”，一共有6級標題（h1-h6）；

第13行：form表單，名稱為“form1”，提交表單后執行的動作是跳轉到“login_validate.jsp”且將數據提交給這個頁面做驗證處理，以“post”方式提交；

第15行：寫一個table表，tr構建一行，td構建一列；包含了文本框、密碼框、提交按鈕以及重置按鈕；

第18行：文本框“username1”，用來輸入用戶名，他的值取上一個頁面提交到此頁面的“username1”元素。如果用戶登錄不成功會提示你重新登陸，此時點擊重新登錄的話，回到此頁面的時候是記憶了上次輸入的用戶名；

五、登陸驗證頁面login_validate.jsp

文件內容如下：

<%@page import="java.net.URLEncoder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<fmt:requestEncoding value="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>
</head>
<body>
<%

//獲取登錄時提交的用戶名密碼,web
String id = request.getParameter("username1");
String pwd = request.getParameter("password1");
request.setAttribute("username1",id);
/* 解決問題，先要研究問題，URL傳中文參數為什么會出現亂碼？

原因：Http請求傳輸時將url以ISO-8859-1編碼，服務器收到字節流后默認會以ISO-8859-1編碼來解碼成字符流（造成中文亂碼）

解決辦法：我們需要把request.getParameter(“參數名”)獲取到的字符串先用ISO-8859-1編碼成字節流，然后再將其用utf-8解碼成字符流 */

String driver = "com.mysql.jdbc.Driver";

//URL指向要訪問的數據庫名test1

String url = "jdbc:mysql://127.0.0.1:3306/javaweb?characterEncoding=utf8&useSSL=false";

//MySQL配置時的用戶名

String user = "root";

//Java連接MySQL配置時的密碼

String password = "root";

try {

//1 加載驅動程序

	Class.forName(driver);

//2 連接數據庫

	Connection conn = DriverManager.getConnection(url, user, password);

//3 用來執行SQL語句

	Statement statement = conn.createStatement();

//要執行的SQL語句

	String sql = "select * from login";

	ResultSet rs = statement.executeQuery(sql);
	String u = null;
	String p = null;
	while(rs.next()) {
		u = rs.getString("userName");
		p = rs.getString("passWord");
		if(u.equals(id) && p.equals(pwd)) {
			String index="index.jsp?username1="+URLEncoder.encode(id,"utf-8");
			out.println("登陸成功！5s后跳轉跳轉到<a href="+index+">首頁</a>");
			response.addHeader ("refresh", "5;URL=index.jsp?username1="+URLEncoder.encode(id,"utf-8"));
			//response.sendRedirect("index.jsp?username1="+URLEncoder.encode(id,"utf-8"));
			rs.close();
			conn.close();
			return;
		}
	}
	rs.close();
	conn.close();
	out.println("用戶名或密碼錯誤！");
}  catch (ClassNotFoundException e) {
	System.out.println("Sorry,can`t find the Driver!");
	e.printStackTrace();
} catch (SQLException e) {
	e.printStackTrace();
} catch (Exception e) {
	e.printStackTrace();
}
%>
<form>
<input type="hidden" name="username1" value="${param.username1}">
<input type="button" value="重新登陸" onclick="this.form.action='login.jsp';this.form.submit();">
</form>
</body>
</html>

說明：

這里用到了JDBC驅動包記得導入；
user和password適當地更改為自己地MYSQL系統地用戶名密碼；
字符串url中地”javaweb“是我新建的數據庫名稱，編碼方式為UTF-8，“useSSL=false”不加的話可能會導致連接數據庫的時候提示需要ssl認證而連接失敗。
字符串sql中的login是javaweb中的一個表名，里面存放了兩個屬性userName和passWord，根據自己的實際適當更改。
我用的while循環來判斷此用戶是否在login表中，也可以直接用“select * from login where userName=id and passWord=pwd”語句直接查找能與id和pwd同時匹配的條目。
request是jsp的內置對象，使用它的getParameter()函數可以獲得提交頁面提交上來的信息，“username1”和“password1”是login.jsp中form表單中text和password框的對應的id號，點擊submit按鈕可以提交給action屬性指定的頁面處理。
86-89行寫了一個form表單屬性，$(param.username1)也可以獲取username1的值，為了在重新登錄的時候保留用戶名，將它存在input里面，type="hidden"可以使它隱藏。按鈕button的onclick屬性指定點擊按鈕執行的動作。
如果登陸成功，會有一個等待時間來跳轉到主頁，
```
response.addHeader ("refresh", "5;URL=index.jsp?username1="+URLEncoder.encode(id,"utf-8"));
```
使用此方法可以設置頁面定時刷新以及重定向，URL后面直到問號即為重定向位置，？之后將id編碼后賦值給username1傳遞到index.jsp頁面，編碼是必須的，否則會遇到中文亂碼。（相關內容 1|相關內容2）
數據庫使用完之后記得斷開連接；

六、主頁index.jsp

還是直接上代碼：

<%@page import="java.net.URLDecoder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<fmt:requestEncoding value="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>
</head>
<body>
<center>
<font size=14 style="font-weight:bold">
親愛的  <% out.println(URLDecoder.decode(request.getParameter("username1"), "utf-8")); %> ，你好！
</font>
</center>
</body>
</html>

內容簡單的很，就一個顯示用戶名的效果，<%%>中間可以嵌入java代碼，對上一頁面傳來的參數username1進行解碼輸出。

到此為止，所有代碼已經輸入完畢！

選擇在Tomcat中運行login.jsp即可在瀏覽器中顯示效果。在這里我再附上我的數據庫結構：

使用SQLlog連接數據庫后可以查看自己的數據庫詳細信息。

七、學習時間安排

由於課程緊張，時間不是很充裕，不過我想關於“軟件工程”的作業我會積極去做，平均每日一個小時寫代碼是少不了的，偷偷的看了一下前端工程師面試的標准，發現自己差得很多，所以不多說，干吧！

公告：可能是由於博客發表轉換成html的問題，文章中的</body></html>標簽不可顯示，請復制代碼的童鞋自動加上；而且代碼中的<tbody></tbody>標簽也是自動出現的，請自行去除！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 用asp連接Access數據庫制作簡單登陸界面 ASP登陸界面連接ACCESS數據庫（小例子）管理員登陸界面與數據庫操作界面設計 Flask入門之開發簡單登陸界面 iOS登陸界面 Android Studio簡單的登陸界面一個簡單的layui登陸界面簡單的Windows登陸界面設計安卓開發—簡單的登陸界面 pyqt5簡單登陸界面