以太坊Dapp终极教程——如何构建一个完整的全栈去中心化应用（三）

在以太坊Dapp终极教程——如何构建一个完整的全栈去中心化应用（一）中，我们已经完成了一切所需的设置；在以太坊Dapp终极教程——如何构建一个完整的全栈去中心化应用（二）中，让我们通过列出将在选举中运行的候选人来继续构建智能合约并完成客户端程序。下面我们来完成投票部分，现在让我们添加在选举中投票的能力。

让我们定义一个选民voters映射到智能合约，以跟踪在选举中投票的账户，如下所示：

contract Election {
    // ...

    // Store accounts that have voted
    mapping(address => bool) public voters;

    // ...
}

现在让我们添加一个投票vote函数：

contract Election {
    // ...

    // Store accounts that have voted
    mapping(address => bool) public voters;

    // ...

    function vote (uint _candidateId) public {
        // require that they haven't voted before
        require(!voters[msg.sender]);

        // require a valid candidate
        require(_candidateId > 0 && _candidateId <= candidatesCount);

        // record that voter has voted
        voters[msg.sender] = true;

        // update candidate vote Count
        candidates[_candidateId].voteCount ++;
    }
}

此函数的核心功能是通过从候选candidates映射中读取候选结构并使用递增运算符（++）将voteCount增加1来增加候选者的投票计数。让我们看看它做的其他一些事情：

• 1.它接受一个论点。这是一个带有候选者id的无符号整数。
• 2.它是公开可见的，因为我们想要一个外部帐户来调用它。
• 它添加了投票给我们刚刚创建的选民映射的帐户。这将使我们能够跟踪选民在选举中投票的情况。我们使用Solidity提供的全局变量msg.sender访问调用此函数的帐户。
• 它实现了require语句，如果不满足条件，它将停止执行。首先要求选民之前没有投票。我们通过从映射中读取带有msg.sender的帐户地址来完成此操作。如果它在那里，该帐户已经投票。接下来，它要求候选ID有效。候选id必须大于零且小于或等于总候选计数。

现在，你的完整合约代码应如下所示：

pragma solidity ^0.4.2;

contract Election {
    // Model a Candidate
    struct Candidate {
        uint id;
        string name;
        uint voteCount;
    }

    // Store accounts that have voted
    mapping(address => bool) public voters;
    // Read/write candidates
    mapping(uint => Candidate) public candidates;
    // Store Candidates Count
    uint public candidatesCount;

    function Election () public {
        addCandidate("Candidate 1");
        addCandidate("Candidate 2");
    }

    function addCandidate (string _name) private {
        candidatesCount ++;
        candidates[candidatesCount] = Candidate(candidatesCount, _name, 0);
    }

    function vote (uint _candidateId) public {
        // require that they haven't voted before
        require(!voters[msg.sender]);

        // require a valid candidate
        require(_candidateId > 0 && _candidateId <= candidatesCount);

        // record that voter has voted
        voters[msg.sender] = true;

        // update candidate vote Count
        candidates[_candidateId].voteCount ++;
    }
}

测试投票功能

现在让我们为election.js测试文件添加一个测试：

it("allows a voter to cast a vote", function() {
    return Election.deployed().then(function(instance) {
      electionInstance = instance;
      candidateId = 1;
      return electionInstance.vote(candidateId, { from: accounts[0] });
    }).then(function(receipt) {
      return electionInstance.voters(accounts[0]);
    }).then(function(voted) {
      assert(voted, "the voter was marked as voted");
      return electionInstance.candidates(candidateId);
    }).then(function(candidate) {
      var voteCount = candidate[2];
      assert.equal(voteCount, 1, "increments the candidate's vote count");
    })
  });

我们想在这里测试两件事：

• 1.测试该函数增加候选人的投票计数。
• 2.测试选民在投票时是否已添加到映射中。

接下来，我们可以为函数的要求编写一些测试。让我们编写一个测试来确保我们的投票函数抛出双重投票的异常：

