Flask-- (六) Flask前后端校验

前后端校验

在校验的过程当中,我们分为前端校验和后端校验。

1、前端校验

前端校验:使用前端js进行页面数据的校验,校验通过,再提交。优点:编写简单,缺点:安全性能不够。

@bule_print.route("/check/", methods=["GET", "POST"])
def check():
    return render_template("front_end_check.html")
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/dist/css/bootstrap.css">
    <script src="../static/jquery.min.js/"></script>
    <script src="../static/dist/js/bootstrap.js"></script>
</head>
<body>
<!-- onsubmit返回true则继续提交,否则不可以提交,调用js函数,根据js函数来校验是否可以提交 -->
<form class="form form-horizontal container" onsubmit="return check()">
    <br>
    <div class="form-group">
        <lable class="col-md-4 control-label">用户名:</lable>
        <div class="col-md-6">
            <input class="form-control" name="username" id="username_check">
        </div>
    </div>
    <div class="form-group">
        <lable class="col-md-4 control-label">密码:</lable>
        <div class="col-md-6">
            <input class="form-control" name="password">
        </div>
    </div>
    <div class="form-group">
        <input type="submit" class="btn btn-success pull-right">
    </div>
</form>
<script>
    function check() {
        var user = $("#username_check").val();
        var len = user.length;
        if (len<6 || len>16){
            alert("用户名长度不合法,字符在6~16之间");
            return false
        } else {
            return true
        }
    }
</script>
</body>
</html>

2、后端校验

后端校验:就是当数据传递到后端视图进行校验,缺点:编写比较繁复,优点:安全性好。

后端校验可以直接在视图中编写,但太过复杂,所有采用flask-wtf

安装包

pip install flask-wtf

Wtf插件安装会安装两样东西:

​ 一个表单定义类

​ 一个表单字段定义类这两个类结合可以定义出一个对表单进行描述的类,

​ 对表单描述的类可以直接在前端生成表单。

常用的表单字段:

校验规则:

2.1 采用表单定义类生成的表单验证
2.1.1 校验规则的使用

在views同级目录创建form.py文件

# form.py

from flask_wtf import FlaskForm
import wtforms
from wtforms import validators


class RegisterForm(FlaskForm):
    username = wtforms.StringField(
        # 文本
        label="用户名",
        # 验证规则
        validators=[
            validators.Email(message="邮箱")
        ]
    )
    password = wtforms.PasswordField(
        # 文本
        label="密码",
        # 验证规则
        validators=[
            validators.DataRequired(message="密码必填")
        ]
    )
    repassword = wtforms.PasswordField(
        # 文本
        label="重复输入密码",
        # 验证规则
        validators=[
            validators.EqualTo("password", message="密码不一致")
        ]
    )

# view.py

# 后端验证
@user_print.route('/register', methods=["GET", "POST"])
def register():
    my_form = RegisterForm()
    if request.method == "POST":
        if my_form.validate_on_submit():
            print("注册成功!")
        else:
            print(my_form.username.errors)  # ['邮箱']
            print(my_form.errors)  # {'username': ['邮箱'], 'repassword': ['密码不一致']}
    return render_template("register.html", **locals())
<!-- register.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/register" method="post">
    {% for i in my_form %}
        <p>{{ i.label }}:{{ i }}</p>
    {% endfor %}
    <input type="submit">
</form>
</body>
</html>

2.1.2 自定义校验规则
# form.py

from flask_wtf import FlaskForm
import wtforms
from wtforms import validators, ValidationError


def check_username(form, field):
    """
    自定义校验:验证用户名不能包含敏感信息
    :param form: 表单
    :param form:字段
    """
    print("当前字段的值:", field.data)
    data_list = ["admin", "nb"]
    # 判断
    for data in data_list:
        if field.data.find(data) != -1:
            raise ValidationError("用户名不能包含敏感信息")


