Python web+Bootstrap+Jquery+flask前后端框架完整登录项目

从零开始写代码

于 2024-03-26 21:38:35 发布

阅读量635

点赞数 9

文章标签：前端 bootstrap jquery javascript

本文链接：https://blog.csdn.net/2201_75467981/article/details/136993629

版权

项目介绍

这是一个融合了Bootstrap+Jquery+flask三种前端框架的项目，实现了从注册到登录的全过程。

项目运行截图

注册界面（register.html）

登录界面(login.html)

开始界面(start.html)

项目文件概览

该项目一共有7个文件，除去主文件外，分为页面文件和配置文件

项目文件详解

页面文件

start.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        .center{
            text-align: center;
        }
    </style>
</head>
<body>
  <nav class="navbar navbar-default">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">XX导航</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">搜 索</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="http://127.0.0.1:5000/login">退出</a></li>
                    <li><a href="http://127.0.0.1:5000/register">个人中心</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
            <div><h1 class="center">&lt;Hello world!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wellcome to my world!&gt;</h1></div>
            <h2 style="color:rgb(0, 166, 255);" class="center">这是一个学习网站</h2>
        </div><!-- /.container-fluid -->
    </nav>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

</body>
</html>

项目的主页面

login.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        .account {
            width: 500px;
            height: 350px;
            border: 1px solid #dddddd;
            border-radius: 7px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 200px;
            padding: 10px 50px;
            box-shadow: 5px 5px 5px #aaaaaa;
            /*display: flex;*/
        }

        .account h2 {
            text-align: center;
        }

        /*.f1{*/
        /*    margin-left: auto;*/
        /*    margin-right: auto;*/
        /*    !*margin-top: auto;*!*/
        /*}*/
        .f1 {
            width: 100px;
            text-align: center;
        }
    </style>
</head>

<body>
<div class="account">
    <h2 class="strong">用户登录</h2>
    <form method="post">
        <div class="form-group">
            <label for="exampleInputEmail1">用户名</label>
            <input type="text" name="username" class="form-control" id="exampleInputEmail1" placeholder="请输入用户名">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">密码</label>
            <input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
        </div>
        <!--jinja2的函数-->
        {% if message %} {{message}} {% endif %}
        <br/>
        <input type="submit" value="登 录" class="f1"/>
        <input type="reset" value="重 置" class="f1"/>
        <!--跳转到register的页面-->
        <a href="{{ url_for('register') }}">没账号？去注册</a>
    </form>
    <div class="modal fade" id="loginSuccessModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">登录成功</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>恭喜你，登录成功！</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>

</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
<script>
  document.querySelector('form').addEventListener('submit', function (event) {
    event.preventDefault(); // 阻止表单默认提交行为

    // 这里可以添加服务器端验证和登录逻辑
    // 假设登录成功

    if (loginSuccess) {
      $('#loginSuccessModal').modal('show');
      alert('登录成功!')
        event.
    } else {
      // 显示错误消息
      alert('登录失败，请重试！');
    }
  });
</script>

</body>

</html>

登录页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网站登录</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        .account {
            width: 500px;
            height: 350px;
            border: 1px solid #dddddd;
            border-radius: 7px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 200px;
            padding: 10px 50px;
            box-shadow: 5px 5px 5px #aaaaaa;
        }

        .account h2 {
            text-align: center;
        }

        /*.f1 {*/
        /*    margin-left: auto;*/
        /*    margin-right: auto;*/
        /*    !*margin-top: auto;*!*/
        /*}*/

        .f1 {
            width: 100px;
            text-align: center;
        }
    </style>
</head>

<body>
<div class="account">
    <h2 class="strong">用户注册</h2>
    <form method="post">
        <div class="form-group">
            <label for="exampleInputEmail1">用户名</label>
            <input type="text" name="username" class="form-control" id="exampleInputEmail1" placeholder="请输入用户名">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">密码</label>
            <input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="密码">
        </div>
        <!--jinja2的函数-->
        {% if message %} {{message}} {% endif %}
        <br/>
        <input type="submit" value="注 册" class="f1"/>
        <input type="reset" value="重 置" class="f1"/>
        <a href="{{ url_for('user_login') }}">登录</a>
    </form>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>

