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

笔阁

发布于 2019-06-01 14:28:08

5530

发布于 2019-06-01 14:28:08

在以太坊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文件中的表格下方投票：

<form onSubmit="App.castVote(); return false;">
  <div class="form-group">
    <label for="candidatesSelect">Select Candidate</label>
    <select class="form-control" id="candidatesSelect">
    </select>
  </div>
  <button type="submit" class="btn btn-primary">Vote</button>
  <hr />
</form>

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

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 = "<tr><th>" + id + "</th><td>" + name + "</td><td>" + voteCount + "</td></tr>"
        candidatesResults.append(candidateTemplate);

        // Render candidate ballot option
        var candidateOption = "<option value='" + id + "' >" + name + "</ option>"
        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元数据。这将是异步调用。完成后，我们将显示加载程序并隐藏页面内容。无论何时记录投票，我们都会做相反的事情，再次向用户显示内容。

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

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

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

查看事件

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

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总是可以为我们修复它。

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

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

汇智网原创翻译，转载请标明出处。

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

区块链

腾讯云测试服务

编程算法

javascript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度