加入mysql数据库实现完整的登录注册功能

功能简介:

用户有用户名(user),手机号(mobile),邮箱(email),密码(password).

user为主键,mobile唯一保证一个手机号只能注册一个用户,邮箱不唯一并且可为空.故这里用户可以使用user和mobile登录,mobile还可以用找回密码,email仅用于找回密码

在注册页面,输入手机号和密码注册用户,若手机号已被注册则显示"该手机号已注册",否则注册成功并跳转到登陆页面,并显示"注册成功请登录"

在登陆页面,输入用户名(或手机号)和密码,有错误则显示"用户不存在"或"密码错误",无误则进入主页

未登录但直接通过主页链接直接访问主页,会被传送到登陆界面;登录后通过主页链接访问主页会进入主页

未完善功能:

找回密码功能;手机号验证功能,注册时验证手机号真实性(即发送验证码)

页面展示:

登录页面

 注册页面

用户协议页面

主页

代码部分:

python flask部分的代码web_login.py

(在用户注册的函数register()中偷了个懒,将手机号暂且同时作为用户名)

查看代码
 from flask import Flask, render_template, request, redirect, url_for, session, flash
from sql_op import SQL

sql=SQL()
app = Flask(__name__)
app.secret_key='QWERTYUIOP'#对用户信息加密(使用session的前提)

@app.route('/login', methods=['GET', 'POST'])
def login():
    #如果是get请求,跳转到登录网址
    if request.method == 'GET':
        return render_template('登录css.html')
    #获取post信息
    #print(request.form)
    username = request.form.get('username')
    user_set = sql.sql_select(username=username)
    password = request.form.get('password')

    #判断用户是否存在
    if user_set == None:
        print('用户不存在')
        return render_template('登录css.html',msg='用户不存在')
    
    #判断密码是否正确
    elif user_set['password'] != password:
        print('密码错误')
        return render_template('登录css.html',msg='密码错误')
    
    #username 这个变量的值存储到会话对象 session 的 'user_info' 键下。这样做的目的是为了跨请求保持用户信息
    session['user_info']=username
    return redirect('/home')

@app.route('/register', methods=['GET', 'POST'])
def register():
    #如果是get请求,跳转到注册网址
    if request.method == 'GET':
        return render_template('注册css.html')
    
    #获取post信息
    #print(request.form)
    mobile = request.form.get('mobile')
    user_set = sql.sql_select(mobile=mobile)
    if user_set != None:
        print('该手机号已注册')
        return render_template('注册css.html',msg='该手机号已注册')
    password = request.form.get('password')
    #插入数据库
    sql.sql_insert(username=mobile,password=password,mobile=mobile)
    return render_template('登录css.html',msg2='注册成功请登录')

@app.route('/用户协议.html', methods=['GET', 'POST'])
def user_agreement():
    return render_template('用户协议.html')

@app.route('/home', methods=['GET', 'POST'])
def home():

    user_info=session.get('user_info')
    if not user_info:
        print('请先登录')
        return redirect('/login')
    return '欢迎登录成功来到主页'

@app.route('/', methods=['GET', 'POST'])
def default():
    return redirect('/login')


if __name__ == '__main__':
    #app.secret_key = 'super secret key'
    app.run(debug=True)

python 封装SQL类代码sql_op.py

查看代码
 import pymysql

class SQL:

    def __init__(self):
        #链接数据库
        self.conn = pymysql.connect(host='127.0.0.1',port=3306, user='root', password='mysql', db='graduate_pj', charset='utf8')
        self.cursor = self.conn.cursor(cursor=pymysql.cursors.DictCursor)
    def sql_insert(self,username,password,mobile,email=''):

        #执行插入sql语句
        self.cursor.execute('insert into user_table values(%s,%s,%s,%s)',[username,mobile,email,password])
        self.conn.commit()

    def sql_select(self,username='',mobile=''):
        #执行查询sql语句
        self.cursor.execute('select * from user_table where user = %s or mobile = %s',[username,mobile])
        #获取查询结果
        result = self.cursor.fetchone()
        return result
if __name__ == '__main__':
    sql = SQL()
    #sql.sql_insert('2233','13020616145','2337519167@qq.com','123qwe')
    sql.sql_select('2233')

 登录css.html代码

查看代码
 <!--该界面由bootstrap3.4的css样式的表单为主体修改而来-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的登录页面</title>

    <!--flask项目中引入的css文件的(flask项目的css文件的路径为在static目录下)-->
    <link rel="stylesheet"
        href="/static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <style>
    .account{
        /*宽度和高度*/
        width: 500px;
        /*边框*/
        border: 1px solid rgb(102, 97, 97);
        /*左右居中*/
        margin-left: auto;
        margin-right: auto;
        /*上边距*/
        margin-top: 100px;
        /*内边距*/
        padding: 20px 40px;
        /*阴影 水平方向 垂直方向 模糊距离*/
        box-shadow: 5px 5px 5px rgba(88, 88, 88, 0.5);
    }
    .account h3{
        /*文本居中*/
        text-align: center;
        /*加粗*/
        font-weight: bold;
    }
    #error{
        color: red;
        margin: 10px

    }
    #great{
        color: rgb(0, 255, 0);
        margin: 10px

    }
    
    
