项目实战--网页五子棋(登录注册界面)(2)

ops/2025/1/21 18:30:21/

上期我们实现了用户模块的后端代码,这期我们来实现登录界面的前端代码,这里主要讲解前后端交互的代码。这里我事先已经写好了一个简单的登录界面.

1. 登录页面

1. 页面实现

login.html:

<!DOCTYPE html>
<html lang="ch">
<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="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 class="submit" onklick="login()">提交</button></div></div></div>
</body>
</html>

common.css:

/* 公共样式 */* {margin: 0;padding: 0;box-sizing: border-box;
}html, body {height: 100%;background-image: url(../image/image.png);background-repeat: no-repeat;background-position: center;background-size: cover;
}

login.css:

.login-container {height: 100%;display: flex;justify-content: center;align-items: center;
}.login-dialog {height: 300px;width: 400px;background-color: white;border-radius: 20px;
}.login-dialog h3 {text-align: center;padding: 30px 0;
}.login-dialog .row {width: 100%;height: 50px;display: flex;justify-content: center;align-items: center;
}.login-dialog .row span {width: 50px;font-weight: 700;
}#username, #password {width: 200px;height: 30px;font-size: 15px;line-height: 10px;padding-left: 10px;border-radius: 10px;
}.login-dialog .submit {width: 250px;height: 40px;background-color: aqua;border-radius: 10px;
}.login-dialog .submit:active {background-color: rgb(11, 186, 186);
}
1.2 前后端交互

在后续的前后端交互中我们使用jquery来完成,所以还需要引入jquery,我们打开浏览器搜索jquery cdn,找到如下图片中的链接:

选择一个版本复制后在浏览器打开:

 CTRL + A 全选复制,然后创建一个js文件复制进去:

然后使用script标签导入即可:

接下来我们就可以使用ajax发送请求给服务器:

javascript"><script>function login() {$.ajax({type: 'post',url: '/user/login',data: {username: $("#username").val(),password: $("#password").val()},success: function(result) {if(result.username != null) {alert("登录成功当前用户为:" + result.username);}else{alert("登录失败");}},error: function() {alert("请求发送失败");}});}</script>

 运行测试:

2. 用户注册 

注册和登录大体相同,我们直接在登录页面上改:

<!DOCTYPE html>
<html lang="ch">
<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="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 class="submit" onclick="register()">提交</button></div></div></div><script src="js/jquery.min.js"></script><script>function register() {$.ajax({type: 'post',url: '/user/register',data: {username: $("#username").val(),password: $("#password").val()},success: function(result) {if(result.username != null) {alert("注册成功");location.href = "/login.html";}else{alert("注册失败");}},error: function() {alert("请求发送失败");}});}</script>
</body>
</html>

 运行测试:

文章来源:https://blog.csdn.net/2303_78892316/article/details/145114478
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ppmy.cn/ops/150102.html

相关文章

策略模式详解与应用

策略模式&#xff08;Strategy Pattern&#xff09;&#xff0c;是一种行为型设计模式&#xff0c;它定义了一系列算法&#xff0c;并将每个算法封装起来&#xff0c;使它们可以互相替换&#xff0c;而应用程序可以在运行时选择使用哪一个算法。策略模式使得算法的变化独立于使…

【OpenCV】第二章 图像处理基础

2.1 图像的读取与显示 图像的读取与显示是进行任何图像处理工作的第一步。在Python中&#xff0c;使用OpenCV库可以轻松实现这一功能。OpenCV&#xff08;Open Source Computer Vision Library&#xff09;提供了丰富的接口和函数&#xff0c;使得图像的操作变得直观和高效。本…

《探索 PC 端的开源神经网络多模态模型宝藏》

《探索 PC 端的开源神经网络多模态模型宝藏》 一、多模态模型&#xff1a;开启智能交互新纪元二、主流 PC 端开源多模态模型大赏1. Obsidian&#xff1a;轻量级多模态先锋2. GLM-Edge 系列&#xff1a;移动端与 PC 端的全能选手3. Minicpm-llama3-v2.6&#xff1a;紧凑高效的多…

C#语言的数据库编程

C#语言的数据库编程 在现代软件开发中&#xff0c;数据库是不可或缺的一部分。无论是企业级应用还是个人项目&#xff0c;数据的存储与管理都是程序的核心功能之一。C#作为一种强类型、面向对象的编程语言&#xff0c;广泛应用于Windows平台的开发&#xff0c;尤其是在构建与数…

机器学习 - 如何理解几何学中的超平面 ?

线性回归公式 ywTxb 是数据建模中的基础&#xff1a; 数学上&#xff0c;它是一个线性函数。几何上&#xff0c;它是一个超平面。 那么如何理解超平面这个概念呢&#xff1f; 超平面&#xff08;hyperplane&#xff09;是几何学中的一个基本概念&#xff0c;尤其在高维空间和…

Mac远程控制电脑Windows怎么弄?

‌在Mac上远程控制Windows电脑通常需要借助专门的远程控制软件。本文将为您推荐一款操作简单、功能实用的远程控制软件&#xff0c;帮助您轻松实现Mac远程控制电脑Windows&#xff0c;提升工作效率&#xff0c;享受便捷操作。 远程看看软件是一款操作简单、界面美观的远程控制软…

机器翻译优缺点

随着科技的飞速发展&#xff0c;机器翻译是近年来翻译行业的热门话题&#xff0c;在人们的生活和工作中日益普及&#xff0c;使用机器能够提高翻译效率&#xff0c;降低成本。尽管关于机器翻译为跨语言交流带来了诸多便利&#xff0c;但在译文的正确率和局限性方面存在一定争议…

【MFC】设置CTreeCtrl单个节点的文字颜色

问题 功能调整需要依据不同状态设置树控件中单个节点的文字颜色。 分析 1、CTreeCtrl本身有设置文字颜色的接口SetTextColor&#xff0c;但是这个接口是设置树控件整体的文字颜色。 2、在自定义接口可以对树控件单个节点进行更新文字颜色和背景颜色&#xff0c;接收自定义绘制…