Flask表单-cookie登录

谁践踏了优雅 2022-02-17 15:18 291阅读 0赞

# 一、基于Flask的请求方式简介 #

Flask前端表单

前端flask请求和其他的web请求没有区别

后端flask必须在aap.route里面通过method=\[\]来声明post方法，才可以接受post数据

Flask当中，request是一个独立的模块，我们需要导入

From flask import request

Flask 试图函数当做，和django一样可以通过，request.method来判断我们请求的方式，但是flask 用request.vlaues.get方法来获取post,get提交过来的值

语法如下面的代码：

@app.route("/student/add/",methods=["GET","POST"])
    def add_student():
        result = ""
        csrf = random.randint(1000000000000,9999999999999999)
        if request.method == "POST":
            value = request.values.get("student_name")
            s = Student(name=value)
            session.add(s)
            session.commit()
            result = "提交成功"
        else:
            result = "学员姓名不可以为空"
        return render_template("add_student.html",result = result,csrf = csrf)

再开始做此项目之前需要先安装flask-wtf插件

![7466][]![7466][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIzOTU0MQ_size_16_color_FFFFFF_t_70][]

需要注意：Flask的form插件在前端使用的意义不大，我们通常使用插件进行后端校验。

# ![7466][]二、后端校验步骤 #

## 1、前端自定义表单，但是表单的id和name需要对应后端forms表达的字段名称 ##

如图所示：

![7465][]

## 2、然后我们说明一下后端orm表达调用的步骤 ##

1、在项目当中创建forms文件

2、在forms文件当中编写表单类

1、表单类的父类Form

2、表单类的字段类型 wtforms

3、表单类的校验 validators

![7467][]

## 表单校验语法需要注意： ##

校验的方式：在字段参数当中使用validators=\[\]，在列表当做编写校验规则

如图所示：

![7471][]![7471][]![7471][]![7471][]![20190419211543741.png][]

## 语法规则： ##

### 1、使用validators自带规则 ###

Required 字段不可以为空 message 提示消息

Lenth 字段的长度

Max 最大长度

Min 最下长度

Message 提示消息

Min不可以大于max

Regexp 使用正则进行校验

Regex 正则

Message 提示消息

### 2、自定义校验规则 ###

1、定义类来描述规则

2、在构造函数当中编写message消息

3、定义\_\_call\_\_来接受字段数据，进行校验

4、如果不符合校验用validators.ValidationError来报错

自定义校验：

![7468][]

![7464][]![7464][]表单校验：

![20190419211751703.png][]

## 在视图当中当做使用form类进行后端校验的步骤 ##

1、导入表单

2、通过request.form将请求数据传递给form类

3、使用validator方法来发起校验

4、使用formData.errors来接受错误

![7469][]

# 三、使用flask制作一个简单的注册项目： #

首先需要创建如下图所示目录以及文件：

导入对应的模板文件以及静态文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIzOTU0MQ_size_16_color_FFFFFF_t_70 1][]

然后分别在目录下面几个模块中分别编写程序：

首先是\_\_init\_\_.py文件，此文件相当于初始化，需要在里面编写 创建app 和 实例化数据库

代码如下：

from flask import Flask
    from flask_sqlalchemy import SQLAlchemy
    from flask_wtf.csrf import CSRFProtect as CsrfProtect
    app = Flask(__name__)
    
    import os
    BaseDir = os.path.join(
        os.path.dirname(
        os.path.abspath(__file__)
    ),
        'school.db'
    ).split('\\',1)[1]
    print(BaseDir)
    db_path = 'sqlite:'+ BaseDir.replace('\\','/')
    app.config['SQLALCHEMY_DATABASE_URI'] = db_path
    app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = True
    app.config['SECRET_KEY'] = '123123123'
    CsrfProtect(app)
    db = SQLAlchemy(app)

models.py文件中通过Python语句，创建类及对应的属性字段，通过orm的sqlalchem模块实现创建数据库中对应的表以及对应的字段的关系映射，代码如下

from School import db
    
    class User(db.Model):
        id = db.Column(db.Integer,primary_key= True)
        username = db.Column(db.String(32))
        email = db.Column(db.String(32))
        password = db.Column(db.String(32))
    
        def __repr__(self):
            return self.username

views.py文件响应浏览器请求，将前端内容显示在浏览器，以及获取浏览器的form表单注册的数据，放入数据库

代码如下

