温故知新，Blazor遇见大写人民币翻译机(ChineseYuanParser)，践行WebAssembly SPA的实践之路

Posted 2021-06-06 TaylorShi

背景

在之前《温故知新，.Net Core遇见Blazor(FluentUI)，属于未来的SPA框架》中我们已经初步了解了Blazor的相关概念，并且根据官方的指引完成了《创建我的第一个Blazor应用》、《生成Blazor待办事项列表应用》、《结合ASP.NET Core SignalR和Blazor实现聊天室应用》三个基础应用的实践探索，接下来我们继续探索如果通过Blazor的相关技术来完成一个独立的SPA应用。

什么是大写人民币翻译机(ChineseYuanParser)

大写人民币翻译机(ChineseYuanParser)，是一款结合Blazor和WebAssembly技术联合打造并且运行在.Net 5.0运行时的数字金额转大写人民币金额的应用，适用于差旅报销时填写报销单需要将阿拉伯数字报销金额翻译成大写人民币金额的场景。

https://github.com/CraigTaylor/ChineseYuanParser

借鉴和引用

该项目为一个演示项目，旨在实践和练习Blazor技术，其原版来自阿迪的RMBCapitalization-Blazor和技术文章《Blazor WASM 实现人民币大写转换器》

运行效果

基于Azure静态网站应用服务(Azure Static Web Apps) 免费预览实现的一个临时发布：https://rmbcc.ledesign.org， 随时可能因为订阅原因失效。

如果想了解Azure静态网站应用服务(Azure Static Web Apps)，可以查看另外一个文章：尝鲜一试，Azure静态网站应用服务(Azure Static Web Apps) 免费预览，协同Github自动发布静态SPA

开始创作

接下来，我将一步步拆解实现该应用的细节，这个过程中，我们也可以收获很多关于Blazor、WebAssembly、.Net 5.0、javascript、Bootstrap的知识点。

创建"大写人民币翻译机"的Blazor WebAssembly应用

参考

• https://github.com/CraigTaylor/ChineseYuanParser
• https://github.com/EdiWang/RMBCapitalization-Blazor
• Blazor WASM 实现人民币大写转换器
• 尝鲜一试，Azure静态网站应用服务(Azure Static Web Apps) 免费预览，协同Github自动发布静态SPA
• https://github.com/BlazorPlus/BlazorDemoWasmLoading