网页端五子棋对战(三）---登录注册前后端交互接口实现（用户模块完）

阑梦清川

发布于 2025-02-24 22:33:05

3400

代码可运行

文章被收录于专栏：学习成长指南学习成长指南

运行总次数：0

代码可运行

1.登录页面的前端实现

1.1总体页面效果展示

其中这个五子棋对战位于这个导航栏上面，其余的下面的内容属于一个div标签里面的；

1.2html代码编写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <!-- 下面的这个表示的就是让我们把这个css对于样式的设计引入进来 -->
    <link rel="stylesheet" href="css/commen.css">
</head>
<body>
    <div class="nav">
        五子棋对战
    </div>
    <div class="log-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>

1.3css公共样式设计

下面的这个url里面使用的就是相对路径的写法，我们当前在的是commen.css目录下面，…表示的就是上一级目录，就是我们的css文件夹所在的这个目录，在这个目录层级下面找到这个image里面的这个jpg图片，作为我们的这个页面的背景图片；

.nav表示对于我们的这个页面的导航栏进行样式的设计：例如这个颜色，宽度高度之类的，这些都是公共的样式设计；

1.4css单独样式设计

下面的这个4-6行是让我们的这个登录的对话框居中显示，下面的这个12行使设置背景的颜色，初步效果进行预览：

1.5对于内容设计

这个说的内容就是我们的用户名密码的相关设计：下面的这个就是对于这个h3标签和row的设置；

我们设置这个登录和密码输入的框框都是居中显示的

1）	下面的这个就是预览的效果，但是这个显得宽度上面对齐不是很优雅，我们需要进一步调整：即设置固定的边框；

2）	对于这个用户名，密码以及里面的文字的输入内容进行调整


3）	对于提交按钮的这个样式进行调整

4）	因为这个按钮点击上去之后是没有任何反应的，这个时候我们可以根据这个实际情况对于这个点击之后的颜色进行修改，需要添加这个active设置这个点击之后的颜色显示；

	下面的这个就可以看到这个点击按钮之后的颜色就是白色的；

1.6引入Js

1)	找到这个对应的网站复制链接

2）	验证测试之后执行全部选择：把这个内容复制之后粘贴到我们自己的这个代码里面去；（其实我们在这个vscode上面编写代码的时候，这个是可以使用这个script标签把这个链接放进去的，但是这个链接失效的话，就会出现问题，因此下面的这个方式就是把全部的内容放到我们的项目里面来）；

3）	下面的这个就是我们新建文件夹和文件，把上面的复制内容粘贴进来就可以了；

4）	把我们上面的这个链接内容使用script标签引入进来；
	并对于这个登陆成功和登陆失败进行对应的返回和跳转处理；