设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Python交流 › python前台登陆界面
返回列表 发新帖
查看: 813|回复: 2

[已解决]python前台登陆界面

[复制链接]
tengke
发表于 2023-5-21 21:20:49 | 显示全部楼层 |阅读模式
5鱼币
<!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，给按钮添加点击事件：
  1. <form id="loginForm">
  2.     <div class="container">
  3.         <input id="username" type="text" placeholder="请输入用户名">
  4.         <span class="left"></span>
  5.         <span class="right"></span>
  6.         <span class="top"></span>
  7.         <span class="bottom"></span>
  8.     </div>
  9.     <div class="container1">
  10.         <input id="password" type="password" placeholder="请输入密码">
  11.         <span class="left"></span>
  12.         <span class="right"></span>
  13.         <span class="top"></span>
  14.         <span class="bottom"></span>
  15.     </div>
  16.     <button class="btn" type="submit">登录</button>
  17. </form>
复制代码


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

  6.     fetch('/login', { // Replace with your backend url
  7.         method: 'POST',
  8.         body: JSON.stringify({
  9.             'username': username,
  10.             'password': password
  11.         }),
  12.         headers: {
  13.             'Content-Type': 'application/json'
  14.         }
  15.     }).then(function(response) {
  16.         if (response.ok) {
  17.             return response.json();
  18.         } else {
  19.             throw new Error('Error: ' + response.statusText);
  20.         }
  21.     }).then(function(data) {
  22.         // Handle the result
  23.     }).catch(function(error) {
  24.         console.log('error: ' + error);
  25.     });
  26. });
复制代码


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

最佳答案

isdkz

查看完整内容

您的HTML前端登陆界面与您的验证代码一致的主要步骤在于： 1. 在表单提交时，需要把提交的用户名和密码发送到后端进行验证。 2. 在后端，根据接收到的用户名和密码，进行对应的验证，例如查询数据库看是否有对应的用户以及密码是否正确。 3. 根据验证的结果，返回对应的响应给前端。 这里需要一些后端编程语言，例如Python的Flask或者Django来处理，同时也需要前端的JavaScript来发送请求。下面是一个简单的例子说明如何修 ...
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

isdkz
发表于 2023-5-21 21:20:50 | 显示全部楼层    本楼为最佳答案   
您的HTML前端登陆界面与您的验证代码一致的主要步骤在于：

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

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

在前端HTML中添加form，给按钮添加点击事件：
  1. <form id="loginForm">
  2.     <div class="container">
  3.         <input id="username" type="text" placeholder="请输入用户名">
  4.         <span class="left"></span>
  5.         <span class="right"></span>
  6.         <span class="top"></span>
  7.         <span class="bottom"></span>
  8.     </div>
  9.     <div class="container1">
  10.         <input id="password" type="password" placeholder="请输入密码">
  11.         <span class="left"></span>
  12.         <span class="right"></span>
  13.         <span class="top"></span>
  14.         <span class="bottom"></span>
  15.     </div>
  16.     <button class="btn" type="submit">登录</button>
  17. </form>
复制代码


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

  6.     fetch('/login', { // Replace with your backend url
  7.         method: 'POST',
  8.         body: JSON.stringify({
  9.             'username': username,
  10.             'password': password
  11.         }),
  12.         headers: {
  13.             'Content-Type': 'application/json'
  14.         }
  15.     }).then(function(response) {
  16.         if (response.ok) {
  17.             return response.json();
  18.         } else {
  19.             throw new Error('Error: ' + response.statusText);
  20.         }
  21.     }).then(function(data) {
  22.         // Handle the result
  23.     }).catch(function(error) {
  24.         console.log('error: ' + error);
  25.     });
  26. });
复制代码


这只是一个简单的示例，实际开发中可能需要进行更多的错误处理和用户反馈，如显示一个加载的spinner，显示错误信息等等。同时在后端也需要进行更多的错误处理，例如防止SQL注入，防止密码在网络中明文传输等等。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

sfqxx
发表于 2023-5-21 22:25:26 | 显示全部楼层
您好！根据您的描述，我理解您希望将原来的登陆表单改成与现在验证表单一致的样式。那么您可以按照以下步骤进行修改：

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

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

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

示例代码如下：

  1. <div class="login">
  2.     <div class="header">登录</div>
  3.     <div class="container">
  4.         <input type="text" class="phone-input" placeholder="请输入手机号码">
  5.         <span class="left"></span>
  6.         <span class="right"></span>
  7.         <span class="top"></span>
  8.         <span class="bottom"></span>
  9.     </div>
  10.     <div class="container1">
  11.         <input type="password" class="pw-input" placeholder="请输入验证码">
  12.         <span class="left"></span>
  13.         <span class="right"></span>
  14.         <span class="top"></span>
  15.         <span class="bottom"></span>
  16.     </div>
  17.     <div class="btn">登录</div>
  18. </div>
复制代码


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

有用请设置最佳答案
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-5-3 11:45

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表