利用flask框架实现对用户的注册登录

超、凢脫俗 2021-10-23 13:56 363阅读 0赞

\------------------------------------(分割线)-----------------------------------------------------------------------------------------------------------

项目环境: pycharm 2018 专业版  win10 专业版 python 3.7

项目部署截图

![1738626-20190718154145351-601711826.png][]

前端代码:

regist.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>登录页面练习</title>
        <style>
            body{
         
                background-color: rgb(217, 235, 250);
            }
    
            .loginn{
         
                background-color: white;
                height: 320px;
                width: 240px;
                padding: 25px;
                margin-top: 150px;
                margin-left:60%;
                border-radius: 25px;
                box-shadow:  4px 4px 8px rgba(0, 0, 0,0.5);
            }
            .loginn>p{
         
                margin-left: 40%;
                margin-top: 10px;
                color:black;
                font-size: 20px;
            }
    
            .LOGB{
         
                border-collapse: separate;
                border-radius: 15px;
                border: 1px solid rgb(167, 160, 160);
                text-align: right;
                width: 95%;
                height: 30px;
    
    
            }
            #log1{
         
                text-align: center;
                width: 180px;
                background-color: rgb(137, 202, 180);
                margin-left: 10%;
                border-radius: 25px;
                outline: none;
    
            }
    
            .LOGE{
         
                font-size: 10px;
                margin-left: 30%;
                margin-bottom: 10%;
            }
            .input2{
         
                outline: none;
                border: 0px;
                margin-right: 20%;
    
            }
    
        </style>
    </head>
    <body>
    
        <div class="loginn">
            <p>注册</p>
            <form action="http://127.0.0.1:5000/rsuccess/", method="post">
                <table class="LOGB" cellspacing="0">
                    <tr>
                        <td>用户名: </td>
                        <td><input type="text"  placeholder="姓名" class="input2" name="rename"></td>
                    </tr>
    
                </table>
                <br>
               <table class="LOGB"  cellspacing="0" >
                    <tr>
                        <td>密码: </td>
                        <td><input type="password" placeholder="你的密码" class="input2" name="repwd"></td>
                    </tr>
                </table>
                <br>
                 <table class="LOGB"   cellspacing="1">
                    <tr>
                        <td>+86:</td>
                        <td><input type="text" maxlength="11" placeholder="手机号码" class="input2" ></td>
                    </tr>
    
                </table>
                    <br>
                 <table class="LOGB" cellspacing="0">
                    <tr>
                        <td>验证码:</td>
                        <td><input type="text" style="border:0"class="input2" ></td>
    
                    </tr>
                </table>
                <br>
                <a  href=""><button id="log1">注册</button></a>
                <div class="LOGE">
                    <p><a href="{
         { url_for('login_html') }}">已有账号？请登录</a></p>
                </div>
    
    
            </form>
    
        </div>
    
    </body>
    </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>登录页面练习</title>
        <style>
    
            body{
         
                background-color: rgb(217, 235, 250);
    
            }
    
            .loginn{
         
                background-color: white;
                height: 320px;
                width: 240px;
                padding: 25px;
                margin-top: 150px;
                margin-left:60%;
                border-radius: 25px;
                box-shadow:  4px 4px 8px rgba(0, 0, 0,0.5);
            }
            .loginn>p{
         
                margin-left: 40%;
                margin-top: 10px;
                color:black;
                font-size: 20px;
            }
    
            .LOGB{
         
                border-collapse: separate;
                border-radius: 15px;
                border: 1px solid rgb(167, 160, 160);
                text-align: right;
                width: 98%;
                height: 40Px;;
    
    
            }
            .LOGD{
         
                width: 80%;
                height: 35px;
                margin-left: 8%;
                border-radius: 25px;
                background-color: rgb(160, 207, 192);
                border: 1px solid wheat;
                outline: none;
            }
            .LOGE{
         
                font-size: 10px;
                margin-left: 30%;
                margin-bottom: 10%;
            }
            .input2{
         
                outline: none;
                border: 0px;
                margin-right: 20%;
    
            }
    
        </style>
    </head>
    <body>
    
        <div class="loginn">
            <p>登录</p>
            <br>
            <form action="http://127.0.0.1:5000/lsuccess/" method="post">
                <table class="LOGB" cellspacing="0">
                    <tr>
                        <td>用户名: </td>
                        <td><input type="text"  placeholder="姓名" class="input2" name="username"></td>
                    </tr>
    
                </table>
                <br>
               <table class="LOGB"  cellspacing="0" >
                    <tr>
                        <td>密码: </td>
                        <td><input type="password" placeholder="你的密码" class="input2" name="password"></td>
                    </tr>
                </table>
                <br>
                 <br>
                <div class="LOGD">
                    <a href=""><button class="LOGD" >登录</button></a>
                </div>
                <br>
                <div class="LOGE">
                    <p>没有账号？<a href="{
         { url_for('regist_html') }}">立即注册</a></p>
                </div>
            </form>
    
        </div>
    
    </body>
    </html>

