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

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

article 2025/6/2 0:33:28

文章目录

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

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

文章目录客户端开发登录功能htmlcsscommon.csslogin.css jQuery引入 jquery 运行程序注册功能客户端开发登录功能 html <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport&…...

编程日记 2025/5/31 14:19:26

nt!MiInitializeSystemCache函数分析之PointerPte-＞u.List.NextEntry的由来

第一部分： 1: kd> dd 0xc0304200 c0304200 c10c0000 00000000 00000000 00000000 c0304210 00000000 00000000 00000000 00000000 c0304220 00000000 00000000 00000000 00000000 c0304230 00000000 00000000 00000000 00000000 c0304240 00000000 00000000…...

编程日记 2025/5/31 14:18:24

MQTT协议,EMQX部署,MQTTX安装学习

一、MQTT概述 1.什么是MQTT MQTT是一种基于“发布订阅“”模式的消息传输协议。消息：设备和设备之间传输的数据，或者服务和服务之间要传输的数据。协议：传输数据时所遵循的规范。 2.常见的通讯模式 （1）客户端-服…...

编程日记 2025/6/1 20:33:35

如何理解UDP 和 TCP 区别应用场景

UDP与TCP的定义、特性、使用场景及对比表格定义 UDP（User Datagram Protocol）是一种无连接的传输层协议，提供不可靠的数据报服务。 TCP（Transmission Control Protocol）是一种面向连接的传输层协议，提供…...

编程日记 2025/5/31 14:16:17

60天python训练计划----day40

DAY 40 训练和测试的规范写法知识点回顾： 彩色和灰度图片测试和训练的规范写法：封装在函数中展平操作：除第一个维度batchsize外全部展平dropout操作：训练阶段随机丢弃神经元，测试阶段eval模式关闭dropout 一.单通道图…...

编程日记 2025/5/31 14:15:15

干泵，干式螺杆真空泵

干式真空泵： 无油干式机械真空泵（又简称干式机械泵）是指泵能从大气压力下开始抽气，又能将被抽气体直接排到大气中去，泵腔内无油或其他工作介质，而且泵的极限压力与油封式真空泵同等量级或者接近的机械真空泵…...

编程日记 2025/6/1 14:32:52

Tailwind CSS 实战：基于 Kooboo 构建 AI 对话框页面（五）：语音合成输出与交互增强

Tailwind CSS 实战，基于Kooboo构建AI对话框页面（一） Tailwind CSS 实战，基于Kooboo构建AI对话框页面（二）：实现交互功能 Tailwind CSS 实战，基于 Kooboo 构建 AI 对话框页面&#x…...

编程日记 2025/5/31 14:13:09

职业本科院校无人机专业人才培养解决方案

2023年的中央经济工作会议强调了以科技创新推动现代化产业体系构建的重要性，并提出发展生物制造、商业航天、低空经济等战略性新兴产业。低空经济，依托民用无人机等低空飞行器，在多场景低空飞行活动的牵引下，正逐步形成一个辐射广…...

编程日记 2025/6/1 18:39:47

利用机器学习优化数据中心能效

数据中心作为现代社会的数字基础设施，支撑着云计算、大数据分析、人工智能等关键技术的发展。然而，随着数据中心规模的不断扩大，其能源消耗问题也日益凸显。如何提高数据中心的能源效率，降低运营成本，同时减少环境影响…...

编程日记 2025/6/1 23:37:27

软件评测机构如何保障质量？检测资质、技术实力缺一不可

软件评测机构在保障软件质量上起着关键作用，对软件行业的健康发展极为关键。它们采用专业的技术手段和严格的评估流程，对软件的运行效果、功能等多方面进行细致的审查，为开发者和使用者提供了客观、公正的参考依据。检测资质正规软件评测机…...

编程日记 2025/5/31 14:10:04

微软开源bitnet b1.58大模型，应用效果测评(问答、知识、数学、逻辑、分析)

微软开源bitnet b1.58大模型，应用效果测评(问答、知识、数学、逻辑、分析) 目录 1. 前言... 2 2. 应用部署... 2 3. 应用效果... 3 1.1 问答方面... 3 1.2 知识方面... 4 1.3 数字运算... 6 1.4 逻辑方面... …...

编程日记 2025/5/31 14:09:03

ubuntu 安装上传的 ffmpeg_7.1.1.orig.tar.xz并使用

在 Ubuntu 系统上离线安装 make 需要提前准备好所有依赖包。以下是详细的操作步骤： 准备工作：在有网络的机器上下载所需软件包查找依赖关系在有网络的 Ubuntu 机器上（需与目标机器相同版本）执行： # 获取 make 及其依…...

编程日记 2025/6/1 17:43:10

Web3怎么开发类似MetaMask的钱包

开发一个类似MetaMask的钱包，关键就是要利用以太坊提供的官方接口和标准，主要涉及以下几点： 1. 你要用到的以太坊官方接口和规范 JSON-RPC API 以太坊节点（如Geth、OpenEthereum等）通过JSON-RPC接口暴露各种功能&…...

编程日记 2025/6/1 20:01:10

Linux多线程（六）之线程控制4【线程ID及进程地址空间布局】

文章目录线程ID及进程地址空间布局线程局部存储线程ID及进程地址空间布局 pthread_ create函数会产生一个线程ID，存放在第一个参数指向的地址中。该线程ID和前面说的线程ID不是一回事。前面讲的线程ID属于进程调度的范畴。因为线程是轻量级进程&#xff…...

编程日记 2025/6/1 17:28:07

1.什么是node.js、npm、vue

