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

时间 2019-11-12

标签以太 dapp 终极教程如何构建一个完整中心应用繁體版

原文原文链接

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

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

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来增长候选者的投票计数。让咱们看看它作的其余一些事情：java

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

如今，你的完整合约代码应以下所示：node

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测试文件添加一个测试：python

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");
    })
  });

咱们想在这里测试两件事：android

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

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

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子字符串。而后咱们能够经过确保候选人没有获得任何投票来确保咱们的合约状态不变。程序员

如今让咱们编写一个测试来确保咱们防止双重投票：github

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老是能够为咱们修复它。

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

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

分享一些比特币、以太坊、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终极教程——如何构建一个完整的全栈去中心化应用