待字闺中开发了一门区块链方面的课程：《深入浅出ETH原理与智能合约开发》，马良老师讲授。此简书文集记录我的学习笔记。
课程共8节课。其中，前四课讲ETH原理，后四课讲智能合约。
第八课分为三部分：
- Web应用架构
- AirCoin WebUI 设计概要
- AirCoin WebUI 实际开发演示
这篇文章是第八课第二部分的学习笔记：AirCoin WebUI 设计概要。
这节课主要讲解了AirCoin Web 前端的设计概要。介绍了其中涉及到文件的作用，序列图，重点讲解了实现前端逻辑的 app.js 文件（下一篇）。
1、AirCoin WebUI 设计概要
空气币（AirCoin）来自于上节课的例子，它是一个基于 ERC 20 发行的代币，在那节课中只有后端的智能合约实现的逻辑，没有前端。这节课就实现它的前端逻辑。
这个例子是一个官方的教学实例，马老师进行了大量的修改。
WebUI 设计概要
1.1 文件列表
-
静态页面 index.html
这个文件修改自 TutorialToken -
app.js
这个文件实现了前端的逻辑，比如：读取合约的JSON文件、生成合约对象，合约实例；调用web3js、truffle-contract；批量转账等功能。
批量转账是向多个账户转账。它可以有两种方式，一种是在智能合约里实现，一种是在JS文件里实现，这节课中用的是后一种。
-
2_deploy_contracts.js
这个是合约的部署文件。 -
bs-config broswer-sync 配置文件
前端的测试环境用了一个叫 broswer-sync 的东西，它可以动态地修改前端的参数，加快开发进度。 -
web3.min.js, truffle-contract.min.js
这两个文件也需要更新一下。
1.2 序列图
前端交互的时序图。实例中使用的 Ganashi 即代表是后端，也代表整个区块链，它是一个很方便的测试框架。前端就是上图中的webUI，它基于 TruffleContract 和 web3js 两个组件，和Ganashi 进行通信。时序图如上图，创建实例后，前端向两个智能合约发起调用，以及获得反馈。
1.3 前端页面展示
前端页面（我的电脑因升级导致虚拟机不能用了，这图是视频上截的）
最上面是众筹的信息。总的供给量，对应账户及余额。下面是输入部分，账户，以太币，以wei为单位，汇率是8，两个按钮是买空气币，和批量转账。
下面是每个账户对应的余额。展示以太币的变化情况。地址0是缺省地址，地址1是钱包地址，负责收钱。无论是谁花了以太币买空气币，都转到地址1；地址5到8演示批量转账。
2、代码分析
2.1 代码的目录
前端的实现文件主要是在 src 文件夹。如图。另外，图中的 bs-config.json 是broswer-sync 的配置文件。
目录截图（这图也是视频上截的）
2.2 index.html
index.html局部截图
上图是index.html的主要部分，加了 id 的，是需要使用 JS 更新的，后面结合 app.js 来分析。
后面是一个table 表格，用来显示各个地址下的余额。
再后面是加载相关的JS文件，其中 web3.min.js, truffle-contract.min.js 要用老师更新过的文件。
2.3 app.js
使用 vim src/js/app.js 打开文件。
这个文件是本实例中最重要的JS文件，它实现了前端页面的所有逻辑。这些逻辑都包含在叫 App 的对象中。
（没状态了，先放一放，下篇吧 -_-!!!）
小结，这节主要介绍了AirCoin Web 前端的设计概要。
不足之外，请批评指正。
网友评论