手把手教你擼一個(gè) Web 匯率計(jì)算器
前段時(shí)間剛接觸到前端網(wǎng)頁(yè)開(kāi)發(fā)，但是對(duì)于剛?cè)腴T(mén)的小白而言，像flask、Django等這類(lèi)稍大型的框架確實(shí)不太適合，今天這個(gè)Dash是集眾家之長(zhǎng)于一體的輕量化Web開(kāi)發(fā)庫(kù)。
Dash是什么？
Dash 是一個(gè)用于構(gòu)建基于 Web 的應(yīng)用程序的 Python 庫(kù)，無(wú)需 JavaScript 。
Dash 同時(shí)也是用于創(chuàng)建分析 Web 應(yīng)用程序的用戶(hù)界面庫(kù)。那些使用 Python 進(jìn)行數(shù)據(jù)分析、數(shù)據(jù)挖掘、可視化、建模、儀器控制和報(bào)告的人可以立即使用 Dash 。
Dash 建立在 Plotly.js、React 和 Flask 之上，將現(xiàn)代 UI 元素（如下拉列表、滑塊和圖形）與你的分析 Python 代碼相結(jié)合。
網(wǎng)頁(yè)搭建步驟
安裝相關(guān)依賴(lài)（庫(kù)）
提示：本文基于Windows 10、Anaconda 3、Sublime Text，Python版本為3.6.5 個(gè)人習(xí)慣單獨(dú)新一個(gè)用于dash開(kāi)發(fā)的虛擬環(huán)境，創(chuàng)建命令：
conda create -n myenv_dash python==3.6.5
安裝Dash的第三方包：
pip install dash
因?yàn)槭腔贔lask，所以系統(tǒng)會(huì)自動(dòng)安裝相應(yīng)的依賴(lài)，這里我建議也安裝一個(gè)額外依賴(lài)：dash_bootstrap_components；
pip install dash_bootstrap_components
此依賴(lài)包含Twitter的bootstrap組件。
導(dǎo)入相關(guān)包
from dash import Dash, html, dcc
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
構(gòu)建app
try:
# 獲取在線(xiàn)bootstrap.min.css
app = Dash(__name__, external_stylesheets = ['https://cdn.staticfile.org/twitter-bootstrap/4.5.2/css/bootstrap.min.css'])
print('此網(wǎng)頁(yè)渲染基于在線(xiàn)的CSS')
except:
# 獲取本地bootstrap.min.css
app = Dash(__name__, external_stylesheets = [r"E:\Desktop\My_Python\Dash\css\bootstrap.min.css"])
print('此網(wǎng)頁(yè)渲染基于本地的CSS')
app.title = '在線(xiàn)匯率計(jì)算器'
此處使用的css有在線(xiàn)的和本地的，利用try……except……防止在線(xiàn)的css文件無(wú)法加載而導(dǎo)致報(bào)錯(cuò)。
構(gòu)建結(jié)果輸出函數(shù)
代碼如下（示例）：
# 輸出函數(shù)，對(duì)于重復(fù)使用的，定義函數(shù)更快捷
def item(name, img_path):
return dbc.ListGroupItem([html.H5(name), html.Img(src=img_path), html.H5('---', id=name, className='float-right')])
因?yàn)槭菃屋斎耄噍敵觯瑯?gòu)建item函數(shù)可以重復(fù)利用，優(yōu)化代碼， 函數(shù)參數(shù)有貨幣名稱(chēng)和國(guó)旗（提前準(zhǔn)備好圖片素材，大小建議不要太大，我的圖片是160*110）。dbc.ListGroupItem組件可以很好的定位標(biāo)簽、文字; 其中的className='float-right'可以理解為顯示樣式，代表“靠右浮動(dòng)”
網(wǎng)頁(yè)結(jié)構(gòu)Layout搭建
代碼如下（示例）：
app.layout = dbc.Container(
children=[
dbc.ListGroup([
dbc.ListGroupItem(children=[
html.H1("匯率計(jì)算器-簡(jiǎn)單版",style={'textAlign': 'center','color':'#272528'}),
html.P('輸入：用于兌換外幣的人民幣數(shù)；輸出：能兌換到的外幣數(shù)；單位：?jiǎn)挝粠胖怠?,style={'textAlign': 'center','color':'#BB002D'}),
dbc.Input(value = 0, id = 'input', type='number')
],active=True),
item('JPY','./assets/Japan.jpg'),
item('USD','./assets/USA.jpg'),
item('GBP','./assets/UK.jpg'),
item('HKD','./assets/Hongkong.jpg'),
item('EUR','./assets/EU.png'),
item('CHF','./assets/France.png'),
item('INR','./assets/India.jpg')
],className='shadow')
],style={'padding':'2rem'}
)
layout為GUI布局，采用列表的模式，根據(jù)行列進(jìn)行排布；style={'textAlign': 'center','color':'#272528'}為文字排布樣式設(shè)定，為字典類(lèi)型，可以設(shè)置字體，顏色等 dbc.Input(value = 0, id = 'input', type='number')默認(rèn)value值為0，數(shù)據(jù)類(lèi)型為number用于計(jì)算；style={'padding':'2rem'}為Container（容器）的居中顯示樣式，代表畫(huà)布距離邊界的寬度。
callback回調(diào)參數(shù)設(shè)定
代碼如下（示例）：
@app.callback(
output = [
Output('JPY', 'children'),
Output('USD', 'children'),
Output('GBP', 'children'),
Output('HKD', 'children'),
Output('EUR', 'children'),
Output('CHF', 'children'),
Output('INR', 'children')
],
inputs = [Input('input', 'value')]
)
def rule(rmb):
rmb = rmb if rmb is not None else 0
return (
f'{round(rmb/0.0501,2)} ￥',
f'{round(rmb/6.7646,2)} ＄',
f'{round(rmb/8.1682,2)} ￡',
f'{round(rmb/0.8615,2)} ￥',
f'{round(rmb/6.8881,2)} €',
f'{round(rmb/7.0309,2)} €',
f'{round(rmb/0.0852,2)} $'
)
@app.callback可以理解為裝飾器，用于網(wǎng)頁(yè)的交互。rule函數(shù)用于計(jì)算匯率。ps:這里的貨幣符號(hào)不一定全對(duì)，意思一些，不用太較真哈！！！
界面效果
總結(jié)
本項(xiàng)目到這里，整個(gè)項(xiàng)目就已經(jīng)完成了，涉及到的一些基礎(chǔ)技能，還需要一點(diǎn)功力，好了，今天的分享就到這里，后續(xù)會(huì)更新如何使用requests爬蟲(chóng)獲取實(shí)時(shí)匯率進(jìn)行動(dòng)態(tài)匯率換算。