from flask import render_template
    from flask import request
    from School.forms import UserForm
    from School.models import User,db
    from School import app
    
    import hashlib
    session = db.session
    
    
    
    def setPassword(password):
        md5 = hashlib.md5()
        md5.update(password.encode())
        result = str(md5.hexdigest())
        return result
    
    
    @app.route('/')
    def index():
        return 'hello world'
    
    @app.route('/register',methods=['POST','GET'])
    def register():
        error = ''
        if request.method == "POST":
            data = UserForm(request.form)
            if data.validate():
                clean_data = data.data
                user = User(
                    username = clean_data['username'],
                    password = setPassword(clean_data['password']),
                    email = clean_data['email']
                )
                session.add(user)
                session.commit()
                error = 'success'
            else:
                error = data.errors
    
    
        return render_template('register.html',error = error)

forms.py文件，通过对应前端form表单的id和name字段，对该字段内容进行正则匹配校验，或者自定义校验

代码如下

from flask_wtf import FlaskForm as Form
    import wtforms
    from wtforms import validators
    from School.models import User
    
    class EmailVailder:
        def __init__(self,message):
            self.message = message
        def __call__(self, form,field):
            data = field.data
            user = User.query.filter_by(email = data).all()
            if not user:
                return None
            raise validators.ValidationError(self.message)
    
    
    class UserForm(Form):
        username = wtforms.StringField('用户姓名',validators=[
            validators.length(min = 6,max = 8,message='用户名必须大于6位小于8位'),
            validators.Regexp(regex=r'[0-9a-zA-Z]{6,8}',message='用户名必须是6-8位的数字字母下划线')
        ])
        email = wtforms.StringField('用户邮箱',validators=[
            validators.Regexp(regex=r'\w+@\w+\.\w+',message='格式错误'),
            EmailVailder(message='邮箱重复')
    
        ])
        password = wtforms.StringField('用户密码',validators=[
            validators.length(min = 6,max = 8,message='用户密码必须大于6位小于8位')
        ])

最后是manage.py文件，负责开启项目以及同步数据库

代码如下：

from School.views import app
    from School.models import db
    db.create_all()
    app.run()

对应的register.html文件是：

<form class="user" method="post">
                    <div class="form-group row">
                      <div class="col-sm-12 ">
                        <input type="text" class="form-control form-control-user" id="username" name="username" placeholder="学生姓名">
                      </div>
                       </div>
                     <div class="form-group row">
                      <div class="col-sm-12 ">
                        <input type="email" class="form-control form-control-user" id="email" name="email" placeholder="邮箱">
                      </div>
                     </div>
                     <div class="form-group row">
                      <div class="col-sm-12 ">
                        <input type="password" class="form-control form-control-user" id="password" name="password" placeholder="密码">
                      </div>
                     </div>
                    <input type="hidden" name="csrf_token" value="{
       { csrf_token() }}">
                    <input type="submit" class="btn btn-primary btn-user btn-block" value="注册用户">
    
    
                  </form>
                  
                  <p style="color: red;text-align: center" >{
       { error }}</p>

运行项目：

![20190419221248407.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIzOTU0MQ_size_16_color_FFFFFF_t_70 2][]

由于填写的内容不规范，于是下方会出现对应的表单检验的不规范提示

自定义的邮箱重复校验

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIzOTU0MQ_size_16_color_FFFFFF_t_70 3][]

[7466]: /images/20220217/d7aa5bc86dcc4ab08cfb18baecf14343.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIzOTU0MQ_size_16_color_FFFFFF_t_70]: /images/20220217/e828eef89dc440048928b52565232558.png
[7465]: /images/20220217/a7fd7043bb2b45c7846a855807e5b334.png
[7467]: /images/20220217/0c7a0ecc98d241e7ad06c06da92950c7.png
[7471]: https://note.youdao.com/yws/public/resource/e250d546dc8a36c5760161320d2c3675/xmlnote/C53DCEC6BAF548408EFF791117FA08B3/1C4B42D6E9E34CD3872C080AEEEC88F4/7471
[20190419211543741.png]: /images/20220217/c9b404fd129a42edacc1f12d0e761c35.png
[7468]: /images/20220217/b24f621b2d9645eda6635e90fbf29d74.png
[7464]: /images/20220217/849a782e831548d29f692df2ff4a06c3.png
[20190419211751703.png]: /images/20220217/113c6ea1419f4194b13b10f14c1a7267.png
[7469]: /images/20220217/114b5cd1b1d047b7b58f144e5def102e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIzOTU0MQ_size_16_color_FFFFFF_t_70 1]: /images/20220217/2f653d39601c4e38b448184212dc8336.png
[20190419221248407.png]: /images/20220217/683ff645c65f408ba831fe542d380ef3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIzOTU0MQ_size_16_color_FFFFFF_t_70 2]: /images/20220217/876cf6a5dff44ecd9902b58a17ae74e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIzOTU0MQ_size_16_color_FFFFFF_t_70 3]: /images/20220217/fe7b8128faaa4aa4a4a144ebe47b7112.png