[网页五子棋][用户模块]客户端开发(登录功能和注册功能)-EW帮帮网

文章目录

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

[网页五子棋][用户模块]客户端开发(登录功能和注册功能)

文章目录

客户端开发

登录功能

html

css

common.css

login.css

jQuery

引入 jquery

运行程序

注册功能

网站公告

今日签到

热门文章

最新发布