一、Node.js 是什么？ 😺 定义： Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，让你可以在浏览器之外运行 JavaScript 代码，主要用于服务端开发。 😺从计算机底层说：什么是“运…...

编程日记 2025/6/1 17:10:54

Xamarin入门笔记（Xamarin已经被MAUI取代）

初级代码游戏的专栏介绍与文章目录-CSDN博客 Xamarin入门概述环境 Android开发环境比较简单，自带模拟器，实体机打开开发者模式即可。 iOS开发环境比较复杂，必须搭配Mac电脑，Windows连接Mac开发可能有问题（比如发…...

编程日记 2025/6/1 14:04:23

排查Oracle文件打开数过多

Oracle数据库在运行过程中，会打开大量的文件以执行其操作，包括数据文件、控制文件、日志文件等。如果Oracle用户打开的文件数过多，可能会引起系统性能下降。下面将深入分析Oracle用户文件打开数的优化策略，以帮助数据库管理员&…...

编程日记 2025/6/1 16:42:07

应用层协议http(无代码版)

目录认识URL urlencode 和 urldecode HTTP 协议请求与响应格式 HTTP 的请求方法 GET 方法 POST 方法 HTTP 的状态码 HTTP 常见 Header Location 关于 connection 报头 HTTP版本远程连接服务器工具 setsockopt 我们来学习应用层协议http。虽然我们说, 应用层协…...

编程日记 2025/5/31 14:01:46

8.5 Q1|广州医科大学CHARLS发文甘油三酯葡萄糖指数累积变化与 0-3期心血管-肾脏-代谢综合征人群中风发生率的相关性

1.第一段-文章基本信息文章题目：Association between cumulative changes of the triglyceride glucose index and incidence of stroke in a population with cardiovascular-kidney-metabolic syndrome stage 0-3: a nationwide prospective cohort study 中文标…...

编程日记 2025/5/31 14:00:35

交叉编译tcpdump工具

1.导出交叉编译工具链 export PATH$PATH:/opt/rockchip/gcc-linaro-6.3.1-2017.05-x86_64_arm-linux-gnueabihf/bin 下载源码包libpcap-1.10.5，配置、并编译安装。 github仓库地址 ./configure --hostarm-linux CCarm-linux-gnueabihf-gcc --prefix$PWD/install …...

编程日记 2025/5/31 13:59:32

【Python-Day 20】揭秘Python变量作用域：LEGB规则与global/nonlocal关键字详解

Langchain系列文章目录 01-玩转LangChain：从模型调用到Prompt模板与输出解析的完整指南 02-玩转 LangChain Memory 模块：四种记忆类型详解及应用场景全覆盖 03-全面掌握 LangChain：从核心链条构建到动态任务分配的实战指南 04-玩转 LangChai…...

编程日记 2025/6/1 19:43:13

golang 柯里化（Currying）

使用场景：参数在语义上属于不同组，Go 语法无法在单次调用中声明多组可变参数，通过柯里化可以实现分步接收参数。有的参数是在不同时间段产生，使用Currying可以让函数记住（缓存）参数，避免应用代…...

编程日记 2025/6/1 19:46:11

无人机停机坪运行技术分析！

一、运行方式 1. 自动折叠与展开部分停机坪采用二次折叠设计，通过传动组件实现自动折叠，缩小体积便于运输；展开后最大化停机面积，适应不同任务需求。例如，珠海双捷科技的专利通过两次折叠使停机坪体积最小化&#x…...

编程日记 2025/6/1 23:58:10

comfyui 工作流中视频长度和哪些参数有关？生成15秒的视频，再加上RTX4060 8G显卡，尝试一下

想再消费级显卡上生成15秒长视频，还是比较慢的，不过动漫的画质要求比较低在ComfyUI中生成15秒视频需综合考虑视频参数配置、模型选择和硬件优化，尤其针对RTX 4060 8G显存的限制。 ⏱️ 一、影响视频长度的核心参数总帧数（video_…...

编程日记 2025/6/1 19:17:29

【Java Web】速通HTML

参考笔记： JavaWeb 速通HTML_java html页面-CSDN博客目录一、前言 1.网页组成 1 结构 2 表现 3 行为 2.HTML入门 1 基本介绍 2 基本结构 3. HTML标签 1 基本说明 2 注意事项 4. HTML概念名词解释二、HTML常用标签汇总 + 案例演示 1. 字体标签 font （1）定义（2）案例 2…...

编程日记 2025/6/2 0:12:32

在线制作幼教早教行业自适应网站教程

你想知道怎么做自适应网站吗？今天就来教你在线用模板做个幼教早教行业的网站哦。首先得了解啥是自适应网站。简单说呢，自适应网站就是能自动匹配不同终端设备的网站，像手机、平板、电脑等。那如何做幼早教自适应网站呢？ 在乔拓云…...

编程日记 2025/5/31 13:52:17

WSL 开发环境搭建指南：Java 11 + 中间件全家桶安装实战

在WSL（Windows Subsystem for Linux）环境下一站式安装开发常用工具，能极大提升工作效率。接下来我将分步为你介绍如何在WSL中安装Java 11、Maven、Redis、MySQL、Nacos、RabbitMQ、RocketMQ、Elasticsearch（ES）和Node.…...

编程日记 2025/6/1 20:26:29

matlab天线阵列及GUI框架,可用于相控阵，圆形阵，矩形阵

构建天线阵列及GUI框架,可用于相控阵，圆形阵，矩形阵等 array/array.fig , 35384 array/array.m , 15582 array/circ_array.m , 5959 array/circular_array.m , 4238 array/fig8_5.m , 851 array/fig8_53.m , 441 array/fig8_7.m , 847 array/initialize…...

编程日记 2025/6/1 20:19:08