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