1703878096
1703878097
区块链项目开发指南 [:1703875363]
1703878098
区块链项目开发指南 6.3.3 创建前端
1703878099
1703878100
现在创建应用前端。前端包含一个编辑器（editor），可供用户编写代码。当用户单击Compile按钮时，将动态地显示输入框，其中每个输入框代表一个构造函数实参。当用户单击Deploy按钮时，constructor实参数值就来自这些输入框。用户需要在这些输入框中输入JSON字符串。
1703878101
1703878102
1703878103
我们将使用代码镜像（mirror）库在前端整合编辑器。想更多地学习如何使用代码镜像，请访问http://codemirror.net/。
1703878104
1703878105
应用的前端HTML代码如下。将这些代码放入index.html文件中：
1703878106
1703878107
1703878108
1703878109
1703878110
1703878111
1703878112
1703878113
在这里，可以看到有一个文本框。该文本框将包含用户输入到代码镜像编辑器中的任何内容。在程序代码中的其他东西无须解释。
1703878114
1703878115
完整的前端JavaScript代码如下。将这段代码放入main.js文件中：
1703878116
1703878117
1703878118
1703878119
1703878120
1703878121
1703878122
1703878123
1703878124
1703878125
1703878126
上述程序的执行过程如下：
1703878127
1703878128
1）添加代码编辑器到网页。代码编辑器将显示在textarea处，而textarea将被隐藏。
1703878129
1703878130
2）处理Compile按钮的单击事件处理程序。在其中保存编辑器，把编辑器的内容复制到textarea处。当按下Compile按钮时，向/compile路径发出请求，得到结果后解析它并显示输入框，这样用户可以输入constructor实参。这里只为第一个合约读取constructor实参。但是如果合约不止一个，就可以改进UI，用于全部合约构造函数。
1703878131
1703878132
3）处理Deploy按钮的单击事件处理程序。这里读取constructor实参的值，解析并把它们放进一个数组，然后通过传送地址、密钥、代码和实参值，向/deploy端点添加一个请求。如果这里有错误，则在弹出框中显示；否则，在弹出框中显示交易哈希。
1703878133
1703878134
1703878135
1703878136
1703878137
区块链项目开发指南 [:1703875364]
1703878138
区块链项目开发指南 6.3.4 测试
1703878139
1703878140
为了测试App，在Initial目录中运行app.js节点，访问localhost：8080，将看到如图6-1所示的界面。
1703878141
1703878142
1703878143
1703878144
1703878145
图 6-1