快捷導(dǎo)航

利用Python實(shí)現(xiàn)一個(gè)簡(jiǎn)單的Web匯率計(jì)算器

更新時(shí)間：2022年08月26日 10:02:10 作者：派森醬

Dash?是一個(gè)用于構(gòu)建基于?Web?的應(yīng)用程序的?Python?庫(kù)，無(wú)需?JavaScript?。本文將利用Dash編寫(xiě)一個(gè)簡(jiǎn)單的Web匯率計(jì)算器，感興趣的可以了解一下

Dash是什么

Dash 是一個(gè)用于構(gòu)建基于 Web 的應(yīng)用程序的 Python 庫(kù)，無(wú)需 JavaScript 。

Dash 同時(shí)也是用于創(chuàng)建分析 Web 應(yīng)用程序的用戶界面庫(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)依賴（庫(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)的依賴，這里我建議也安裝一個(gè)額外依賴：dash_bootstrap_components

pip?install?dash_bootstrap_components

此依賴包含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:
????#?獲取在線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è)渲染基于在線的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?=?'在線匯率計(jì)算器'

此處使用的css有在線的和本地的，利用try……except……防止在線的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ù)有貨幣名稱和國(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è)定，為字典類型，可以設(shè)置字體，顏色等 dbc.Input(value = 0, id = 'input', type='number')默認(rèn)value值為0，數(shù)據(jù)類型為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ì)，意思一些，不用太較真哈?。?！

界面效果

到此這篇關(guān)于利用Python實(shí)現(xiàn)一個(gè)簡(jiǎn)單的Web匯率計(jì)算器的文章就介紹到這了,更多相關(guān)Python匯率計(jì)算內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: