2020-06-20--flask项目05--登录

登录

关于登录功能的实现，大概实现过程和前边的相似，还是前端使用ajax进行交互，后端接收数据进行验证，返回一定的结果。

前端代码：

main.js

// TODO 登录表单提交
    $(".login_form_con").submit(function (e) {
        //阻止默认提交事件
        e.preventDefault()

        var mobile = $(".login_form #mobile").val()
        var password = $(".login_form #password").val()

        if (!mobile) {
            $("#login-mobile-err").show();
            return;
        }

        if (!password) {
            $("#login-password-err").show();
            return;
        }

        // 发起登录请求
        var params = {
            'mobile':mobile,
            'password':password
        }

        $.ajax({
            url:'/passport/login',
            type:'post',
            data:JSON.stringify(params),
            contentType: 'application/json',
            headers: {'X-CSRFToken': getCookie('csrf_token')},
            success:function (resp) {
                if (resp.errno == '0'){
                     alert(resp.errmsg);
                    window.location.reload()
                }else{
                    alert(resp.errmsg);
                }
            }
        })
    })

后端代码

from datetime import datetime
from flask import session

'''登录功能的实现'''
# 1.获取参数
# 2.校验
# 3.通过手机号获取对象
# 4. 判断用户是否存在
# 5.判断密码
# 6. 保存用户信息到session中
# 7. 返回响应
@passport_blue.route('/login',methods=['POST'])
def login():
    '''
    1.获取参数
    2. 校验参数
    3. 通过手机号获取对象
    4. 判断用户是否存在
    5. 判断密码是否正确
    6. 保存用户到session中
    7. 返回响应
    :return:
    '''
    #1.获取参数
    mobile = request.json.get('mobile')
    password = request.json.get('password')

    #2. 校验参数
    if not all([mobile,password]):
        return jsonify(errno=RET.NODATA,errmsg='参数不足')

    if not re.match('1[3579]\d{9}',mobile):    #如果手机号码不合法
        return jsonify(errno=RET.PARAMERR,errmsg='手机格式不正确')

    # 3.通过手机号取出对象
    try:
        user = User.query.filter_by(mobile=mobile).first()
    except Exception as e:
        current_app.logger.error(e)
        return jsonify(errno=RET.DBERR, errmsg='查询用户失败')

    # 4.判断用户是否存在
    if not user:
        return jsonify(errno=RET.NODATA, errmsg='该用户未注册')

    # 5.判断密码是否正确
    if not user.check_passowrd(password):
        return jsonify(errno=RET.DATAERR, errmsg='密码错误')

    # 6.保存用户到session中
    session['user_id'] = user.id
    session['mobile'] = mobile
    session['nick_name'] = user.nick_name

    user.last_login = datetime.now()

    #7.返回响应
    current_app.logger.debug('登陆成功')       #生成日志

    return jsonify(errno=RET.OK, errmsg='登录成功')

分析：

1.用户点击

用户点击from表单的登录按钮，也就是选中form表单的数据。

2.js代码

点击按钮后，在js代码中选中该表单，在其的submit方法中：

1. 阻止表单提交的默认事件
2. 获取表单中的mobile和password
3. 验证表单数据的格式(非空)

3.ajax请求

1. 首先拼接json参数选中获取到的两个参数组合为json数据。
2. 发起ajax请求：除url外其余基本不变

• url:'/passport/login'.
• type:'post',
• data:JSON.stringify(params),
• contentType: 'application/json',
• headers: {'X-CSRFToken': getCookie('csrf_token')},
  发起ajax请求

4.服务器处理

在后端操作：

• 获取参数--mobile和password
• 校验参数的非空以及手机格式的正确性
• 通过手机号码在redis中获取该用户的信息
• 判断取出的该用户是否存在(取出的如果为空，表示该用户不存在，否则该用户已注册。)
• 判断密码是否正确(通过从数据库中取出的对象的密码和用户输入的密码进行比较)
• 保存用户到session中(如果这个用户通过了上面的验证，说明该用户正常，那么为保持状态，将该用户的信息保存到session中)
• 修改i用户的最后一次登录的事件为现在。
• 生成日志，返回成功的状态errno和信息errmsg

5.前端收到响应

在ajax的success中，执行响应成功的回调函数：
如果返回来的对象的errno为'0',就弹出注册成功的信息，并刷新页面。
否则弹出错误信息。

6.运行

输入正确的mobile和password后，点击登录：

显示登录成功：

点击确定后，自动刷新页面:

redis数据库：
session保存到了redis数据库中(在Config类中设置的)

浏览器中：

提交GitHub