it("throws an exception for invalid candidates", function() {
    return Election.deployed().then(function(instance) {
      electionInstance = instance;
      return electionInstance.vote(99, { from: accounts[1] })
    }).then(assert.fail).catch(function(error) {
      assert(error.message.indexOf('revert') >= 0, "error message must contain revert");
      return electionInstance.candidates(1);
    }).then(function(candidate1) {
      var voteCount = candidate1[2];
      assert.equal(voteCount, 1, "candidate 1 did not receive any votes");
      return electionInstance.candidates(2);
    }).then(function(candidate2) {
      var voteCount = candidate2[2];
      assert.equal(voteCount, 0, "candidate 2 did not receive any votes");
    });
  });

我们可以声明交易失败并返回错误消息。我们可以深入研究此错误消息，以确保错误消息包含revert子字符串。然后我们可以通过确保候选人没有得到任何投票来确保我们的合约状态不变。

现在让我们编写一个测试来确保我们防止双重投票：

it("throws an exception for double voting", function() {
    return Election.deployed().then(function(instance) {
      electionInstance = instance;
      candidateId = 2;
      electionInstance.vote(candidateId, { from: accounts[1] });
      return electionInstance.candidates(candidateId);
    }).then(function(candidate) {
      var voteCount = candidate[2];
      assert.equal(voteCount, 1, "accepts first vote");
      // Try to vote again
      return electionInstance.vote(candidateId, { from: accounts[1] });
    }).then(assert.fail).catch(function(error) {
      assert(error.message.indexOf('revert') >= 0, "error message must contain revert");
      return electionInstance.candidates(1);
    }).then(function(candidate1) {
      var voteCount = candidate1[2];
      assert.equal(voteCount, 1, "candidate 1 did not receive any votes");
      return electionInstance.candidates(2);
    }).then(function(candidate2) {
      var voteCount = candidate2[2];
      assert.equal(voteCount, 1, "candidate 2 did not receive any votes");
    });
  });

首先，我们将使用尚未投票的新帐户设置测试方案。然后我们将代表他们投票。然后我们会再次尝试投票。我们断言这里发生了一个错误。我们可以检查错误消息，并确保没有候选人收到投票，就像之前的测试一样。

现在让我们运行我们的测试：

$ truffle test

是的，他们通过了！

客户端投票

让我们添加一个表单，允许帐户在我们的index.html文件中的表格下方投票：

  

    Select Candidate
    
    
  
  Vote
  

让我们来看看这个形式的一些事情：

• 1.我们使用空的select元素创建表单。我们将使用智能合约在app.js文件中提供的候选项填充选择选项。
• 2.该表单有一个onSubmit处理程序，它将调用castVote函数。 我们将在app.js文件中定义它。

现在让我们更新我们的app.js文件来处理这两件事。首先，我们在表单的select元素中列出智能合约中的所有候选项。然后，一旦帐户投票，我们将隐藏页面上的表单。我们将渲染函数更新为如下所示：

render: function() {
  var electionInstance;
  var loader = $("#loader");
  var content = $("#content");

  loader.show();
  content.hide();

  // Load account data
  web3.eth.getCoinbase(function(err, account) {
    if (err === null) {
      App.account = account;
      $("#accountAddress").html("Your Account: " + account);
    }
  });

  // Load contract data
  App.contracts.Election.deployed().then(function(instance) {
    electionInstance = instance;
    return electionInstance.candidatesCount();
  }).then(function(candidatesCount) {
    var candidatesResults = $("#candidatesResults");
    candidatesResults.empty();

    var candidatesSelect = $('#candidatesSelect');
    candidatesSelect.empty();

    for (var i = 1; i <= candidatesCount; i++) {
      electionInstance.candidates(i).then(function(candidate) {
        var id = candidate[0];
        var name = candidate[1];
        var voteCount = candidate[2];

        // Render candidate Result
        var candidateTemplate = "" + id + "" + name + "" + voteCount + ""
        candidatesResults.append(candidateTemplate);

        // Render candidate ballot option
        var candidateOption = "" + name + ""
        candidatesSelect.append(candidateOption);
      });
    }
    return electionInstance.voters(App.account);
  }).then(function(hasVoted) {
    // Do not allow a user to vote
    if(hasVoted) {
      $('form').hide();
    }
    loader.hide();
    content.show();
  }).catch(function(error) {
    console.warn(error);
  });
}

接下来，我们想要编写一个在提交表单时调用的函数：

castVote: function() {
    var candidateId = $('#candidatesSelect').val();
    App.contracts.Election.deployed().then(function(instance) {
      return instance.vote(candidateId, { from: App.account });
    }).then(function(result) {
      // Wait for votes to update
      $("#content").hide();
      $("#loader").show();
    }).catch(function(err) {
      console.error(err);
    });
  }

