（數據科學學習手札104）Python+Dash快速web應用開發——回調交互篇（上）

本文示例代碼已上傳至個人Github倉庫https://github.com/CNFeffery/DataScienceStudyNotes

1 簡介

　　 這是個人系列教程Python+Dash快速web應用開發的第三期，在前兩期的教程中，咱們圍繞什麼是Dash，以及如何配合方便好用的第三方拓展dash-bootstrap-components來爲咱們的Dash應用設計佈局展開了很是詳細的介紹。

　　而Dash最吸引個人地方在於其高度封裝了react.js，使得咱們無需編寫js語句，純Python編程就能夠實現瀏覽器前端與後端計算之間常規的異步通訊，從而創造出功能強大的交互式web應用。

圖1

　　從今天的文章開始，我就將開始帶你們走進Dash的核心內容——回調。

2 Dash中的基礎回調

2.1 最基礎的回調

　　Dash中的回調（callback）是以裝飾器的形式，配合自編回調函數，實現先後端異步通訊交互，這句話可能不太好理解，咱們從一個簡單的例子出發來認識Dash中的回調：

app1.py

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output

app = dash.Dash(
    __name__,
    external_stylesheets=['css/bootstrap.min.css']
)

app.layout = html.Div(
    [
        html.Br(),
        html.Br(),
        html.Br(),
        dbc.Container(
            [
                dbc.Row(
                    [
                        dbc.Col(dbc.Input(id='input-value',
                                          placeholder='請輸入些東西'),
                                width=12),
                        dbc.Col(dbc.Label(id='output-value'),
                                width=12)
                    ]
                )
            ]
        )
    ]
)


# 對應app實例的回調函數裝飾器
@app.callback(
    Output('output-value', 'children'),
    Input('input-value', 'value')
)
def input_to_output(input_value):
    '''
    簡單的回調函數
    '''
    return input_value


if __name__ == '__main__':
    app.run_server()

　　先來看看app1的交互效果：

圖2

　　下面咱們來分解上面的代碼，梳理一下要構造一個具備實際交互功能的Dash應用須要作什麼：

• 肯定輸入與輸出部件

　　一個可交互的系統必定是有輸入與輸出的，咱們開頭導入的Input與Output對象，他們分別扮演着輸入者與輸出者兩種角色，其各自的第一個參數component_id用於聯動前端部分定義的部件。

　　咱們在前面定義前端部件時，爲dbc.Input對應的輸入框設置了id='input-value'，爲dbc.Label對應的文字輸出設置了id='output-value'，讓它們做爲第一個參數能夠被Input()與Output()惟一識別出來。

• 肯定輸入與輸出內容

　　在肯定了輸入者與輸出者以後，更重要的是爲告訴Dash須要監聽什麼輸入，響應什麼輸出，這就要用到第二個參數component_property。

　　它與對應的前端部件有關，譬如咱們的dbc.Input()輸入框，其被輸入的內容都存在value屬性中，而children屬性是dbc.Label以及絕大多數html部件的第一個參數，這樣咱們就肯定了輸入輸出內容。

• 裝飾回調函數

　　app.callback()裝飾器按照規定的先Output()後Input()的順序傳入相應對象，而既然是裝飾器，天然須要配合自定義回調函數使用。

　　咱們的input_to_output()就是對應的回調函數，其參數與裝飾器中的Input()對應，而函數內部則用來定義計算處理過程。

　　最後return的對象則對應Output()。

# 對應app實例的回調函數裝飾器
@app.callback(
    Output('output-value', 'children'),
    Input('input-value', 'value')
)
def input_to_output(input_value):
    '''
    簡單的回調函數
    '''
    return input_value

　　經過上面這樣的結構，咱們得以純Python「寥寥數語」實現了交互功能，賦予咱們編寫任意功能Dash應用的能力。

2.2 同時設置多個Input()與Output()

　　在上一小節中咱們介紹的是最基本的單輸入 -> 單輸出回調模式，不少時候咱們須要更復雜的回調模式，譬以下面的例子：

app2.py

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output

app = dash.Dash(
    __name__,
    external_stylesheets=['css/bootstrap.min.css']
)

