flask+mongdb+ 前端三剑客（html+js+css）一个简单的注册登录页面

本文链接：https://blog.csdn.net/m0_37772653/article/details/121125195

搞了一下web网站，作为闲暇时光的一点点乐趣

前端：
css文件

/* 配色方案:
    背景: rgb(224, 207, 254), rgb(255, 239, 255)
    按钮: rgb(181, 154, 254),rgb(245, 189, 253)
*/

{
    margin: 0;
    padding: 0;
}

body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(45deg,rgb(181, 154, 254),rgb(245, 189, 253) ) fixed;
}

.container{
    position: relative;
    width: 70rem;
}

.container img{
    width: 70rem;
}

.switch span{
    color:#ccc;
    font-size: 1.4rem;
    cursor: pointer;
}

.switch span.active{
    color:rgb(181, 154, 254);
}

.panel{
    width: 30%;
    margin: 10rem 0 0;
    position: absolute;
    right:0;
    top:0;

    display: flex;
    justify-content: center;
}

form{
    width: 12rem;
    margin: 3rem 0 0;
}

form .input{
    position: relative;
    opacity: 1;
    height: 2rem;
    width: 100%;
    margin: 2rem 0;
    transition: .4s;
}

.input input{
    outline: none;
    width: 100%;
    border: none;
    border-bottom: .1rem solid rgb(181, 154, 254);
}

.input::after{
    content:attr(placeholder);
    position: absolute;
    left: 0;
    top: -10%;
    font-size: 1.2rem;
    color: rgb(129, 101, 207);
    transition: .3s;
}

.input.focus::after{
    top:-50%;
    font-size: .9rem;
}

.login .input#email,
.login .input#repeat{
    margin: 0;
    height: 0;
    opacity: 0;
}

form span{
    display: block;
    color:rgb(110, 89, 167);
    font-size: .8rem;
    cursor: pointer;
}

form button{
    border:none;
    outline: none;
    margin: 2.5rem 0 0;
    width: 100%;
    height: 3rem;
    border-radius: 3rem;
    background: linear-gradient(90deg,rgb(181, 154, 254),rgb(245, 189, 253) );
    box-shadow: 0 0 8px rgb(181, 154, 254);
    cursor: pointer;
    color:white;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
    <h3>您好</h3>
    <h3>游客，欢迎参观<br><a href="login">请登录</a><br><a href="register">请注册</a></h3>
</body>
</html>

login.html

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>login</title>

   <link rel="stylesheet" type="text/css" href="/static/style.css"/>
 </head>
 <body>

   <div class="container">
     <img src="/static/bc.jpg" alt="" />
     <div class="panel">
       <div class="content login">
         <div class="switch">
           <span id="login" class="active">Login</span>

         </div>
         <form method="POST">
<!--           <div id="email" class="input" placeholder="Email"><input type="text" /></div>-->
           <div class="input" placeholder="Username"><input name="username" type="text" /></div>
           <div class="input" placeholder="Password"><input name="password" type="text" /></div>
<!--           <div id="repeat" class="input" placeholder="Repeat"><input type="password" /></div>-->
           <span>Forget?</span>
           <button>LOGIN</button>
         </form>
       </div>
     </div>
   </div>
 </body>

 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
 <script>
   $('#login').click(function() {
     $('.switch span').removeClass('active')
     $(this).addClass('active')

     $(this)
       .parents('.content')
       .removeClass('signup')
     $(this)
       .parents('.content')
       .addClass('login')

     $('form button').text('LOGIN')
   })

   $('#signup').click(function() {
     $('.switch span').removeClass('active')
     $(this).addClass('active')

     $(this)
       .parents('.content')
       .removeClass('login')
     $(this)
       .parents('.content')
       .addClass('signup')

     $('form button').text('SIGNUP')
   })

   $('.input input').on('focus', function() {
     $(this)
       .parent()
       .addClass('focus')
   })

   $('.input input').on('blur', function() {
     if ($(this).val() === '')
       $(this)
         .parent()
         .removeClass('focus')
   })
 </script>
</html>

register.html

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>register</title>

   <link rel="stylesheet" type="text/css" href="/static/style.css"/>
 </head>
 <body>

   <div class="container">
     <img src="/static/bc.jpg" alt="" />
     <div class="panel">
       <div class="content login">
           <div class="switch">
           <span id="login" class="active">Signup</span>
         </div>
         <form method="POST">
           <div class="input" placeholder="Username"><input name="username" type="text" /></div>
           <div class="input" placeholder="Password"><input name="password" type="text" /></div>

           <button>SIGNUP</button>
         </form>
       </div>
     </div>
   </div>
 </body>

 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
 <script>
   $('#login').click(function() {
     $('.switch span').removeClass('active')
     $(this).addClass('active')

     $(this)
       .parents('.content')
       .removeClass('signup')
     $(this)
       .parents('.content')
       .addClass('login')

     $('form button').text('LOGIN')
   })

   $('#signup').click(function() {
     $('.switch span').removeClass('active')
     $(this).addClass('active')

     $(this)
       .parents('.content')
       .removeClass('login')
     $(this)
       .parents('.content')
       .addClass('signup')

     $('form button').text('SIGNUP')
   })

   $('.input input').on('focus', function() {
     $(this)
       .parent()
       .addClass('focus')
   })

   $('.input input').on('blur', function() {
     if ($(this).val() === '')
       $(this)
         .parent()
         .removeClass('focus')
   })
 </script>
</html>

重要的事
login.html和register.html里的图片可以换为自己的任何一张图片，即在这个位置：
在这里插入图片描述
后台

from flask import Flask, render_template
from flask import redirect
from flask import url_for
from flask import request
import pymongo
import json
from pprint import pprint

client = pymongo.MongoClient(host='192.168.3.201', port=27017)
db = client.database
collection = db.name_key
app = Flask(__name__)


@app.route('/')
def index():
    return render_template('index.html')


@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'GET':
        return render_template('login.html')
    else:
        username = request.form.get('username')
        password = request.form.get('password')
        find = collection.find_one({'name': username, 'key': password})
        print(find)
        if find is not None:
            return render_template('login_success.html')
        else:
            # login_massage = "不存在该用户"
            # return render_template('login.html', message=login_massage)
            return "不存在该用户"


@app.route("/register", methods=["GET", 'POST'])
def register():
    if request.method == 'GET':
        return render_template('register.html')
    else:
        username = request.form.get('username')
        password = request.form.get('password')
        collection.insert_one({'name': username, 'key': password})

        return render_template('register_success.html')


if __name__ == "__main__":
    app.run(host='192.168.3.201', port=8802)