class RegisterForm(FlaskForm):
    username = wtforms.StringField(
        # 文本
        label="用户名",
        # 验证规则
        validators=[
            validators.Length(min=2, max=16, message="用户名长度在2-16之间"),
            check_username
        ]
    )
    password = wtforms.PasswordField(
        # 文本
        label="密码",
        # 验证规则
        validators=[
            validators.DataRequired(message="密码必填")
        ]
    )
    repassword = wtforms.PasswordField(
        # 文本
        label="重复输入密码",
        # 验证规则
        validators=[
            validators.EqualTo("password", message="密码不一致")
        ]
    )
# view.py

# 后端验证
@user_print.route('/register', methods=["GET", "POST"])
def register():
    my_form = RegisterForm()
    if request.method == "POST":
        if my_form.validate_on_submit():
            print("注册成功!")
        else:
            print(my_form.username.errors)  # ['邮箱']
            print(my_form.errors)  # {'username': ['邮箱'], 'repassword': ['密码不一致']}
    return render_template("register.html", **locals())
<!--register.html-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/register" method="post">
    {% for i in my_form %}
        <p>{{ i.label }}:{{ i }}</p>
    {% endfor %}
    <input type="submit">
</form>
</body>
</html>

2.2 使用前端写好的表单校验

跨站点请求伪造(Cross-site request forgery),CSRF跨站请求伪造:使用当前浏览器还在生效状态的cookie对指定网站进行操作。最初针对的是银行网站的转账。

防御策略:csrf检验
在请求之初,Flask服务会给用户下发一个随机校验值,用户提交数据的时候,携带校验值,这个校验值每次刷新页面都不一样,没有或者错误的校验值,访问被拒绝。csrf检验只针对post请求有效,对get不检测

2.2.1 配置csrf

首先要保证前端的name和定义的校验表单字段一样

2.2.2 设置csrf关联app
# 蓝图csrf配置

# 创建空的对象
db = SQLAlchemy()
csrf = CSRFProtect()

def create_app(obj):
    """
    创建app函数
    :param obj: 配置文件类
    :return: goods
    """
    app = Flask(__name__)  # 创建app
    app.config.from_object(obj)  # app的配置类
    # db与app关联
    db.init_app(app)
    # csrf与app关联
    csrf.init_app(app)
    # 该引用必须放在函数里面,不然会循环引用
    from BluePrint.user import user_print
    # 注册蓝图
    app.register_blueprint(user_print)
    return app

# 创建app
app = create_app(Develop)
2.2.3 前端应用

在模板的form中,使用csrf_token方法获取csrftoken,并提交

2.2.4 指定视图不检测
from BluePrint import csrf

@csrf.exempt
@user_print.route('/aaa', methods=["POST"])
def aaa():
    return "aaa"
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flask是一种Python Web框架,而Element-UI则是一个Vue.js的UI库。它们在Web开发中起到不同的作用。 Flask作为一个轻量级的Web框架,适合用于快速开发小型的网站或应用。它提供了简洁的API和灵活的扩展机制,使开发者能够高效地构建出符合需求的Web应用。Flask采用了MVC(模型-视图-控制器)的设计模式,使代码的组织和维护变得更加容易。Flask还支持RESTful API的开发,使得我们可以基于HTTP协议来设计和实现各种资源的CRUD操作。总的来说,Flask是一个功能强大且易于学习和使用的Web框架,适用于中小规模的Web开发项目。 而Element-UI是一个基于Vue.js的组件库,它提供了丰富的UI组件,以及一些常用的工具函数,帮助开发者构建出美观且易用的前端界面。Element-UI中包含了各种常见的UI组件,例如按钮、表格、表单、弹窗等等,这些组件都经过了精心设计和开发,具有统一的样式和交互效果。Element-UI还提供了一些高级的功能,例如表单校验、数据加载、数据筛选等等,极大地提升了开发效率和用户体验。通过使用Element-UI,我们可以快速构建出具有一致性和美观性的用户界面,同时也提升了前端开发的效率。 综上所述,Flask和Element-UI在Web开发中扮演着不同的角色。Flask作为后端框架负责处理数据的逻辑和业务逻辑,而Element-UI作为前端组件库则主要负责构建用户界面和提供友好的用户交互。通过Flask和Element-UI的结合,我们可以实现一个完整的Web应用,既具备了良好的设计和易用性,又具备了高效的开发和可拓展性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值