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

<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({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏魏晓蕾的专栏

区块链和物联网结合的挑战和前景

传统的物联网模式是由一个中心化的数据中心来负责收集各连接的设备信息,但是这种方式在生命周期成本和收入方面有着严重的缺陷。

11310
来自专栏数商云贸

区块链如何帮助B2B企业创造更多价值?

区块链是数字货币背后的底层技术,由于其运作的分布式数据结构,它将比任何组织结构都更为透明、更有公信力。由于数字货币无法携带或触摸,区块链的存在使得它们能够交易、...

13640
来自专栏素质云笔记

笔记︱金融风险控制基础常识——巴塞尔协议+信用评分卡Fico信用分

巴塞尔协议Ⅲ是全球银行业监管的标杆,其出台必将引发国际金融监管准则的调整和重组,影响银行的经营模式和发展战略。在巴塞尔协议Ⅲ出台之际,中国银监会及时推出了四大监...

12310
来自专栏孟永辉

告别中本聪式的颠覆,区块链正成为互联网的“优化大师”

人们对于区块链的认识或许是从数字货币开始的,所以,即使在数字货币被监管的大背景下,许多区块链的玩家们始终都没有放弃将区块链技术应用到发币或ICO的尝试。但,这始...

10730
来自专栏数商云贸

区块链+供应链,如何化身需求链,提高供应链效率?

“区块链 +”的革命已在医疗、金融、智能制造等行业拉开帷幕,无疑也会对供应链产生重要影响。供应链管理和供应链金融,由于市场规模足够大,满足多信任主体、多方协作、...

19540
来自专栏比特书生

未来数字银行:KCASH与其打造的数字生态

随着数字货币行业发展,越来越多的币种,越来越多的idea被生产出来,随之而来的也有越来越多的问题。试想数千万种数字货币(有专家指出未来每个细分行业都会出现行业数...

12560
来自专栏foochane

以太坊搭建私有链

在以太坊上部署智能合约、发起交易需要花费以太币。而私链和公有链没有关系,不用同步大量的数据,也不用花钱购买以太币,可以很好的满足智能合约的开发和测试要求,而且在...

15440
来自专栏比原链

Bystack的高TPS共识算法

共识算法是分布式系统保证节点数据状态一致性的方法,在区块链的共识算法分POW(工作量证明)和POS(权益证明)两大类。第一类POW模式是在公链项目中运用的最广泛...

12620
来自专栏JAVA葵花宝典

GitHub遭攻击!黑客给出十天限期:不交比特币赎金,就公开用户私有代码

就在五一假期的最后一天,一些程序员查看自己托管到GitHub上的代码时发现,他们的源代码和Repo都已消失不见,取而代之的是黑客留下的一封勒索信!

13940
来自专栏ccf19881030的博客

CString转换成const char*的一种有效方法

在Visual Studio 200X下,CString直接转换成const char* 有点困难,下面是自己用的一种可行方案:

38220

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励