app.layout = html.Div(
    [
        html.Br(),
        html.Br(),
        html.Br(),
        dbc.Container(
            [
                dbc.Row(
                    [
                        dbc.Col(dbc.Input(id='input-value1'), width=3),
                        dbc.Col(html.P('+'), width=1),
                        dbc.Col(dbc.Input(id='input-value2'), width=3),
                    ],
                    justify='start'
                ),
                html.Hr(),
                dbc.Label(id='output-value')
            ]
        )
    ]
)


@app.callback(
    Output('output-value', 'children'),
    Input('input-value1', 'value'),
    Input('input-value2', 'value')
)
def input_to_output(input_value1, input_value2):

    try:
        return float(input_value1) + float(input_value2)
    except:
        return '請輸入合法參數！'


if __name__ == '__main__':
    app.run_server()

圖3

　　這裏咱們的Input()對象不止一個，在Output()對象以後依次傳入（也能夠把全部Input()對象包在一個列表中傳入），其順序對應後面回調函數的參數順序，從而實現了多個輸入值的一一對應。

　　一樣的，Output()也能夠有多個：

app3.py

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output

app = dash.Dash(
    __name__,
    external_stylesheets=['css/bootstrap.min.css']
)

app.layout = html.Div(
    [
        html.Br(),
        html.Br(),
        html.Br(),
        dbc.Container(
            [
                dbc.Row(
                    [
                        dbc.Col(dbc.Input(id='input-lastname'), width=3),
                        dbc.Col(html.P('+'), width=1),
                        dbc.Col(dbc.Input(id='input-firstname'), width=3),
                    ],
                    justify='start'
                ),
                html.Hr(),
                dbc.Label(id='output1'),
                html.Br(),
                dbc.Label(id='output2')
            ]
        )
    ]
)


@app.callback(
    [Output('output1', 'children'),
     Output('output2', 'children')],
    [Input('input-lastname', 'value'),
     Input('input-firstname', 'value')]
)
def input_to_output(lastname, firstname):

    try:
        return '完整姓名：' + lastname + firstname, f'姓名長度爲{len(lastname+firstname)}'
    except:
        return '等待輸入...', '等待輸入...'


if __name__ == '__main__':
    app.run_server()

圖4

　　能夠看到無論是多個Output()仍是Input()，只須要嵌套在列表中便可。

2.3 利用State()實現惰性交互

　　不少狀況下，若是咱們的回調函數計算過程時間開銷較大，那麼像前面介紹的僅靠Input()與Output()實現的先後端通訊會很頻繁，由於監聽到的全部輸入部件對應屬性值只要略一改變，就會觸發回調。

　　爲了解決這類問題，Dash中設計了State()對象，咱們能夠利用State()替換Input()來綁定對應的輸入值，再將一些須要主動觸發的譬如dbc.Button()按鈕部件的屬性n_clicks，做爲Input()對象進行綁定。

　　讓咱們經過下面的例子更好的理解它的做用：

app4.py

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State

app = dash.Dash(
    __name__,
    external_stylesheets=['css/bootstrap.min.css']
)

app.layout = html.Div(
    [
        html.Br(),
        html.Br(),
        html.Br(),
        dbc.Container(
            [
                dbc.Row(
                    [
                        dbc.Col(dbc.Input(id='input-value'),
                                width=4),
                        dbc.Col(dbc.Button('小寫轉大寫',
                                           id='state-button',
                                           n_clicks=0),
                                width=4),
                        dbc.Col(dbc.Label(id='output-value',
                                          style={'padding': '0',
                                                 'margin': '0',
                                                  'line-height': '38px'}),
                                width=4)
                    ],
                    justify='start'
                )
            ]
        )
    ]
)


@app.callback(
    Output('output-value', 'children'),
    Input('state-button', 'n_clicks'),
    State('input-value', 'value')

)
def input_to_output(n_clicks, value):

    if n_clicks:
        return value.upper()


if __name__ == '__main__':
    app.run_server()

圖5

　　能夠看到，裝飾器中按照Output()、Input()、State()的順序傳入各個對象後，咱們的Button()部件的n_clicks參數記錄了對應的按鈕被點擊了多少次，初始化咱們設置其爲0，以後每次等咱們輸入完單詞，主動去點擊按鈕從而增長其被點擊次數記錄時，回調函數纔會被觸發，這樣就方便了咱們的不少複雜應用場景~

---

　　以上就是本期的所有內容，歡迎在評論區與我進行討論~