5.使用callback高级特性+dash-bootstrap-components实现货币汇率计算工具

1.callback的一对多关系:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

# 构建dash应用
app = dash.Dash(__name__)

# ¥$£
# 设定页面布局样式
app.layout =html.Div(children=[
    dcc.Input(value=0 , id="input" , type="number"),
    html.Div(children=["日元(JPY)",html.Span("----",id="JPY")]),
    html.Div(children=["美元(USD)",html.Span("----",id="USD")]),
    html.Div(children=["英镑(GBP)",html.Span("----",id="GBP")])
])

# 构建数据流向
@app.callback(
    [Output("JPY","children"),Output("USD","children"),Output("GBP","children")] ,
    [Input("input","value")]
)
def update(v):
    v=0 if not v else v
    return (
        f"{v*15.6667}",
        f"{v*0.1484}",
        f"{v*0.1144}")

app.run_server(debug=True)

运行代码，浏览器打开http://127.0.0.1:8050/，效果以及数据流向如下所示：

2.bootstrap组件:

本部分主要是美化上步的UI页面效果，因此上步构件数据流向（callback）部分不需要调整。

本次使用的dash bootstrap component是基于bootstrap封装而成。
bootstrap是在Web开发届相当老牌的一个框架，可以说是最早的一批提出用定义好的CSS框架来使用。
可以在其官方文档页查看相关信息。

2.1 安装：

首先可以前往官网查看相关信息，dash bootstrap component其实相当于Dash的一个组件，需要独立安装。
使用pip install dash-bootstrap-components即可完成安装。

2.2 引用：

官网是使用

app = dash.Dash(
    external_stylesheets=[dbc.themes.BOOTSTRAP]
)

该方式来引用，但是这不是最好的方法，我们可以先到该网站，找到https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css，复制后面的链接并打开将其保存为bootstrap.min.css文件，存放在工程文件目录中的assets文件夹下，这样就会被自动识别，而不需要每次通过官网的方法引入。

2.3 代码：

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

# 构建dash应用
app = dash.Dash(__name__)

# 设定页面布局样式
# app.layout =html.Div(children=[
#     dcc.Input(value=0 , id="input" , type="number"),
#     html.Div(children=["日元(JPY)",html.Span("----",id="JPY")]),
#     html.Div(children=["美元(USD)",html.Span("----",id="USD")]),
#     html.Div(children=["英镑(GBP)",html.Span("----",id="GBP")])
# ])

def ListGroupItem_generate(currency,flagname):
    return dbc.ListGroupItem([
        html.H5(currency),
        html.Img(src=f"assets/{flagname}.png"),
        html.H5("----",id=currency,className="float-right"),
    ]
    )

# ListGroup
list_group = dbc.ListGroup(
    [
        dbc.ListGroupItem([
            html.H1("在线汇率转换计算器"),
            html.P("汇率数据来自：中国银行外汇牌价"),
            dcc.Input(value=0,type="number",id="input")
        ],className={"textAlign":"center"},
        active=True),
        ListGroupItem_generate("日元(JPY)","jp"),
        ListGroupItem_generate("美元(USD)","usa"),
        ListGroupItem_generate("英镑(GBP)","uk"),
    ],
    className="shadow"
)

app.layout = dbc.Container(children=[list_group],style={"paddingTop":"4rem"})

# 构建数据流向
@app.callback(
    [Output("日元(JPY)","children"),Output("美元(USD)","children"),Output("英镑(GBP)","children")] , 
    [Input("input","value")]
)
def update(v):
    v=0 if not v else v
    return (
        f"{v*15.6667}¥",
        f"{v*0.1484}$",
        f"{v*0.1144}£")

app.run_server(debug=True)

运行代码，浏览器打开http://127.0.0.1:8050/，效果如下所示：