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
1703878146
1703878147
输入一些solidity合约代码，并单击Compile按钮，将看到右侧出现新的输入框，如图6-2所示。
1703878148
1703878149
1703878150
1703878151
1703878152
图 6-2
1703878153
1703878154
输入一个合法的地址及其私钥，然后输入constructor实参的数值，并单击Deploy按钮。如果一切正常，将看到带有交易哈希的报警框，如图6-3所示。
1703878155