文章目錄
- 客戶端開發
- 登錄功能
- html
- css
- common.css
- login.css
- jQuery
- 引入 jquery
- 運行程序
- 注冊功能
客戶端開發
登錄功能
html
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登錄</title> <!-- 引入css文件 --> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/login.css">
</head>
<body> <div class="nav"> 五子棋對戰 </div> <div class="login-container"> <!-- 登錄界面的對話框 --> <div class="login-dialog"> <!-- 提示信息 --> <h3>登錄</h3> <!-- 這個表示一行 --> <div class="row"> <span>用戶名</span> <input type="text" id="username"> </div> <!-- 這是另一行 --> <div class="row"> <span>密碼</span> <input type="password" id="password"> </div> <!-- 又是一行 --> <div class="row"> <!-- 提交按鈕 --> <button id="submit">提交</button> </div> </div> </div></body>
</html>
- 在瀏覽器中打開
css
現在還是比較丑的，我們再加入一些 CSS，讓界面更加美觀
common.css
創建 css/common.css
/* 公共的樣式 */* { /* 去掉瀏覽器內外邊距 */ margin: 0; padding: 0; box-sizing: border-box;
} html, body { height: 100%; background-image: url(../image/五子棋背景.jpg); background-repeat: no-repeat; /* 垂直水平居中 */ background-position: center; /* 畫面鋪滿 */ background-size: cover;
} .nav { width: 100%; height: 50px; background-color: rgb(51, 51, 51); color: white; display: flex; align-items: center; padding-left: 20px;
} .container { height: calc(100% - 50px); width: 100%; display: flex; justify-content: center; align-items: center; background-color: rgba(255, 255, 255, 0.7);
}
login.css
創建 css/login.css
.login-container { width: 100%; height: calc(100% - 50px); display: flex; justify-content: center; align-items: center;
} .login-dialog { width: 400px; height: 245px; background-color: rgba(255, 255, 255, 0.8); border-radius: 15px;
} .login-dialog h3 { text-align: center; padding: 25px 0 15px;
} /* 針對一行設置樣式 */.login-dialog .row { width: 100%; height: 50px; display: flex; justify-content: center; align-items: center;
} .login-dialog .row span { display: block; /* 設置固定值，能讓文字和后面的輸入框之間有間隙 */ width: 60px; font-weight: 700;
} /* 輸入框 */.login-dialog #username,
.login-dialog #password { width: 200px; height: 33px; font-size: 15px; text-indent: 10px; border-radius: 10px; border: none; outline: none;
} .login-dialog .submit-row { margin-top: 10px;
} .login-dialog #submit { width: 260px; height: 35px; color: white; background-color: rgb(0, 128, 0); border: none; border-radius: 10px; font-size: 20px; margin-top: 5px;
} .login-dialog #submit:active { background-color: #666;
}
jQuery
實現登錄的具體過程
- 使用
ajax，使頁面和服務器之間進行交互 - 引入
jQuery
引入 jquery
本地引入：
- 在瀏覽器中搜索：
jquery cdn - 復制后綴為
min.js的鏈接 - 在瀏覽器中打開鏈接，全選內容并復制
- 在項目文件中創建
static/js/jquery.min/js - 將復制的內容粘貼進去
- 通過
script標簽引入
<script src="./js/jquery.min.js"></script>
鏈接引入：
- 在瀏覽器中搜索：
jquery cdn - 復制后綴為
min.js的鏈接 - 在
login.html中添加script標簽（在div的最后） - 將鏈接粘貼進去
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
通過鏈接引入存在的一個問題
- 當鏈接失效的話，就不得行了
- 更穩妥的是將
jquery保存到本地
我們的關鍵要點：
- 獲取到頁面上的幾個關鍵元素
- 向服務器傳遞請求
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登錄</title> <!-- 引入css文件 --> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/login.css">
</head>
<body> <div class="nav"> 五子棋對戰 </div> <div class="login-container"> <!-- 登錄界面的對話框 --> <div class="login-dialog"> <!-- 提示信息 --> <h3>登錄</h3> <!-- 這個表示一行 --> <div class="row"> <span>用戶名</span> <input type="text" id="username"> </div> <!-- 這是另一行 --> <div class="row"> <span>密碼</span> <input type="password" id="password"> </div> <!-- 又是一行 --> <div class="row"> <!-- 提交按鈕 --> <button id="submit">提交</button> </div> </div> </div> <script src="./js/jquery.min.js"></script> <script> // 1. 獲取到用戶名、密碼和提交按鈕 let usernameInput = document.querySelector('#username'); let passwordInput = document.querySelector('#password'); let submitButton = document.querySelector('#submit'); submitButton.onclick = function() { $.ajax({ type: 'post', url: '/login', data: { username: usernameInput.value, password: passwordInput.value, }, success: function(body) { // 請求執行成功之后的回調函數 // 判斷當前是否登錄成功~ // 如果登錄成功，服務器會返回當前的 User 對象. // 如果登錄失敗，服務器會返回一個空的 User 對象. if (body && body.userId > 0) { // 登錄成功 alert("登錄成功!"); // 重定向跳轉到”游戲大廳頁面“ location.assign('/game_hall.html'); //后續進行實現 }else { alert("登錄失敗!"); } }, error: function() { // 請求執行失敗之后的回調函數 alert("登錄失敗!"); } }) } </script>
</body>
</html>
運行程序
- 運行后端程序
- 訪問
127.0.0.1:8080/login.html
- 輸入賬號密碼（數據庫中有部分賬號）
- 賬號：zhangsan
- 密碼：123
- 登錄成功，網頁重定向到游戲大廳頁面
注冊功能
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>注冊</title> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/login.css">
</head>
<body> <div class="nav"> 五子棋對戰 </div> <div class="login-container"> <!-- 注冊界面的對話框 --> <div class="login-dialog"> <!-- 提示信息 --> <h3>注冊</h3> <!-- 這個表示一行 --> <div class="row"> <span>用戶名</span> <input type="text" id="username"> </div> <!-- 這是另一行 --> <div class="row"> <span>密碼</span> <input type="password" id="password"> </div> <!-- 又是一行 --> <div class="row"> <!-- 提交按鈕 --> <button id="submit">提交</button> </div> </div> </div> <script src="js/jquery.min.js"></script> <script> let usernameInput = document.querySelector("#username"); let passwordInput = document.querySelector("#password"); let submitButton = document.querySelector("#submit"); submitButton.onclick = function() { $.ajax({ type: 'post', url: '/register', data: { username: usernameInput.value, password: passwordInput.value, }, success: function(body) { // 如果注冊成功，就會返回一個新注冊好的用戶對象 if (body && body.username) { // 注冊成功 alert("注冊成功!"); location.assign('/login.html'); }else { alert("注冊失敗!"); } }, error: function() { alert("注冊失敗!"); } }); } </script>
</body>
</html>
)
