当前位置：首页 > article >正文

网页版五子棋——用户模块（客户端开发）

article 2024/11/8 7:30:31

前一篇文章：网页版五子棋——用户模块（服务器开发）-CSDN博客

·前言

一.登录页面

1.页面代码编写

2.前后端交互代码编写

3.验证登录功能

二、注册页面

1.页面代码编写

2.前后端交互代码编写

3.验证注册功能

·结尾

·前言

本篇文章继续编写五子棋项目中的用户模块代码，在前一篇文章中，我们完成了用户模块服务器端代码的编写，下面我们来编写用户模块客户端代码，在客户端要提供登录页面 + 注册页面，并且要进行前后端交互的操作，这里我们使用 Ajax 来使页面与服务器之间进行交互，引入 jQuery 来简化 Ajax 的使用，本篇文章新增的代码结构及内容如下图所示：

下面就开始本篇文章的内容介绍。

一.登录页面

1.页面代码编写

我们要做的登录页面的大致轮廓如下图所示：

下面我们来创建 login.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>
                <!-- 类型为 password 用户输入密码时就会变成‘·’ -->
                <input type="password" id="password">
            </div>
            <!-- 提交按钮 -->
            <div class="row">
                <button id="submit">提交</button>
            </div>
            <!-- 注册页面的超连接 -->
            <div class="row">
                <a href="/register.html">没有账号？点击注册。</a>
            </div>
        </div>

    </div>
</body>
</html>

公共样式 common.css 的代码及介绍如下：

/* 公共样式 */

/* 去除浏览器默认样式 */
* {
    /* 去掉外边距 */
    margin: 0;
    /* 去掉内边距 */
    padding: 0;
    box-sizing: border-box;
}

/* 设置页面整体样式 */
html, body {
    /* 把高度拉高,html的父元素是浏览器窗口
       height: 100% 的意思就是和浏览器窗口一样高 */
    height: 100%;
    /* 设置背景图,url() 中写图片所在位置 */
    background-image: url(../image/背景图.png);
    /* 设置不平铺 */
    background-repeat: no-repeat;
    /* 设置位置,只写 center 就是垂直水平居中 */
    background-position: center;
    /* 铺满窗口 */
    background-size: cover;
}

/* 设置导航栏样式 */
.nav {
    /* 设置高度 */
    height: 50px;
    /* 设置背景色 */
    background-color: rgb(50, 50, 50);
    /* 设置文字颜色 */
    color: white;
    /* 设置文字位置 */
    line-height: 50px;
    padding-left: 20px;
}

登录页面样式 login.css 的代码及介绍如下：

/* 登录界面样式 */

/* 配置页面主体区域 */
.login-container {
    /* 导航栏已经占据 50px 的像素
       这里使登录界面把剩余部分铺满 */
    height: calc(100% - 50px);
    /* 开启弹性布局 */
    display: flex;
    /* 设置位置
       垂直水平居中 */
    justify-content: center;
    align-items: center;
}

/* 配置登录界面对话框 */
.login-dialog {
    /* 配置对话框的高度与宽度 */
    width: 400px;
    height: 400px;
    /* 区分出登录对话框,加背景颜色
       并设置一个透明度,使样式好看一些*/
    background-color: rgba(255, 255, 255, 0.8);
    /* 把边框的棱角钝化 */
    border-radius: 10px;
}

/* 配置标题 */
.login-dialog h3 {
    /* 设置位置 */
    text-align: center;
    /* 设置内边距 */
    padding: 50px 0; 
}

/* 针对一行配置样式 */
.login-dialog .row {
    width: 100%;
    height: 50px;
    /* 设置弹性布局 */
    display: flex;
    /* 设置位置 */
    align-items: center;
    justify-content: center;
}

/* 对行中内部元素进行样式配置 */
.login-dialog .row span {
    width: 100px;
    /* 设置文字粗细 */
    font-weight: 700;
}

/* 对输入框配置样式 */
#username, #password， #ackpassword {
    width: 200px;
    height: 40px;
    /* 设置内部输入文字的样式 */
    font-size: 20px;
    line-height: 40px;
    /* 设置文字与边框的距离 */
    padding-left: 10px;
    /* 去除边框与轮廓线 */
    border: none;
    outline: none;
    /* 钝化边框棱角 */
    border-radius: 10px;
    /* 设置背景颜色 */
    background-color: aliceblue;
}

/* 配置按钮的样式 */
#submit {
    width: 300px;
    height: 50px;
    /* 设置按钮背景颜色 */
    background-color: rgb(0, 128, 0);
    /* 设置按钮文字颜色 */
    color: white;
    /* 去除按钮边框与轮廓线,钝化棱角 */
    border: none;
    outline: none;
    border-radius: 10px;
    /* 设置与输入框之间的距离 */
    margin-top: 20px;
}

/* 配置按钮点击后的样式 */
#submit:active {
    background-color: #666;
}

到这里，登录界面的代码就编写完毕了，页面如下图所示：

