python前台登陆界面,Python交流,技术交流,鱼C论坛

tengke 发表于 2023-5-21 21:20:49

python前台登陆界面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
   * {
         margin: 0;
         padding: 0;
   }
   html, body {
         height: 100%;
         height: 100%;
   }
   .login {
         width: 358px;
         height: 588px;
         border-radius: 15px;
         padding: 0 50px;
         position: relative;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
         background-color: #282c34;
   }
   .header {
         font-size: 38px;
         font-weight: bold;
         text-align: center;
         line-height: 200px;
         color: #61dafb;
   }
   .container {
         height: 30px;
         width: 250px;
         position: absolute;
         left: 50%;
         top: 40%;
         transform: translate(-50%, -50%);
   }

   input {
         width: 100%;
         height: 100%;
         position: relative;
         outline: none;
         border: none;
         box-sizing: border-box;
         padding-left: 5px;
         background-color: #282c34;
         color: #61dafb;
         caret-color: #61dafb;
   }
   input::placeholder {
         color: #61dafb;
   }

   span {
         position: absolute;
         content: "";
         display: block;
         background-color: #61dafb;
         transition: transform .1s ease-in-out;
   }
   .top,
   .bottom {
         left: 0px;
         right: 0px;
         height: 2px;
   }
   .left,
   .right {
         top: 0px;
         bottom: 0px;
         width: 2px;
         transform: scaleY(0);
   }
   .top {
         top: 0px;
         transform: scaleX(0);
         transform-origin: left center;
         transition-delay: .2s;
   }
   .left {
         left: 0px;
         transform-origin: bottom center;
         transition-delay: .3s;
   }
   .bottom {
         bottom: 0px;
   }
   .right {
         right: 0px;
         transform-origin: top center;
         transition-delay: .1s;
   }
   input:focus ~ .right {
         transform: scaleY(1);
         transform-origin: bottom center;
   }
   input:focus ~ .left {
         transform: scaleY(1);
         transform-origin: top center;
   }
   input:focus ~ .top {
         transform: scaleY(1);
         transform-origin: right center;
   }
   .container1 {
         height: 30px;
         width: 250px;
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
   }
   .btn {
         position: absolute;
         left: 50%;
         top: 54%;
         transform: translate(-50%, -50%);
         text-align: center;
         padding: 5px;
         width: 52%;
         margin-top: 40px;
         background-color: #61dafb;
         color: #fff;
   }
</style>
</head>
<body>
<div class="login">
   <div class="header">登录</div>
   <div class="container">
         <input type="text" placeholder="请输入用户名">
         <span class="left"></span>
         <span class="right"></span>
         <span class="top"></span>
         <span class="bottom"></span>
   </div>
   <div class="container1">
         <input type="password" placeholder="请输入密码">
         <span class="left"></span>
         <span class="right"></span>
         <span class="top"></span>
         <span class="bottom"></span>
   </div>
   <div class="btn">登录</div>
</div>
</body>
</html>

大佬我想把这个代码的登陆变得与这个验证一致要怎么更改呢
<input type="text" placeholder="请输入用户名">
<input type="password" placeholder="请输入密码">
这两个代码需要改动吗

isdkz 发表于 2023-5-21 21:20:50

您的HTML前端登陆界面与您的验证代码一致的主要步骤在于：

1. 在表单提交时，需要把提交的用户名和密码发送到后端进行验证。
2. 在后端，根据接收到的用户名和密码，进行对应的验证，例如查询数据库看是否有对应的用户以及密码是否正确。
3. 根据验证的结果，返回对应的响应给前端。

这里需要一些后端编程语言，例如Python的Flask或者Django来处理，同时也需要前端的JavaScript来发送请求。下面是一个简单的例子说明如何修改：

在前端HTML中添加form，给按钮添加点击事件：
<form id="loginForm">
<div class="container">
   <input id="username" type="text" placeholder="请输入用户名">
   <span class="left"></span>
   <span class="right"></span>
   <span class="top"></span>
   <span class="bottom"></span>
</div>
<div class="container1">
   <input id="password" type="password" placeholder="请输入密码">
   <span class="left"></span>
   <span class="right"></span>
   <span class="top"></span>
   <span class="bottom"></span>
</div>
<button class="btn" type="submit">登录</button>
</form>

在JavaScript中处理提交事件，并发送Ajax请求到后端：
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the form from submitting via the browser
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;

fetch('/login', { // Replace with your backend url
   method: 'POST',
   body: JSON.stringify({
         'username': username,
         'password': password
   }),
   headers: {
         'Content-Type': 'application/json'
   }
}).then(function(response) {
   if (response.ok) {
         return response.json();
   } else {
         throw new Error('Error: ' + response.statusText);
   }
}).then(function(data) {
   // Handle the result
}).catch(function(error) {
   console.log('error: ' + error);
});
});

这只是一个简单的示例，实际开发中可能需要进行更多的错误处理和用户反馈，如显示一个加载的spinner，显示错误信息等等。同时在后端也需要进行更多的错误处理，例如防止SQL注入，防止密码在网络中明文传输等等。

sfqxx 发表于 2023-5-21 22:25:26

您好！根据您的描述，我理解您希望将原来的登陆表单改成与现在验证表单一致的样式。那么您可以按照以下步骤进行修改：

1. 更改输入框的类名
将原来的登录表单输入框的类名更改为验证表单相应的类名。例如，将用户名输入框的类名改为 `phone-input`，密码输入框的类名改为 `pw-input`。

2. 修改 placeholder 属性值
将原来的占位符文本更改为联系电话和验证码的提示文本，分别是“请输入手机号码”和“请输入验证码”。

3. 删除多余的 HTML 元素
由于现在的验证表单已经使用了单独的按钮元素来触发验证码的发送和校验操作，因此需要删除原来的按钮元素。

示例代码如下：

<div class="login">
<div class="header">登录</div>
<div class="container">
   <input type="text" class="phone-input" placeholder="请输入手机号码">
   <span class="left"></span>
   <span class="right"></span>
   <span class="top"></span>
   <span class="bottom"></span>
</div>
<div class="container1">
   <input type="password" class="pw-input" placeholder="请输入验证码">
   <span class="left"></span>
   <span class="right"></span>
   <span class="top"></span>
   <span class="bottom"></span>
</div>
<div class="btn">登录</div>
</div>

请注意，上述只是一个示例，并不能保证在您的代码中可行。如果您需要更具体的帮助，请提供更多的相关信息和代码细节。

有用请设置最佳答案

页: [1]

鱼C论坛's Archiver

python前台登陆界面