首先，我们在表单中查询candidateId。当我们从智能合约中调用投票功能时，我们会传入此ID，并为当前帐户提供功能的来自from元数据。这将是异步调用。完成后，我们将显示加载程序并隐藏页面内容。无论何时记录投票，我们都会做相反的事情，再次向用户显示内容。

现在你的前端应用程序应如下所示：

image

继续尝试投票功能。一旦你这样做，你应该会看到一个Metamask确认弹出如下：

image

点击提交后，你已成功投票！你仍然会看到一个加载屏幕。现在，你必须刷新页面才能看到记录的投票。我们将在下一节中自动更新加载程序。如果你遇到困难，可以在此处的教程中引用完整的客户端代码。

查看事件

本教程的最后一步是在投票时触发事件。这将允许我们在帐户投票时更新我们的客户端应用程序。幸运的是，这很容易。让我们首先在合约中声明一个事件，如下所示：

contract Election {
    // ...
    event votedEvent (
        uint indexed _candidateId
    );
    // ...
}

现在我们可以在我们的投票功能voted中触发这个投票事件vote，如下所示：

function vote (uint _candidateId) public {
    // require that they haven't voted before
    require(!voters[msg.sender]);

    // require a valid candidate
    require(_candidateId > 0 && _candidateId <= candidatesCount);

    // record that voter has voted
    voters[msg.sender] = true;

    // update candidate vote Count
    candidates[_candidateId].voteCount ++;

    // trigger voted event
    votedEvent(_candidateId);
}

现在我们已经更新了合约，我们必须运行迁移：

$ truffle migrate --reset

我们还可以更新我们的测试以检查此投票事件，如下所示：

it("allows a voter to cast a vote", function() {
  return Election.deployed().then(function(instance) {
    electionInstance = instance;
    candidateId = 1;
    return electionInstance.vote(candidateId, { from: accounts[0] });
  }).then(function(receipt) {
    assert.equal(receipt.logs.length, 1, "an event was triggered");
    assert.equal(receipt.logs[0].event, "votedEvent", "the event type is correct");
    assert.equal(receipt.logs[0].args._candidateId.toNumber(), candidateId, "the candidate id is correct");
    return electionInstance.voters(accounts[0]);
  }).then(function(voted) {
    assert(voted, "the voter was marked as voted");
    return electionInstance.candidates(candidateId);
  }).then(function(candidate) {
    var voteCount = candidate[2];
    assert.equal(voteCount, 1, "increments the candidate's vote count");
  })
});

此测试检查投票函数vote返回的交易收据，以确保其具有日志。这些日志包含已触发的事件。我们检查事件是否是正确的类型，并且它具有正确的候选ID。

现在让我们更新客户端应用程序以监听投票事件，并在触发任何时候触发页面刷新。我们可以使用这样的listenForEvents函数来做到这一点：

listenForEvents: function() {
  App.contracts.Election.deployed().then(function(instance) {
    instance.votedEvent({}, {
      fromBlock: 0,
      toBlock: 'latest'
    }).watch(function(error, event) {
      console.log("event triggered", event)
      // Reload when a new vote is recorded
      App.render();
    });
  });
}

这个函数功能做了一些事情。首先，我们通过调用votedEvent函数订阅投票事件。我们传递了一些元数据，告诉我们要听区块链上的所有事件。然后我们观察watch这个事件。在这里，我们会在触发votedEvent时随时登录控制台。我们还重新呈现页面上的所有内容。这将在记录投票完成后不再需要loader，并在表格上显示更新的投票计数。

最后，我们可以在初始化合约时调用此函数：

initContract: function() {
  $.getJSON("Election.json", function(election) {
    // Instantiate a new truffle contract from the artifact
    App.contracts.Election = TruffleContract(election);
    // Connect provider to interact with contract
    App.contracts.Election.setProvider(App.web3Provider);

    App.listenForEvents();

    return App.render();
  });
}

现在，你可以对你的客户端应用程序进行投票，并实时观看所记录的投票！请耐心等待，事件可能需要几秒钟才能触发。如果你没有看到事件，请尝试重新启动Chrome。Metamask事件存在一个已知问题。重新启动Chrome总是可以为我们修复它。

