汇率换算器在线 手把手教你撸一个

其实汇率换算器在线的问题并不复杂，但是又很多的朋友都不太了解手把手教你撸一个，因此呢，今天小编就来为大家分享汇率换算器在线的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！

前段时间刚接触到前端网页开发，但是对于刚入门的小白而言，像flask、Django等这类稍大型的框架确实不太适合，今天这个Dash是集众家之长于一体的轻量化Web开发库。

Dash是一个用于构建基于Web的应用程序的Python库，无需JavaScript。

Dash同时也是用于创建分析Web应用程序的用户界面库。那些使用Python进行数据分析、数据挖掘、可视化、建模、仪器控制和报告的人可以立即使用Dash。

Dash建立在Plotly.js、React和Flask之上，将现代UI元素（如下拉列表、滑块和图形）与你的分析Python代码相结合。

提示：本文基于Windows10、Anaconda3、SublimeText，Python版本为3.6.5个人习惯单独新一个用于dash开发的虚拟环境，创建命令：

condacreate-nmyenv_dashpython==3.6.5\n

安装Dash的第三方包：

pipinstalldash\n

因为是基于Flask，所以系统会自动安装相应的依赖，这里我建议也安装一个额外依赖：dash_bootstrap_components

pipinstalldash_bootstrap_components\n

此依赖包含Twitter的bootstrap组件。

fromdashimportDash,html,dcc\nfromdash.dependenciesimportInput,Output\nimportdash_bootstrap_componentsasdbc\n构建app

try:\n#获取在线bootstrap.min.css\napp=Dash(__name__,external_stylesheets=['https://cdn.staticfile.org/twitter-bootstrap/4.5.2/css/bootstrap.min.css'])\nprint('此网页渲染基于在线的CSS')\nexcept:\n#获取本地bootstrap.min.css\napp=Dash(__name__,external_stylesheets=[r"E:\\Desktop\\My_Python\\Dash\\css\\bootstrap.min.css"])\nprint('此网页渲染基于本地的CSS')\napp.title='在线汇率计算器'\n

此处使用的css有在线的和本地的，利用try……except……防止在线的css文件无法加载而导致报错。

#输出函数，对于重复使用的，定义函数更快捷\ndefitem(name,img_path):\nreturndbc.ListGroupItem([html.H5(name),html.Img(src=img_path),html.H5('---',id=name,className='float-right')])\n

因为是单输入，多输出，构建item函数可以重复利用，优化代码，函数参数有货币名称和国旗（提前准备好图片素材，大小建议不要太大，我的图片是160*110）。dbc.ListGroupItem组件可以很好的定位标签、文字;其中的className='float-right'可以理解为显示样式，代表“靠右浮动”

app.layout=dbc.Container(\nchildren=[\ndbc.ListGroup([\ndbc.ListGroupItem(children=[\nhtml.H1("汇率计算器-简单版",style={'textAlign':'center','color':'#272528'}),\nhtml.P('输入：用于兑换外币的人民币数；输出：能兑换到的外币数；单位：单位币值。',style={'textAlign':'center','color':'#BB002D'}),\ndbc.Input(value=0,id='input',type='number')\n],active=True),\nitem('JPY','./assets/Japan.jpg'),\nitem('USD','./assets/USA.jpg'),\nitem('GBP','./assets/UK.jpg'),\nitem('HKD','./assets/Hongkong.jpg'),\nitem('EUR','./assets/EU.png'),\nitem('CHF','./assets/France.png'),\nitem('INR','./assets/India.jpg')\n],className='shadow')\n],style={'padding':'2rem'}\n)\n

layout为GUI布局，采用列表的模式，根据行列进行排布；style={'textAlign':'center','color':'#272528'}为文字排布样式设定，为字典类型，可以设置字体，颜色等dbc.Input(value=0,id='input',type='number')默认value值为0，数据类型为number用于计算；style={'padding':'2rem'}为Container（容器）的居中显示样式，代表画布距离边界的宽度。

@app.callback(\noutput=[\nOutput('JPY','children'),\nOutput('USD','children'),\nOutput('GBP','children'),\nOutput('HKD','children'),\nOutput('EUR','children'),\nOutput('CHF','children'),\nOutput('INR','children')\n],\ninputs=[Input('input','value')]\n)\ndefrule(rmb):\nrmb=rmbifrmbisnotNoneelse0\nreturn(\nf'{round(rmb/0.0501,2)}￥',\nf'{round(rmb/6.7646,2)}＄',\nf'{round(rmb/8.1682,2)}￡',\nf'{round(rmb/0.8615,2)}￥',\nf'{round(rmb/6.8881,2)}€',\nf'{round(rmb/7.0309,2)}€',\nf'{round(rmb/0.0852,2)}$'\n)\n

@app.callback可以理解为装饰器，用于网页的交互。rule函数用于计算汇率。ps:这里的货币符号不一定全对，意思一些，不用太较真哈！！！

本项目到这里，整个项目就已经完成了，涉及到的一些基础技能，还需要一点功力，好了，今天的分享就到这里，后续会更新如何使用requests爬虫获取实时汇率进行动态汇率换算。

好了，文章到这里就结束啦，如果本次分享的汇率换算器在线和手把手教你撸一个问题对您有所帮助，还望关注下本站哦！