</style>
</head>
<body>
    <div class="account">
        <!--form表单-->
        <form action="/login" method="post" onsubmit="return validateForm2()">
            <h3>用户登录</h3>
            <!-- 用户名输入框 -->
            <div class="form-group">
                <label>用户名</label>
                <input class="form-control" id="Username"
                       placeholder="请输入用户名/手机号" name="username">
            </div>
            
            <!-- 密码输入框 -->
            <div class="form-group">
                <label>密码</label>
                <input type="password" class="form-control"
                       id="Password" placeholder="请输入密码"
                       name="password">
            </div>
    
            <!-- 协议及同意复选框 -->
            <div class="checkbox">
                <a href="用户协议.html">《某某协议》</a>
                <label>
                    <input type="checkbox" name="agree" id="agreementCheckbox">我已详细阅读此协议
                </label>
            </div>
            <div id="error">{{msg}}</div>
            <div id="great">{{msg2}}</div>
            <!-- 提交按钮 -->
            <button type="submit" class="btn btn-primary">登 录</button>
        </form>
        <!--注册页面-->
        <a href="/register">去注册</a>
    </div>
    
    <script>
    function validateForm2() {
        // 验证用户名和密码是否为空
        var username = document.getElementById("Username").value;
        var password = document.getElementById("Password").value;
        var error = document.getElementById("error");
        

    
        if (!username || !password) {
            error.innerHTML = "用户名和密码不能为空";
            return false;
        }
    
        // 验证是否同意协议
        var agreeCheckbox = document.getElementById("agreementCheckbox");
        if (!agreeCheckbox.checked) {//没有勾选"我已详细阅读此协议"
        error.innerHTML = '请先同意用户协议';
            return false;
        }
    
        // 通过所有验证,允许提交表单
        return true;
    }
    
    function validateForm() {
        // 验证用户名和密码是否为空
        var username = document.getElementById("Username").value;
        var password = document.getElementById("Password").value;
        
    
        if (!username || !password) {
            alert('用户名和密码不能为空');
            return false;
        }
    
        // 验证是否同意协议
        var agreeCheckbox = document.getElementById("agreementCheckbox");
        if (!agreeCheckbox.checked) {//没有勾选"我已详细阅读此协议"
            alert('请先同意用户协议');
            return false;
        }
    
        // 通过所有验证,允许提交表单
        return true;
    }
    </script>
</body>
</html>

注册css.html代码

查看代码
 <!--该界面由bootstrap3.4的css样式的表单为主体修改而来-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的注册页面</title>

    <!--flask项目中引入的css文件的(flask项目的css文件的路径为在static目录下)-->
    <link rel="stylesheet"
        href="/static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <style>
    .account{
        /*宽度和高度*/
        width: 500px;
        /*边框*/
        border: 1px solid rgb(102, 97, 97);
        /*左右居中*/
        margin-left: auto;
        margin-right: auto;
        /*上边距*/
        margin-top: 100px;
        /*内边距*/
        padding: 20px 40px;
        /*阴影 水平方向 垂直方向 模糊距离*/
        box-shadow: 5px 5px 5px rgba(88, 88, 88, 0.5);
    }
    .account h3{
        /*文本居中*/
        text-align: center;
        /*加粗*/
        font-weight: bold;
    }
    #error{
        color: red;
        margin: 10px

    }
    
    
</style>
</head>
<body>
    <div class="account">
        <!--form表单-->
        <form action="/register" method="post" onsubmit="return validateForm2()">
            <h3>用户注册</h3>
            <!-- 用户名输入框 -->
            <div class="form-group">
                <label>手机号</label>
                <input class="form-control" id="Mobile"
                       placeholder="请输入手机号" name="mobile">
            </div>
            
            <!-- 密码输入框 -->
            <div class="form-group">
                <label>密码</label>
                <input type="password" class="form-control"
                       id="Password" placeholder="请输入密码"
                       name="password">
            </div>
    
            <!-- 协议及同意复选框 -->
            <div class="checkbox">
                <a href="用户协议.html">《某某注册协议》</a>
                <label>
                    <input type="checkbox" name="agree" id="agreementCheckbox">我已详细阅读此协议
                </label>
            </div>
            <div id="error">{{msg}}</div>
            <!-- 提交按钮 -->
            <button type="submit" class="btn btn-primary">注 册</button>
        </form>
        <!--登录页面-->
        <a href="/login">去登录</a>
    </div>
    
    <script>
    function validateForm2() {
        // 验证用户名和密码是否为空
        var mobile = document.getElementById("Mobile").value;
        var password = document.getElementById("Password").value;
        var error = document.getElementById("error");

    
        if (!mobile || !password) {
            error.innerHTML = "用户名和密码不能为空";
            return false;
        }
    
        // 验证是否同意协议
        var agreeCheckbox = document.getElementById("agreementCheckbox");
        if (!agreeCheckbox.checked) {//没有勾选"我已详细阅读此协议"
        error.innerHTML = '请先同意用户协议';
            return false;
        }
    
        // 通过所有验证,允许提交表单
        return true;
    }
    
    </script>
</body>
</html>

 用户协议.html代码

查看代码
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户协议</title>
</head>
<body>
    <!--用户协议内容-->
    <h1>用户协议</h1>
    <p>您的手机号暂时作为用户名(暂时就这些)</p>
</body>
</html>

 sql数据库创建表格

Create table user_table ( user VARCHAR(255) PRIMARY KEY, mobile VARCHAR(15) UNIQUE NOT NULL, email VARCHAR(255), password VARCHAR(18) NOT NULL );

 

posted @ 2024-02-24 20:45  台友涛  阅读(39)  评论(0编辑  收藏  举报