1703878058
首先导入solcjs库。然后定义/compile路径，在路径回调函数中仅编译启动optimizer的客户端发送的源代码。接着只发送solc.compile方法的返回值到前端，并让客户端检查编译是否成功。
1703878059
1703878060
用户单击Deploy按钮时，前端通过传送合约源代码和来自该地址的constructor实参和私钥向/compile路径发出GET请求。当用户单击这个按钮时，合约就被部署了，交易哈希将被返回给用户。相关代码如下：
1703878061
1703878062
程序代码的执行过程如下：
1703878063
1703878064
1703878065
1703878066
1703878067
1703878068
1703878069
1703878070
1703878071
1703878072
1703878073
1703878074
1703878075
1703878076
上述代码的执行过程如下：
1703878077
1703878078
1）Web导入web3.js、BigNumber.js、ethereumjs-util和ethereumjs-tx库，然后创建一个Web3实例。
1703878079
1703878080
2）定义一个函数etherInSpentPendingTransactions，该函数用于计算一个地址的待定所有交易花费的全部以太币。由于web3.js不提供与交易池相关的JavaScript API，因此使用web3.currentProvider.sendAsync进行原始JSON-RPC调用。sendAsync用于异步调用原始JSON-RPC。如果想同步调用，则使用send方法而非sendAsync。当计算一个地址的待定交易中花费的全部以太币时，我们在交易池而非在待定区块中寻找待定交易。在计算以太币总数时，我们把每个交易的值和gas加起来，因为消耗gas也会从账户以太币余额中扣除。
1703878081
1703878082
3）定义geNonce函数，使用之前讨论的技术检索一个地址的nonce。它把挖出的交易总数和待定交易总数简单相加。
1703878083
1703878084
4）声明/deploy端点。首先编译合约，然后只部署第一个合约。如果在提供的源代码中发现多个合约，平台将只部署第一个合约。之后，可以改进app，使其部署所有被编译的合约，而非仅仅第一个。然后使用web3.eth.contract创建一个合约对象。
1703878085
1703878086
5）由于不使用Hooked-Web3-Provider或者任何hack拦截发送交易并把它们转换成sendRawTransaction调用，为了部署合约，现在需要生成交易的数据部分，即将合约字节码和constructor实参合并，编译成十六进制的字符串。合约对象事实上允许生成交易数据。可以调用带函数实参的getData方法。如果想获取数据以部署合约，则调用contract.new.getData；如果想调用合约的一个函数，则调用contract.functionName.getData。在这两种情况下，都要为getData方法提供实参。所以为了生成交易数据，只需要合约的ABI。为了更深入地学习函数名称、实参如何结合以及如何被编码以生成数据，请访问https://github.com/ethereum/wiki/wiki/Ethereum-Contract-ABI#examples。但是如果有合约ABI或者知道如何手动创建ABI，就不必访问了。
1703878087
1703878088
6）使用web3.eth.estimateGas来计算部署合约所需的gas数量。
1703878089
1703878090
7）检查地址是否有足够的以太币支付部署合约所需的gas。检索地址余额，减去待定交易的花费，然后检查剩下的余额是否大于或者等于gas所需的以太币。
1703878091
1703878092
8）得到nonce，签名并广播交易，把交易哈希返回到前端即可。
1703878093
1703878094
1703878095
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
