文 |咕隆先森
來源：Python 技術「ID: pythonall」
前段時間剛接觸到前端網頁開發，但是對於剛入門的小白而言，像flask、Django等這類稍大型的框架確實不太適合，今天這個Dash是集眾家之長於一體的輕量化Web開發庫。
Dash是什麼？Dash 是一個用於構建基於 Web 的應用程序的 Python 庫，無需 JavaScript 。
Dash 同時也是用於創建分析 Web 應用程序的用戶界面庫。那些使用 Python 進行數據分析、數據挖掘、可視化、建模、儀器控制和報告的人可以立即使用 Dash 。
Dash 建立在 Plotly.js、React 和 Flask 之上，將現代 UI 元素（如下拉列表、滑塊和圖形）與你的分析 Python 代碼相結合。
網頁搭建步驟安裝相關依賴（庫）提示：本文基於Windows 10、Anaconda 3、Sublime Text，Python版本為3.6.5 個人習慣單獨新一個用於dash開發的虛擬環境，創建命令：
condacreate-nmyenv_dashpython==3.6.5安裝Dash的第三方包：
pipinstalldash因為是基於Flask，所以系統會自動安裝相應的依賴，這裡我建議也安裝一個額外依賴：dash_bootstrap_components
pipinstalldash_bootstrap_components此依賴包含Twitter的bootstrap組件。
導入相關包fromdashimportDash,html,dccfromdash.dependenciesimportInput,Outputimportdash_bootstrap_componentsasdbc構建apptry:#獲取在線bootstrap.min.cssapp=Dash(__name__,external_stylesheets=['https://cdn.staticfile.org/twitter-bootstrap/4.5.2/css/bootstrap.min.css'])print('此網頁渲染基於在線的CSS')except:#獲取本地bootstrap.min.cssapp=Dash(__name__,external_stylesheets=[r"E:\Desktop\My_Python\Dash\css\bootstrap.min.css"])print('此網頁渲染基於本地的CSS')app.title='在線匯率計算器'此處使用的css有在線的和本地的，利用try……except……防止在線的css文件無法加載而導致報錯。
構建結果輸出函數代碼如下（示例）：
#輸出函數，對於重複使用的，定義函數更快捷defitem(name,img_path):returndbc.ListGroupItem([html.H5(name),html.Img(src=img_path),html.H5('---',id=name,className='float-right')])因為是單輸入，多輸出，構建item函數可以重複利用，優化代碼， 函數參數有貨幣名稱和國旗（提前準備好圖片素材，大小建議不要太大，我的圖片是160*110）。dbc.ListGroupItem組件可以很好的定位標籤、文字; 其中的className='float-right'可以理解為顯示樣式，代表「靠右浮動」
網頁結構Layout搭建代碼如下（示例）：
app.layout=dbc.Container(children=[dbc.ListGroup([dbc.ListGroupItem(children=[html.H1("匯率計算器-簡單版",style={'textAlign':'center','color':'#272528'}),html.P('輸入：用於兌換外幣的人民幣數；輸出：能兌換到的外幣數；單位：單位幣值。',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布局，採用列表的模式，根據行列進行排布；style={'textAlign': 'center','color':'#272528'}為文字排布樣式設定，為字典類型，可以設置字體，顏色等 dbc.Input(value = 0, id = 'input', type='number')默認value值為0，數據類型為number用於計算；style={'padding':'2rem'}為Container（容器）的居中顯示樣式，代表畫布距離邊界的寬度。
callback回調參數設定代碼如下（示例）：
@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')])defrule(rmb):rmb=rmbifrmbisnotNoneelse0return(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可以理解為裝飾器，用於網頁的交互。rule函數用於計算匯率。ps:這裡的貨幣符號不一定全對，意思一些，不用太較真哈！！！
界面效果
本項目到這裡，整個項目就已經完成了，涉及到的一些基礎技能，還需要一點功力，好了，今天的分享就到這裡，後續會更新如何使用requests爬蟲獲取實時匯率進行動態匯率換算。
留言列表