手把手教你撸一個Web匯率電腦

前言

前段時間剛接觸到前端網頁開發，但是對于剛入門的小白而言，像flask、Django等這類稍大型的架構确實不太适合，今天這個Dash是集衆家之長于一體的輕量化Web開發庫。

一、Dash是什麼？

Dash 是一個用于建構基于 Web 的應用程式的 Python 庫，無需 JavaScript 。

Dash 同時也是用于建立分析 Web 應用程式的使用者界面庫。那些使用 Python 進行資料分析、資料挖掘、可視化、模組化、儀器控制和報告的人可以立即使用 Dash 。

Dash 建立在 Plotly.js、React 和 Flask 之上，将現代 UI 元素（如下拉清單、滑塊和圖形）與你的分析 Python 代碼相結合。

二、網頁搭建步驟

1.安裝相關依賴（庫）

提示：本文基于Windows 10、Anaconda 3、Sublime Text，Python版本為3.6.5

個人習慣單獨新一個用于dash開發的虛拟環境，建立指令：

conda create -n myenv_dash python==3.6.5
           

安裝Dash的第三方包：

pip install dash
           

因為是基于Flask，是以系統會自動安裝相應的依賴，這裡我建議也安裝一個額外依賴：dash_bootstrap_components

pip install dash_bootstrap_components
           

此依賴包含Twitter的bootstrap元件。

2.導入相關包

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

3.建構app

try:
    # 擷取線上bootstrap.min.css
    app = Dash(__name__, external_stylesheets = ['https://cdn.staticfile.org/twitter-bootstrap/4.5.2/css/bootstrap.min.css'])
    print('此網頁渲染基于線上的CSS')
except:
    # 擷取本地bootstrap.min.css
    app = Dash(__name__, external_stylesheets = [r"E:\Desktop\My_Python\Dash\css\bootstrap.min.css"])
    print('此網頁渲染基于本地的CSS')
app.title = '線上匯率電腦'
           

此處使用的css有線上的和本地的，利用try……except……防止線上的css檔案無法加載而導緻報錯。

4.建構結果輸出函數

代碼如下（示例）：

# 輸出函數，對于重複使用的，定義函數更快捷
def item(name, img_path):
	return dbc.ListGroupItem([html.H5(name), html.Img(src=img_path), html.H5('---', id=name, className='float-right')])
           

因為是單輸入，多輸出，建構item函數可以重複利用，優化代碼，

函數參數有貨币名稱和國旗（提前準備好圖檔素材，大小建議不要太大，我的圖檔是160*110）。

dbc.ListGroupItem元件可以很好的定位标簽、文字;

其中的className='float-right’可以了解為顯示樣式，代表“靠右浮動”

5.網頁結構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（容器）的居中顯示樣式，代表畫布距離邊界的寬度。

6.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')]
	)
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可以了解為裝飾器，用于網頁的互動。

rule函數用于計算匯率。

ps:這裡的貨币符号不一定全對，意思一些，不用太較真哈！！！

三、界面效果

四、最後總結

本項目到這裡，整個項目就已經完成了，涉及到的一些基礎技能，還需要一點功力，好了，今天的分享就到這裡，後續會更新如何使用requests爬蟲擷取實時匯率進行動态匯率換算。