</body>

</html>

注册页面

配置文件

login.py（主程序代码）

from flask import Flask,render_template
from flask import redirect
from flask import url_for
from flask import request
from model.check_login import is_existed,exist_user,is_null
from model.check_regist import add_user
app=Flask(__name__)

@app.route('/')
def index():
    return redirect(url_for('user_login'))

@app.route('/user_login', methods=['GET','POST'])
def user_login():
    if request.method=='POST':
        username = request.form['username']
        password = request.form['password']
        if is_null(username,password):
            login_massage = "温馨提示：账号和密码是必填"
            return render_template('login.html', message=login_massage)
        elif is_existed(username, password):
            login_massage = "恭喜！登录成功！"
            return render_template('start.html', username=username,message=login_massage,loginSuccess = True)
        elif exist_user(username):
            login_massage = "温馨提示：密码错误，请输入正确密码"
            return render_template('login.html', message=login_massage)
        else:
            login_massage = "温馨提示：不存在该用户，请先注册"
            return render_template('register.html', message=login_massage)
    return render_template('login.html')

@app.route('/register', methods=['GET','POST'])
def register():
    if request.method=='POST':
        username = request.form['username']
        password = request.form['password']
        if is_null(username, password):
            login_massage = "温馨提示：账号和密码是必填"
            return render_template('register.html', message=login_massage)
        elif exist_user(username):
            login_massage = "温馨提示：用户已存在，请直接登录"
            # return redirect(url_for('user_login'))
            return render_template('login.html', message=login_massage)
        else:
            add_user(request.form['username'], request.form['password'])
            return render_template('login.html', username=username)
    return render_template('register.html')
if __name__=='__main__':
    app.run()

此代码为该项目的核心代码为登录注册的功能实现的代码

check_login.py（配置文件——校验登录程序）

from mainproject.templates.config import *
cur = conn.cursor()
def is_null(username,password):
	if(username==''or password==''):
		return True
	else:
		return False

#判断账户密码是否匹配
def is_existed(username,password):
	sql="SELECT * FROM info WHERE username ='%s' and password ='%s'" %(username,password)
	conn.ping(reconnect=True)
	cur.execute(sql)
	conn.commit()
	result = cur.fetchall()
	if (len(result) == 0):
		return False
	else:
		return True

def exist_user(username):
	sql = "SELECT * FROM info WHERE username ='%s'" % (username)
	conn.ping(reconnect=True)
	cur.execute(sql)
	conn.commit()
	result = cur.fetchall()
	if (len(result) == 0):
		return False
	else:
		return True

判断用户提交状态，是否为空，是否用户已存在，账户密码是否匹配

check_register.py（配置文件——用户注册程序）

from mainproject.templates.config import *

cur = conn.cursor()

def add_user(username, password):
    # sql commands
    sql = "INSERT INTO info(username, password) VALUES ('%s','%s')" %(username, password)
    # execute(sql)
    cur.execute(sql)
    # commit
    conn.commit()  # 对数据库内容有改变，需要commit()
    conn.close()

此程序的功能就是给数据库添加用户

config.py（配置文件——数据库连接配置）

#数据库连接配置
import pymysql

conn = pymysql.connect(
        host='localhost',user='root',password='123',charset='utf8',db='unicom'
    )

后续优化中的问题

主函数登录成功之后，置loginSuccess = True

loginSuccess = True之后执行JS代码，显示此弹窗

弹窗的html代码

原本是想实现登录的之后会有弹窗提醒“登录成功”和“登录失败”但是自己写的JS并没有生效，大家如果有优化成功的，也可以分享在评论区，谢谢！

项目源文件

https://gitcode.net/2201_75467981/login_project/-/tree/master/main_project