恭喜！你已经在以太坊区块链上成功构建了一个完整的去中心化应用程序！

======================================================================

分享一些比特币、以太坊、EOS、Fabric等区块链相关的交互式在线编程实战教程：

• java比特币开发教程，本课程面向初学者，内容即涵盖比特币的核心概念，例如区块链存储、去中心化共识机制、密钥与脚本、交易与UTXO等，同时也详细讲解如何在Java代码中集成比特币支持功能，例如创建地址、管理钱包、构造裸交易等，是Java工程师不可多得的比特币开发学习课程。
• php比特币开发教程，本课程面向初学者，内容即涵盖比特币的核心概念，例如区块链存储、去中心化共识机制、密钥与脚本、交易与UTXO等，同时也详细讲解如何在Php代码中集成比特币支持功能，例如创建地址、管理钱包、构造裸交易等，是Php工程师不可多得的比特币开发学习课程。
• c#比特币开发教程，本课程面向初学者，内容即涵盖比特币的核心概念，例如区块链存储、去中心化共识机制、密钥与脚本、交易与UTXO等，同时也详细讲解如何在C#代码中集成比特币支持功能，例如创建地址、管理钱包、构造裸交易等，是C#工程师不可多得的比特币开发学习课程。
• java以太坊开发教程，主要是针对java和android程序员进行区块链以太坊开发的web3j详解。
• python以太坊，主要是针对python工程师使用web3.py进行区块链以太坊开发的详解。
• php以太坊，主要是介绍使用php进行智能合约开发交互，进行账号创建、交易、转账、代币开发以及过滤器和交易等内容。
• 以太坊入门教程，主要介绍智能合约与dapp应用开发，适合入门。
• 以太坊开发进阶教程，主要是介绍使用node.js、mongodb、区块链、ipfs实现去中心化电商DApp实战，适合进阶。
• ERC721以太坊通证实战，课程以一个数字艺术品创作与分享DApp的实战开发为主线，深入讲解以太坊非同质化通证的概念、标准与开发方案。内容包含ERC-721标准的自主实现，讲解OpenZeppelin合约代码库二次开发，实战项目采用Truffle，IPFS，实现了通证以及去中心化的通证交易所。
• C#以太坊，主要讲解如何使用C#开发基于.Net的以太坊应用，包括账户管理、状态与交易、智能合约开发与交互、过滤器和交易等。
• EOS入门教程，本课程帮助你快速入门EOS区块链去中心化应用的开发，内容涵盖EOS工具链、账户与钱包、发行代币、智能合约开发与部署、使用代码与智能合约交互等核心知识点，最后综合运用各知识点完成一个便签DApp的开发。
• 深入浅出玩转EOS钱包开发，本课程以手机EOS钱包的完整开发过程为主线，深入学习EOS区块链应用开发，课程内容即涵盖账户、计算资源、智能合约、动作与交易等EOS区块链的核心概念，同时也讲解如何使用eosjs和eosjs-ecc开发包访问EOS区块链，以及如何在React前端应用中集成对EOS区块链的支持。课程内容深入浅出，非常适合前端工程师深入学习EOS区块链应用开发。
• Hyperledger Fabric 区块链开发详解，本课程面向初学者，内容即包含Hyperledger Fabric的身份证书与MSP服务、权限策略、信道配置与启动、链码通信接口等核心概念，也包含Fabric网络设计、nodejs链码与应用开发的操作实践，是Nodejs工程师学习Fabric区块链开发的最佳选择。
• Hyperledger Fabric java 区块链开发详解，课程面向初学者，内容即包含Hyperledger Fabric的身份证书与MSP服务、权限策略、信道配置与启动、链码通信接口等核心概念，也包含Fabric网络设计、java链码与应用开发的操作实践，是java工程师学习Fabric区块链开发的最佳选择。
• tendermint区块链开发详解，本课程适合希望使用tendermint进行区块链开发的工程师，课程内容即包括tendermint应用开发模型中的核心概念，例如ABCI接口、默克尔树、多版本状态库等，也包括代币发行等丰富的实操代码，是go语言工程师快速入门区块链开发的最佳选择。

汇智网原创翻译，转载请标明出处。这里是以太坊Dapp终极教程——如何构建一个完整的全栈去中心化应用