Python Dash构建轻量级Web汇率计算器实战
本文介绍如何使用Python库Dash构建轻量级Web应用。通过结合Flask、React和Plotly.js，无需JavaScript即可实现交互界面。教程涵盖环境配置、依赖安装、布局搭建及回调函数编写，展示如何开发一个支持多货币实时换算的汇率计算器。
对于刚接触前端网页开发的新手来说，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开发的虚拟环境，创建命令：
conda create -n myenv_dash python==3.6.5
安装Dash的第三方包：
pip install dash
由于Dash基于Flask，系统会自动安装相应的依赖。这里建议额外安装一个依赖包：dash_bootstrap_components。
pip install dash_bootstrap_components
该依赖包包含了Twitter的Bootstrap组件。
导入相关包
from dash import Dash, html, dcc
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
构建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文件无法加载时导致报错。
构建结果输出函数
代码如下（示例）：
# 输出函数，对于重复使用的，定义函数更快捷
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'表示显示样式，即“靠右浮动”。
网页结构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')]
)
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函数用于计算汇率。注：这里的货币符号不一定完全准确，仅供示意，无需过于纠结细节。
界面效果
到此这篇关于利用Python实现一个简单的Web汇率计算器的文章就介绍到这了，更多相关Python汇率计算内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！
免责声明：本文内容仅供参考，不代表本站观点。转载或引用请注明出处。
