浅谈python用Falsk写登录页面

浅谈python用Falsk写登录页面

逻辑

既然是做前后端这个登录，那么就是要梳理下逻辑问题，磨刀不误砍柴功

---

基本逻辑如下：

1. 用户在form表单中输入需要的信息
2. 用js监听onclick事件并获取用户输入的信息
3. 用ajax将js获取到的数据发送给python后台
4. python后台将得到的数据读取并根据用户名前往数据库中查询该用户名的密码
5. 将数据库查询并返回的结果与得到的用户名和密码进行匹配
6. 如果相同，则放行登录到其他页面并存储session
7. 如果不相同，则返回错误代码并展示在前端页面

---

代码实现

html和js代码

1. 引入必要css文件

<script src="../static/js/jquery-1.11.1.min.js"></script><!--根据自己实际使用的JQuery-->
<link href="../static/bootstrap-4.6.1-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../static/css/login.css" rel="stylesheet"><!--自己另外写的css文件-->
<script src="../static/js/login.js"></script><!--自己写的登录和跳转注册的js文件-->

2. form表单

<form class="form-horizontal">
	<div class="input-group mb-3">
		<label class="mr-3">账号</label>
		<input id="username" class="input-group-sm rounded colors" type="text">
	</div>

	<div class="input-group mb-3">
		<label class="mr-3">密码</label>
		<input id="password" class="input-mini rounded colors" type="password">
	</div>

	<div class="row justify-content-center mt-md-4">
		<button class="btn my-btn btn-outline-info mr-3" type="button" onclick="login()">登录</button>
		<button class="btn my-btn btn-outline-info mr-3 ml-3" type="button" onclick="register()">注册</button>
		<button class="btn  btn-outline-info ml-3" type="reset">重置</button>
	</div>
</form>

3. login.js

• 登录事件

function login() {
    var username = $("#username").val();
    var password = $("#password").val();
    if (username == 0 || password == 0) {/*对用户输入的信息做是否为空值判断*/
        alert("账号或密码不能为空")
    } else {
        data = data = JSON.stringify({
            "username": username,
            "password": password
        });
        $.ajax({
            cache: false,
            url: "/",/*后台路由接收地址*/
            type: "POST",/*请求类型，post或者get*/
            data: data,
            async: false,
            dataType: "json",
            success: function (res) {
                if (res == '') {/*根据后台返回的状态码做不同的处理*/
                    window.location.href = '';/*需要前往的页面，填写后台路由的地址*/
                    window.event.returnValue = false;
                } else if (res == '') {
                    alert("账号或密码错误");
                    window.event.returnValue = false;
                } else if (res == '') {
                    alert("没有该用户，是否注册");
                    window.event.returnValue = false;
                }

            },
            error: function (e) {
                alert("请求错误");
            }
        });
    }
}

• 跳转注册页面事件

function register() {
    window.location.href = '';/*后台跳转路由的地址*/
    window.event.returnValue = false;
}

---

python代码

• 声明session

app.config['SECRET_KEY'] = "" #设置session的key,可以是比较复杂的字符串


@app.before_request
def before_request():
    g.user = None #设置全局变量，默认为None
    if 'user_id' in session:
        user = utils.sse(session['user_id'])[0] #根据id查询并返回用户名
        g.user = user

• 登录方法

#需要引入的包
from flask import jsonify
from flask import Flask, request, session, g

@app.route('', methods=["POST"]) #与login.js中ajax的地址必须一致
def login():
    if request.method == "POST":
        data = json.loads(request.get_data(as_text=True))
        # 获取前端传递过来的账号和密码
        username = data['username']
        password = data['password']
        # 可以对密码进行加密处理，是具体情况而定
        coid = utils.login(username)
        if coid != 0:
            if username == coid[] and password == coid[]:  # 根据实际返回的数据进行判断
                session['user_id'] = coid[] # 将返回的id存储到session中
                return jsonify('')# 返回自定义的状态码
            else:
                return jsonify('')
        else:
            return jsonify('')
    return jsonify('')

• 工具方法

# 需要引入的包
import pymysql

def get_conn():
    # 创建连接
    conn = pymysql.connect(host="", # 数据库所在的ip地址
                           port=, # 数据库端口
                           user="", # 数据库用户名
                           password="", # 数据库密码
                           db="", # 数据库中的库
                           charset="utf8")
    # 创建游标
    cursor = conn.cursor()  # 执行完毕返回的结果集默认以元组显示
    return conn, cursor

# 封装通用查询
def query(sql, *args):
    conn, cursor = get_conn()
    cursor.execute(sql, args)
    res = cursor.fetchall()
    close_conn(conn, cursor)
    return res

# 关闭连接
def close_conn(conn, cursor):
    cursor.close()
    conn.close()

# 登录的查询语句
def login(data):
    sql = "select (需要查询的字段) from (表名) where username=(%s)"
    res = query(sql, data) # 根据传入的用户名进行查询
    if len(res) != 0: # 如果返回不为空，则说明有该用户
        res = res[0] # 取出对应的值(使具体情况而定)
        return res
    else:
        res = 0 # sql查询返回为空
        return res

总结

以上就是我对整个登录的逻辑和代码的实现
刚接触python，如有不对之处，还请指出，万分感谢