Flask框架（四）--分頁，form表單類，csrf

一、分頁

django中使用封裝好的分頁器paginator進行分頁，它爲我們提供了很多封裝好的方法。

flask中需要自己封裝。

封裝

pager.py

import math
class Pager():
    # data:列表
    def __init__(self,data,page_size):
        '''
        :param data: 數據
        :param page_size: 每頁的條數
        '''
        self.data = data
        self.page_size = page_size
        self.is_start = False
        self.is_end = False
        self.data_count = len(data)
        self.previous_page = 0
        self.next_page = 0
        self.page_number = math.ceil( self.data_count / self.page_size)
        self.page_range = list((x for x in range(1,self.page_number + 1)))

    def page_data(self,page):
        result = self.data[(page-1)*self.page_size:page*self.page_size]
        if page == 1:
            self.is_start = True
        if page == self.page_number:
            self.is_end = True
        self.next_page = page + 1
        self.previous_page = page - 1
        return result

from models import User,LeaveList
# 批量增加數據
# def add_data():
#     for x in range(1,100):
#         leave = LeaveList()
#         leave.request_id = 2
#         leave.request_name = '老王'
#         leave.request_type = '事假'
#         leave.request_start = '2019-10-09'
#         leave.request_end = '2019-10-10'
#         leave.request_description = '假期happy'
#         leave.request_phone = '12345678910'
#         leave.request_status = 0
#         leave.save()

if __name__ == '__main__':
    # add_data()

    # while True:
    #     page = input('請輸入頁數>>>>>')
    #     params = LeaveList.query.all()
    #     pager = Pager(params,10)
    #     print(pager.page_data(int(page)))
    #     print('頁面數據條數:',pager.page_size)
    #     print('下一頁頁碼:',pager.next_page)
    #     print('上一頁頁碼:',pager.previous_page)
    #     print('最大頁數:',pager.page_number)
    #     print('頁碼範圍:',pager.page_range)
    #     print('數據總條數:',pager.data_count)
    #     print('是否最後一頁:',pager.is_end)
    #     print('是否第一頁:',pager.is_start)
    pass

視圖

@app.route('/leave_all_list/<int:page>/',methods=['get','post'])
@loginVaild
def leave_all_list(page):
    user = User.query.get(request.cookies.get('user_id'))
    leave = LeaveList.query.all()
    pager = Pager(leave,10)
    page_data = pager.page_data(page)
    print(pager.page_range)
    if pager.page_number > 5:
        start = page - 3
        end = page + 2
        if start < 0:
            start = 0
            end = 5
        if end > pager.page_number:
            start = pager.page_number-5
            end = pager.page_number
    else:
        start = 0
        end = pager.page_number
    page_range = pager.page_range[start:end]
    return render_template('leave_all_list.html',**locals())

模板

請假單撤銷按鈕

ajax

視圖

from flask import jsonify
@app.route('/cancel/',methods=['get','post'])
@loginVaild
def cancel():
    id = request.form.get('id')
    leave = LeaveList.query.get(int(id))
    leave.delete()
    result = {'code':10000,'msg':'刪除成功'}
    return jsonify(result)

模板

<script>
    $('#cancel').click(
        function(){
            var id = $(this).attr('cx_id');
            $.ajax(
                {
                    url:'/cancel/',
                    type:'post',
                    data:{'id':id},
                    success:function (data) {
                        console.log(data);
                        alert(data['msg']);
                        window.location.reload();
                    },
                    error:function (error) {
                        console.log(error);
                    }
                }
            )
        }
    )
  </script>

二、form表單

安裝表單插件

pip install flask-wtf

django中的csrf在中間件中已經寫好了，flask中csrf嵌在表單後端校驗（form表單類）flask-wtf中。

教學任務發佈

• 任務名稱
• 任務描述
• 任務時間
• 任務發佈人

form表單類

• 前端校驗
  • 對頁面上的數據進行校驗，校驗長度，類型，是否爲空等
• 後端校驗
  • 校驗用戶是否存在，校驗數據（敏感字）

flask的form表單默認攜帶了csrf_token，但是進行post請求的時候，不進行csrf_token的校驗。

form.py

修改form.py

import wtforms
from flask_wtf import FlaskForm
from wtforms import validators

class TaskForm(FlaskForm):
    name = wtforms.StringField(render_kw={
                                   "class":"form-control",
                                   "placeholder":"任務名"
                               })
    description = wtforms.TextField(render_kw={
                                   "class":"form-control",
                                   "placeholder":"任務描述"
                               })
    time = wtforms.DateField(render_kw={
                                   "class":"form-control",
                                   "placeholder":"任務時間"
                               })
    public = wtforms.StringField(render_kw={
                                   "class":"form-control",
                                   "placeholder":"任務發佈人"
                               })

視圖

from form import TaskForm
@app.route("/add_task/",methods=['get','post'])
def add_task():
    task = TaskForm()
    return render_template("add_task.html",**locals())

模板

結果

form表單前端校驗

前端校驗的規則

DataRequired	不能爲空
Email	是否是郵箱格式
Equelto	校驗兩個值是否相同，常用於驗證兩次輸入密碼是否相同
length	長度 max min
NumberRange	數字範圍
AnyOf	指定範圍
NoneOf	不在範圍

需要在視圖中看檢驗結果

視圖

from form import TaskForm
@app.route("/add_task/",methods=['get','post'])
def add_task():
    task = TaskForm()
    error = {}
    if request.method == 'POST':
        if task.validate_on_submit():
            # 獲取數據
            formdata = task.data
            # 建立模型，保存到數據庫
        else:
            error = task.errors
    return render_template("add_task.html",**locals())

結果

自定義校驗規則

安裝

模板

{% extends 'base.html' %}
{% block title %}
    教學任務發佈
{% endblock %}
{% block label %}
    教學任務發佈
{% endblock %}
{% block content %}
    <form action="" method="post">
        {% for t in task %}
        <p>
            {{ t }}
        </p>
        {% endfor %}
        <input type="submit" class="btn btn-google btn-block" value="提交">
    </form>
    {%  for one in error.keys() %}
        {% for value in error[one] %}
            <p style="color: red;">{{ one }}：{{ value }}</p>
        {% endfor %}
    {% endfor %}
{% endblock %}

結果

三、csrf

csrf_token會隨form表單類生成，但不會校驗。

開啓csrf校驗

這樣post請求就失敗了

前端使用

表單類應用模板內無需添加，它自帶csrf_token

避免校驗