2.前后端交互代码编写

为了实现登录的具体过程，我们使用 Ajax 来使页面和服务器之间进行交互，下面我们来引入 jQuery，具体方法步骤如下图所示：

按上图步骤进行，把复制的 jQuery 代码复制到 jquery.min.js 中，这样我们就可以直接在本地代码中直接使用 jQuery 代码了，其实直接复制网址在代码中进行引用也可以，但是连接有时好使有时不好使，会影响我们程序的运行，所以我们还是把 jQuery 的代码复制到本地稳妥。

jQuery 代码引入完成后，就可以开始编写前后端交互的代码了，这里编写代码要按照前面文章中规定好的接口来编写，登录的接口设计如下：

在 login.html 中编写 js 代码，通过 jQuery 中的 Ajax 来和服务器进行交互，代码及介绍如下：

<!-- 引入 jQuery 代码 -->
<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: '/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>

3.验证登录功能

前后端交互做好之后，我们就可以启动服务器，在浏览器中输入：http://127.0.0.1:8080/login.html 来观察一下登录功能有没有什么问题，验证过程如下图所示：

登录功能到此就算完成了编写及测验，是一个可以正常使用的功能了。

二、注册页面

1.页面代码编写

我们要做的注册页面和登录页面的大致轮廓相似，只不过会多出一个输入框，来确认输入的密码，大致轮廓如下图所示：

下面我们来创建 register.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>
                <!-- 类型为 password 用户输入密码时就会变成‘·’ -->
                <input type="password" id="password">
            </div>
            <div class="row">
                <span>确认密码</span>
                <input type="password" id="ackpassword">
            </div>
            <!-- 提交按钮 -->
            <div class="row">
                <button id="submit">提交</button>
            </div>
            <div class="row">
                <a href="/login.html">返回</a>
            </div>
        </div>

    </div>
</body>

</html>

注册界面引入的样式与登录界面一致，都引入了 common.css 与 login.css ，这里就不再进行代码的展示了。

编写好的注册界面如下图所示：

2.前后端交互代码编写

注册这里的前后端交互代码与登录那里前后端交互代码的编写逻辑大体相同，先引入 jQuery 代码，然后就可以开始编写前后端交互的代码了，这里编写代码要按照前面文章中规定好的接口来编写，注册的接口设计如下：

在 register.html 中编写 js 代码，通过 jQuery 中的 Ajax 来和服务器进行交互，代码及介绍如下：

    <!-- 引入 jQuery 代码 -->
    <script src="js/jquery.min.js"></script>
    <script>
        let usernameInput = document.querySelector('#username');
        let passwordInput = document.querySelector('#password');
        let ackpasswordInput = document.querySelector('#ackpassword');
        let submitButton = document.querySelector('#submit');
        // 点击提交按钮后触发的操作
        submitButton.onclick = function () {
            // 如果"密码"输入框中的内容与"确认密码"输入框中内容不一致
            // 那就不应该进行后续注册的逻辑,需要重新输入密码
            // 并且密码不应该为空
            if (passwordInput.value && ackpasswordInput.value == passwordInput.value) {
                // 下面的前后端交互的数据格式在,设计前后端接口时就规定好了
                $.ajax({
                    type: 'post',
                    url: '/register',
                    data: {
                        // 获取到输入的用户名和密码
                        username: usernameInput.value,
                        password: passwordInput.value,
                    },
                    // 请求执行成功之后的回调函数
                    success: function (body) {
                        // 判定当前是否注册成功
                        // 注册成功,服务器会返回注册好的 User 对象
                        // 注册失败,服务器会返回一个空的 User 对象
                        if (body && body.userId > 0) {
                            // 注册成功
                            alert("注册成功!");
                            // 重定向回登录界面
                            location.assign('/login.html');
                        } else {
                            // 注册失败
                            alert("该用户名已被注册!!");
                        }
                    },
                    // 请求执行失败之后的回调函数
                    error: function () {
                        // 注册失败
                        alert("注册失败,该用户名已被注册!");
                    }
                });
            } else if(passwordInput.value) {
                alert("两次密码输入不一致,请重新输入!!");
            } else {
                alert("密码不能为空!!")
            }
        }
    </script>

3.验证注册功能

前后端交互做好之后，我们就可以启动服务器，在浏览器中输入：http://127.0.0.1:8080/login.html 来观察一下注册功能有没有什么问题，验证过程如下图所示：

注册功能到此就算完成了编写及测验，是一个可以正常使用的功能了。

·结尾

文章到此就要结束了，本篇文章主要介绍了五子棋项目中用户模块的客户端代码编写，其中包含了页面编写、前后端交互代码编写，以及测试了登录注册功能，那么到这，五子棋项目中的用户模块的代码就都编写完成了，如果对本篇文章内容有所疑惑，欢迎在评论区进行留言，如果感觉本篇文章还不错希望能收到你的三连支持，那么我们下一篇文章再见吧~~~

查看全文

http://www.kler.cn/a/384092.html