前端不是我写的，是一位小姐姐写的~~
    -------------------------------------------------------------------------------------------------------------------------------

from flask import Flask ,request ,render_template
    from flask_sqlalchemy import  SQLAlchemy
    
    import  config
    app = Flask(__name__)
    
    app.config.from_object(config)
    db = SQLAlchemy(app)
    #对flask进行一个初始化
    #创建一个simple表
    class Simple(db.Model):
        __tablename__ = 'simple'
        id = db.Column(db.Integer ,primary_key=True , autoincrement=True)
        user = db.Column(db.String(100), nullable=False,unique=True)
        pwd = db.Column(db.CHAR(50) , nullable=False ,unique=True)
    db.create_all()
    
    
    
    @app.route('/')
        # -----------------------------------------------------------
    def index():
            return "这是一个首页"
    
    
    @app.route('/lsuccess/', methods=['post' ,'GET'])
    def login():
        if request.method == "POST":
            user = request.form.get('username')
            pwd = request.form.get('password')
            if user == Simple.user and pwd == Simple.pwd:
                return  "参数请求不正常"
            else:
                result = Simple.query.filter(Simple.user == user and Simple.pwd == pwd).first()
                return (" username = %s  pwd = %s" %(result.user ,result.pwd))
        if request.method != 'get':
            return  "前端的锅"
    
    @app.route('/rsuccess/',methods=['POST' ,'GET'])
    def regist_function():
        if request.method =="POST":
            user = request.form.get('rename')
            password = request.form.get('repwd')
            simple1 = Simple(user=user, pwd=password)
            db.session.add(simple1)
            db.session.commit()
            return ("注册成功  账号 = %s  密码= %s" % (user, password))
            # pass
    
    @app.route('/regist/')
    def regist_html():
        return render_template('regist.html')
    
    @app.route('/login/')
    def login_html():
        return render_template('login.html')
    
    
    if __name__ == '__main__':
        app.run(debug = True)

config.py

DIALECT = 'mysql'
    DRIVER = 'pymysql'
    USERNAME = 'root'
    PASSWORD = 'root'
    HOST = 'localhost'
    PORT = '3306'
    DATABASE = 'test'
    SQLALCHEMY_DATABASE_URI = "{}+{}://{}:{}@{}:{}/{}?charset=utf8".format(DIALECT, DRIVER, USERNAME, PASSWORD, HOST, PORT, DATABASE)
    
    SQLALCHEMY_TRACK_MODIFICATIONS = False

建议写后端的人，以后和前端进行拼接任务的，一定要和前端的人商量好，这个页面该怎么怎么跳转，到底是谁来实现。实现之后又是什么样，一定要讨论好，不能讨论不好，上去就开始干。。。。。。前端和后端真是一个相互仇恨的组合，今天让小姐姐加上在注册密码的时候两次密码不一致这个用js可以实现校验的功能，小姐姐看我的眼神就不好了。。。。 逃。。。今天就先记录那么多吧

转载于:https://www.cnblogs.com/Triangle-security/p/11207758.html

[1738626-20190718154145351-601711826.png]: /images/20211023/7c9211ef4eaf4322a970241f899b844e.png