文章目录
- 客户端开发
- 登录功能
- 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>
)
