希望能通過 JSP 的學習，幫助自己更好地理解 WEB 開發的基本原理。
JSP是前后端融合的技術
JSP 寫出來，就是一個 HTML 的文本文件。
其中大部分是 HTML 語法，摻雜了部分由 <% %> 包裹着的 JAVA 語法。
其中，HTML 語法直接被瀏覽器解析和執行；
而 JAVA 語法，則被 Tomcat 服務器的 JSP 引擎轉換成 Servlet 可執行類。
如此一個 JSP 便同時實現了前端、后端的融合。
登錄和注冊的步驟
一般情況下，我們在未注冊的情況下，登錄一個網站，不考慮第三方登錄和短信驗證的情況下，一般會經歷這幾個步驟：
1. 點擊登錄
此時，網站會獲取你填寫的登錄信息，拿到數據庫去查找，看看是否有這個用戶，密碼是否正確等。
2. 登錄失敗
因為我們沒有注冊過，所以網站在數據庫中沒法找到用戶名，就會告訴我們登錄失敗。
3. 注冊
此時，網站一般會提示用戶注冊新賬號，跳轉到注冊界面。
用戶填寫符合網站要求的 ID 和密碼，並確認密碼
網站將用戶的 ID 和密碼存放到數據庫里。
4. 注冊成功
如果用戶注冊的 ID 和數據庫已有 ID 不沖突，那么網站會提示注冊成功
5. 再次登錄
此時，用戶使用新注冊的 ID 和對應密碼登錄，並且還可以選擇 “記住密碼”
6. 登錄成功
網站在數據庫中查找用戶 ID 和密碼，因為我們剛剛注冊了，所以此時是能夠找到的，允許用戶登錄，顯示登陸后的界面。
難點
用 JSP 實現用戶登錄和注冊的難點主要有
- 數據庫操作
- 注冊時調用 javascript 函數確認兩次輸入密碼是否相同
- 使用 AJAX 無刷新檢測用戶名是否已存在
1. 數據庫操作
主要參考了
這篇
BaseDao
BaseDao 類是最基本的數據庫操作類，要完成 connect 和 closeAll 方法
BaseDao.java
connect方法
public void connect(){
try{
Class.forName("com.mysql.cj.jdbc.Driver");
connection = DriverManager.getConnection(url,name,password);
statement = connection.createStatement();
}catch (Exception e){
e.printStackTrace();
}
}
該方法使用 JDBC 方式，進行了數據庫的連接
connection = DriverManager.getConnection(url,name,password);
- url 是連接的主機號和端口號以及數據庫名稱和連接時的相關參數，例如
jdbc:mysql://localhost:3306/snake_game?characterEncoding=utf-8 - name 是該數據庫的管理員賬號名稱 一般是
root - password 一般是
123456
關於為什么要用 Class.forName("com.mysql.cj.jdbc.Driver")
可以參考這篇博客
UserDao
UserDao 類是針對 User 實體類的數據庫操作類，它是 BaseDao 的子類，繼承了 BaseDao 的數據庫連接和關閉方法以及相關的變量成員。
為了實現用戶的
- 登錄
- 注冊
- 檢查 ID 是否重復
等功能需求
UserDao 類發展出了多種方法
如
- doLogin
- doSignup
- checkId
以 doLogin 方法為例
doLogin
public User doLogin(String id,String password){
User user = null;
try{
super.connect();
String sql = "select * from user where id=? and password=?";
preparedStatement = connection.prepareStatement(sql);
preparedStatement.setString(1,id);
preparedStatement.setString(2,password);
resultSet = preparedStatement.executeQuery();
while (resultSet.next()){
user = new User();
user.setId(resultSet.getString(1));
user.setPassword(resultSet.getString(2));
}
}catch (Exception e){
e.printStackTrace();
}finally {
super.closeAll();
}
return user;
}
每次進行查詢前，先調用父類方法連接數據庫；
接着調用父類成員 connection 獲取 preparedStatement 成員以進行SQL操作；
2. javascript 檢驗兩次密碼是否相同
話不多說，直接上代碼
<script>
function confirmPassword(){
var password1 = $("input[name='password1']").val();
var password2 = $("input[name='password2']").val();
if(password1!==password2){
document.getElementById("confirm").innerHTML="兩次密碼不同";
}else {
document.getElementById("confirm").innerHTML="相同";
}
}
</script>
<body>
<h1>注冊</h1>
<form action="signup_process.jsp" method="post">
您的id <input type="text" name="user" id="user">
密碼 <input type="password" name="password1"> <br>
確認密碼 <input type="password" name="password2" onblur="confirmPassword()">
<div id="confirm"></div>
<br>
<input type="submit" value="注冊">
</form>
</body>
3. AJAX 無刷新檢測 ID 是否重復
主要參考了，這個
需要 AJAX + Servlet 類配合
話不多說，上代碼
signup.jsp
<script>
function checkId() {
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState===4 && xmlHttp.status===200){
var data = xmlHttp.responseText;
callBack(data);
}
};
var param = document.getElementById("user").value;
console.log("param="+param);
xmlHttp.open("GET","/jsp_learning_war_exploded/check?id="+param,true);
xmlHttp.send(null);
}
function callBack(param) {
if(param==="0"){
document.getElementById("id").innerHTML="OK"
}else {
document.getElementById("id").innerHTML="用戶ID重復"
}
}
</script>
<body>
<h1>注冊</h1>
<form action="signup_process.jsp" method="post">
您的id <input type="text" name="user" id="user" onblur="checkId()">
<div id="id">
</div>
<br>
密碼 <input type="password" name="password1"> <br>
確認密碼 <input type="password" name="password2" onblur="confirmPassword()">
<div id="confirm"></div>
<br>
<input type="submit" value="注冊">
</form>
</body>
UserDao.java 的 CheckId 方法
public int checkId(String id){
int result = 0;
try{
super.connect();
String sql = "select * from user where id=?";
preparedStatement=connection.prepareStatement(sql);
preparedStatement.setString(1,id);
resultSet = preparedStatement.executeQuery();
while (resultSet.next()){
result ++;
}
}catch (Exception e){
e.printStackTrace();
}finally {
super.closeAll();
}
return result;
}
顯示效果
