项目结构
在本章的练习文件中，用户将找到最终目录和初始目录。包含最终项目的最终源代码，而Initial包含可用于快速创建应用程序的空源代码文件和库。
在初始目录中，用户会发现一个公共目录和两个文件(app.js和package.json)。Package.json包含了应用后端的相关内容，将应用后端的源代码放在app.js中
公共目录包含与前端相关的文件。你会在public/css中找到Bootstrap.min.css，这是Bootstrap库；Index.html会在public/html中找到，把应用的html代码放在这里；的。web3.js和ethereumjs-tx的js文件会在public/js目录下找到；你还会发现一个主要的。public/js中的js文件，并把应用的前端JS代码放在这里。用户还会发现用于加密查询的Oraclize Python工具。
创建后端
让我们首先创建应用程序后端。首先在初始目录下运行npm install，安装后端需要的相关内容。
以下后端代码用于运行快捷服务、index.html文件和静态文件，并设置视图引擎：
上面的程序代码不需要解释。应用程序中将出现一个新页面，显示最近比赛的列表，包括比赛ID和结果(如果比赛已经结束)。相关代码如下：
在这里，发出一个API请求来获取最近比赛的列表，然后将结果发送到matches.ejs文件，以便它可以在用户友好的UI中显示结果。因此，API将比赛的开始时间作为时间戳，因此需要时间将其转换为人类可读的格式。我们从后端(而不是前端)发送这个请求，以免将API密钥暴露给用户。
后端将为前端提供一个API，以便在部署合同之前加密查询。应用程序不会提示用户创建API键，因为这是一个糟糕的UX实践。应用开发者对API key的控制不会造成伤害，因为开发者无法从API服务器修改结果。因此，即使应用程序开发人员知道API密钥，用户仍然会信任该应用程序。
加密的相关代码如下：
我们学会了如何使用这个工具。为了成功运行，应该先在系统中安装Python。即使已经安装了Python，也可能会显示一个错误，指示没有安装Python的cryptography和base58模块。所以如果工具提示，一定要安装这些模块。
创建前端
现在开始创建应用前端。前端将允许用户看到最近的比赛列表，部署投注合同和投注一场比赛，并让他们看到有关投注合同的信息。
首先，实现matches.ejs文件，它将显示最近匹配的列表。相关代码如下：
上面的程序代码不需要解释。现在开始写主页的HTML代码。首页会显示三个表格：第一个表格部署投注合同，第二个表格投资投注合同，第三个表格显示投注合同信息。
主页的HTML代码如下。将此代码放入index.html页面：
现在开始编写JavaScript代码来实际部署合同、投资合同和显示合同信息。所有相关代码如下。将这段代码放在main.js文件中：
"https://tupian.lamuhao.com/pic/img.php?k=智能合约的abi是什么,拿到合约的abi可以做什么10.jpg">
上述代码的执行过程如下：
1）分别在投注合约ByteCode和投注合约ABI变量中存储合约、字节码和ABI。
2）创建一个Web3实例，它连接到测试网节点。
3）定义getAJAXobject函数（一个跨浏览器兼容的函数），它返回一个AJAX对象。
4）向第一张表添加submit事件监听器（event listener），用于部署合约。在事件监听器的回调函数中，通过传送matchId向getURL终点发出请求，获得加密的查询字符串。然后生成数据部署合约。接着找出gasRequired。使用函数对象的estimateGas方法计算所需的gas，也可以使用web3.eth.estimateGas方法（它们的实参不同），即在前面的方法里不需要传送交易数据。记住，如果函数调用引发异常，estimateGas将返回区块gas上限。随后计算随机数。这里使用getTransactionCount方法，而非我们之前学习的实际过程。这样做是为了简化代码。最后创建原始交易，签名并广播。一旦挖出交易，就显示合约地址。
5）接下来向第二张表添加submit事件监听器，用于投注合约。这里生成交易的数据部分，计算所需的gas，创建原始交易，签名并广播。在计算交易所需的gas时，从账户地址和value对象属性传送合约地址，因为它是函数调用，而且gas随着value、from地址和合约地址的变化而变化。记住，在计算合约函数调用所需的gas时，可以传送to、from和value属性，因为gas取决于这些数值。
6）最后让第三张表上有submit事件监听器，即显示已投注合约的信息。
来源：公众号：区块链研究实验室（bc-tech-lab）
