1、背景介绍

        上一节讲了使用NodeJs创建投票DApp应用，可见：

         以太坊区块链使用NodeJs、Web3开发投票DApp过程示例

        主要讲了使用NodeJs创建投票DApp应用，是非常基础的一些操作，包括编译和部署都是使用web3最基础的方法，这有助于加深对基础知识的了解，现在对此实例进行升级，使用Truffle开发框架，并添加通证进行改造，改造后的投票DApp功能主要为：每个投票者需要先使用以太币购买投票通证，购买的越多则可以投票的数量也就越多，相当于股票 所拥有的股票越多，则在董事会的投票权也就越多。

        提供网页操作，可以查看自己当前对每个人的投票数量，已经自己剩余的投票数，开发完成后效果预览如下：

2、环境准备

        准备开发前需要准备如下工作

• 本地环境安装最新版本NodeJS
• 熟悉Truffle框架的基本操作
• 本地环境安装Ganache模拟节点环境
• 熟悉web3常见API

        新建目录 Voting-Truffle-Token 作为工作目录。

        在此目录下使用 Truffle 初始化 webpack模板，在contracts 目录下删除原有的 ConvertLib.sol、MetaCoin.sol两个文件。

3、智能合约编写

        在contracts目录中新建 Voting.sol 合约文件，并在Remix环境中进行编写，编写完成后内容如下：

pragma solidity ^0.4.18;   // 使用通证改造后的投票DApp // 2018/05/04 // Ruoli contract Voting {     //-------------------------------------------------------------------------   //存储每个投票人的信息   struct voter {     address voterAddress; //投票人账户地址     uint tokensBought;//投票人持有的投票通证数量     uint[] tokensUsedPerCandidate;//为每个候选人消耗的股票通证数量   }   //投票人信息   mapping (address => voter) public voterInfo;   //-------------------------------------------------------------------------     //每个候选人获得的投票   mapping (bytes32 => uint) public votesReceived;   //候选人名单   bytes32[] public candidateList;    //发行的投票通证总量   uint public totalTokens;    //投票通证剩余数量   uint public balanceTokens;   //投票通证单价   uint public tokenPrice;    //构造方法，合约部署时执行一次， 初始化投票通证总数量、通证单价、所有候选人信息   constructor(uint tokens, uint pricePerToken, bytes32[] candidateNames) public {     candidateList = candidateNames;     totalTokens = tokens;     balanceTokens = tokens;     tokenPrice = pricePerToken;   }    //购买投票通证，此方法使用 payable 修饰，在Sodility合约中，   //只有声明为payable的方法， 才可以接收支付的货币（msg.value值）   function buy() payable public returns (uint) {     uint tokensToBuy = msg.value / tokenPrice;         //根据购买金额和通证单价，计算出购买量     require(tokensToBuy <= balanceTokens);             //继续执行合约需要确认合约的通证余额不小于购买量     voterInfo[msg.sender].voterAddress = msg.sender;   //保存购买人地址     voterInfo[msg.sender].tokensBought += tokensToBuy; //更新购买人持股数量     balanceTokens -= tokensToBuy;                      //将售出的通证数量从合约的余额中剔除     return tokensToBuy;                                //返回本次购买的通证数量   }    //获取候选人获得的票数   function totalVotesFor(bytes32 candidate) view public returns (uint) {     return votesReceived[candidate];   }    //为候选人投票，并使用一定数量的通证表示其支持力度   function voteForCandidate(bytes32 candidate, uint votesInTokens) public {     //判断被投票候选人是否存在     uint index = indexOfCandidate(candidate);     require(index != uint(-1));     //初始化 tokensUsedPerCandidate     if (voterInfo[msg.sender].tokensUsedPerCandidate.length == 0) {       for(uint i = 0; i < candidateList.length; i++) {         voterInfo[msg.sender].tokensUsedPerCandidate.push(0);       }     }      //验证投票人的余额是否足够（购买总额-已花费总额>0）     uint availableTokens = voterInfo[msg.sender].tokensBought -  totalTokensUsed(voterInfo[msg.sender].tokensUsedPerCandidate);     require (availableTokens >= votesInTokens);      votesReceived[candidate] += votesInTokens;     voterInfo[msg.sender].tokensUsedPerCandidate[index] += votesInTokens;   }    // 计算 投票人总共花费了多少 投票通证   function totalTokensUsed(uint[] _tokensUsedPerCandidate) private pure returns (uint) {     uint totalUsedTokens = 0;     for(uint i = 0; i < _tokensUsedPerCandidate.length; i++) {      totalUsedTokens += _tokensUsedPerCandidate[i];     }     return totalUsedTokens;   }    //获取候选人的下标   function indexOfCandidate(bytes32 candidate) view public returns (uint) {     for(uint i = 0; i < candidateList.length; i++) {      if (candidateList[i] == candidate) {       return i;      }     }     return uint(-1);   }   //方法声明中的 view 修饰符，这表明该方法是只读的,即方法的执行    //并不会改变区块链的状态，因此执行这些交易不会耗费任何gas   function tokensSold() view public returns (uint) {     return totalTokens - balanceTokens;   }    function voterDetails(address user) view public returns (uint, uint[]) {     return (voterInfo[user].tokensBought, voterInfo[user].tokensUsedPerCandidate);   }    //将合约里的资金转移到指定账户   function transferTo(address account) public {     account.transfer(this.balance);   }    function allCandidates() view public returns (bytes32[]) {     return candidateList;   } } 

        修改migrations/2_deploy_contracts.js 文件，内容如下：

var Voting = artifacts.require("./Voting.sol");  module.exports = function(deployer) { 	//初始化合约，提供10000个投票通证，每隔通证单价 0.01 ether，候选人为 'Rama', 'Nick', 'Jose' 	deployer.deploy(Voting,10000, web3.toWei('0.01', 'ether'), ['Rama', 'Nick', 'Jose']); }; 

        至此合约的编写完成。

4、智能合约编译

        执行 truffle compile 命令进行编译操作，如下：

PS C:\Workspace\Ruoli-Code\Voting-Truffle-Token> truffle compile Compiling .\contracts\Migrations.sol... Compiling .\contracts\Voting.sol...  Compilation warnings encountered:  /C/Workspace/Ruoli-Code/Voting-Truffle-Token/contracts/Migrations.sol:11:3: Warning: Defining constructors as functions with the same name as the contract is deprecated. Use "constructor(...) { ... }" instead.   function Migrations() public {   ^ (Relevant source part starts here and spans across multiple lines). ,/C/Workspace/Ruoli-Code/Voting-Truffle-Token/contracts/Voting.sol:104:22: Warning: Using contract member "balance" inherited from the address type is deprecated. Convert the contract to "address" type to access the member, for example use "address(contract).balance" instead.     account.transfer(this.balance);                      ^----------^  Writing artifacts to .\build\contracts

       没有提示错误，编译成功，在当前目录下出现了build目录。

5、合约的部署与测试

        部署前需要先启动 Ganache模拟节点，并且修改 truffle.js 文件，内容如下：

// Allows us to use ES6 in our migrations and tests. require('babel-register')  module.exports = {   networks: {     development: {       host: '127.0.0.1',       port: 7545,       network_id: '*' // Match any network id     }   } } 

       执行truffle deploy 进行部署操作，如下：

PS C:\Workspace\Ruoli-Code\Voting-Truffle-Token> truffle deploy Using network 'development'.  Running migration: 1_initial_migration.js   Deploying Migrations...   ... 0x6b327c157804151269c5db193507a51a2cff40f64f81bd39ee3bcc567e6d93ce   Migrations: 0xb81237dd01159a36a5ac3c760d227bbafe3341ea Saving successful migration to network...   ... 0xc5be542ec02f5513ec21e441c54bd31f0c86221da26ed518a2da25c190faa24b Saving artifacts... Running migration: 2_deploy_contracts.js   Deploying Voting...   ... 0xf836862d3fccbbd971ea61cca1bb41fe25f4665b80ac6c2498396cfeb1633141   Voting: 0x6ba286f3115994baf1fed1159e81f77c9e1cd4fa Saving successful migration to network...   ... 0xc8d5533c11181c87e6b60d4863cdebb450a2404134aea03a573ce6886905a00b Saving artifacts... PS C:\Workspace\Ruoli-Code\Voting-Truffle-Token>

        查看Ganache中第一个账户的以太币余额略有减少，说明部署成功，下面编写测试代码对合约进行测试，在test目录先删除原有的所有文件，新建 TestVoting.js 文件，内容如下：

var Voting = artifacts.require("./Voting.sol");  contract('Voting',(accounts) => {   it("投票合约应该有10000个预售投票通证", function() {     return Voting.deployed().then(function(instance) {       return instance.totalTokens.call();     }).then((balance)=>{       assert.equal(balance.valueOf(), 10000, "10000个预售投票通证 不符合预期 :"+balance.valueOf());     });   });    it("投票合约已经售出的投票通证应该为0", function() {      return Voting.deployed().then(function(instance) {       return instance.tokensSold.call();     }).then((balance)=>{       assert.equal(balance.valueOf(), 0, "投票合约已经售出的投票通证数量 不符合预期 :"+balance.valueOf());     });   });    it("购买 100个通证，总价值 1 ether ", function() {      return Voting.deployed().then(function(instance) {       return instance.buy.call({value:web3.toWei('1', 'ether')});     }).then((balance)=>{       assert.equal(balance.valueOf(), 100, "购买100个通证 不符合预期 :"+balance.valueOf());     });   });    it("投票合约已经售出的投票通证应该为100", function() {      return Voting.deployed().then(function(instance) {       return instance.tokensSold.call();     }).then((balance)=>{       assert.equal(balance.valueOf(), 100, "投票合约已经售出的投票通证应该为100 不符合预期 :"+balance.valueOf());     });   }); });

在根目录执行 truffle test 即可针对此单元测试文件进行测试，如下图：

PS C:\Workspace\Ruoli-Code\Voting-Truffle-Token> truffle test Using network 'development'.      Contract: Voting     √ 投票合约应该有10000个预售投票通证     √ 投票合约已经售出的投票通证应该为0     √ 购买 100个通证，总价值 1 ether     1) 投票合约已经售出的投票通证应该为100     > No events were emitted     3 passing (161ms)   1 failing    1) Contract: Voting 投票合约已经售出的投票通证应该为100:      AssertionError: 投票合约已经售出的投票通证应该为100 不符合预期 :0: expected '0' to equal 100       at C:/Workspace/Ruoli-Code/Voting-Truffle-Token/test/TestVoting.js:33:14       at <anonymous>       at process._tickCallback (internal/process/next_tick.js:188:7)

        至此，测试完成。

6、前端网页编写

在app目录新建 index.html ，内容如下：

<!DOCTYPE html> <html> <head>  <title>Decentralized Voting App</title>   <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" >   <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>   <style type="text/css">     hr{     margin-top: 7px;     margin-bottom: 7px;     }   </style> </head> <body class="row">  <h3 class="text-center banner">去中心化投票应用   <span class="glyphicon glyphicon-question-sign" style="font-size: 20px;color: #a1a1a1"></span> </h3> <hr>  <div class="container">   <div class="row margin-top-3">    <div class="col-sm-6">     <h4>候选人信息</h4>     <div class="table-responsive">      <table class="table table-bordered">       <thead>        <tr>         <th>姓名</th>         <th>得票数</th>        </tr>       </thead>       <tbody id="candidate-rows">       </tbody>      </table>     </div>    </div>    <div class="col-sm-offset-1 col-sm-5">     <h4>通证信息</h4>     <div class="table-responsive">      <table class="table table-bordered">       <tr>        <th>通证项</th>        <th>值</th>       </tr>       <tr>        <td>当前在售通证</td>        <td id="tokens-total"></td>       </tr>       <tr>        <td>已售出通证</td>        <td id="tokens-sold"></td>       </tr>       <tr>        <td>通证单价</td>        <td id="token-cost"></td>       </tr>       <tr>        <td>合约账户余额</td>        <td id="contract-balance"></td>       </tr>      </table>     </div>    </div>   </div>   <hr>   <div class="row margin-bottom-3">    <div class="col-sm-6 form">     <h4>参与投票</h4>     <div class="alert alert-success" role="alert" id="msg" style="display: none;">投票成功，已更新得票总数</div>     <input type="text" id="candidate" class="form-control" placeholder="候选人名称"/>     <br>     <input type="text" id="vote-tokens" class="form-control" placeholder="投票通证数量"/>     <br>     <a href="#" id="voter-send"  class="btn btn-primary">发起投票</a>    </div>    <div class="col-sm-offset-1 col-sm-5">     <div class="col-sm-12 form">      <h4>购买投票通证</h4>      <div class="alert alert-success" role="alert" id="buy-msg" style="display: none;">购买成功，已更新通证数据</div>      <div class="input-group">       <input type="text" class="form-control" id="buy" placeholder="请输入购买通证数量">       <span class="input-group-addon btn btn-primary" id="voter_buyTokens" onclick="buyTokens()">确认购买</span>       </div>     </div>     <div class="col-sm-12 margin-top-3 form">      <h4 class="">查看投票人信息</h4>    <!--   <input type="text" id="voter-info", class="col-sm-8" placeholder="请输入投票人地址" />       &nbsp;<a href="#" onclick="lookupVoterInfo(); return false;" class="btn btn-primary">查看</a> -->      <div class="input-group">       <input type="text" class="form-control" id="voter-info" placeholder="请输入投票人地址">       <span class="input-group-addon btn btn-primary" id='voter-lookup-btn'>查&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;看</span>       </div>       <div class="voter-details row text-left">       <div id="tokens-bought" class="margin-top-3 col-md-12"></div>       <div id="votes-cast" class="col-md-12"></div>      </div>     </div>    </div>   </div>  </div> </body> <script src="./app.js"></script> </html>

在 app/javascripts 目录下新建 app.js ，内容如下：

// Import the page's CSS. Webpack will know what to do with it. //import "../stylesheets/app.css";  // Import libraries we need. import { default as Web3} from 'web3'; import { default as contract } from 'truffle-contract'  import voting_artifacts from '../../build/contracts/Voting.json'  let Voting = contract(voting_artifacts);  let candidates = {}  let tokenPrice = null;   function populateCandidates() {   Voting.deployed().then((contractInstance) => {     //查询所有候选人     contractInstance.allCandidates.call().then((candidateArray) => {       for(let i=0; i < candidateArray.length; i++) {         candidates[web3.toUtf8(candidateArray[i])] = "candidate-" + i;       }       setupCandidateRows();       populateCandidateVotes();       populateTokenData();     });  }); }  function populateCandidateVotes() {  let candidateNames = Object.keys(candidates);  for (var i = 0; i < candidateNames.length; i++) {   let name = candidateNames[i];   Voting.deployed().then(function(contractInstance) {    contractInstance.totalVotesFor.call(name).then(function(v) {     $("#" + candidates[name]).html(v.toString());    });   });  } }  function setupCandidateRows() {  Object.keys(candidates).forEach( (candidate) => {    $("#candidate-rows").append("<tr><td>" + candidate + "</td><td id='" + candidates[candidate] + "'></td></tr>");  }); }  function populateTokenData() {  Voting.deployed().then(function(contractInstance) {   contractInstance.totalTokens().then(function(v) {    $("#tokens-total").html(v.toString());   });   contractInstance.tokensSold.call().then(function(v) {    $("#tokens-sold").html(v.toString());   });   contractInstance.tokenPrice().then(function(v) {    tokenPrice = parseFloat(web3.fromWei(v.toString()));    $("#token-cost").html(tokenPrice + " Ether");   });   web3.eth.getBalance(contractInstance.address, function(error, result) {    $("#contract-balance").html(web3.fromWei(result.toString()) + " Ether");   });  }); }  //初始化加载 $( document ).ready(function() {  if (typeof web3 !== 'undefined') {   console.warn("Using web3 detected from external source like Metamask")   // Use Mist/MetaMask's provider   window.web3 = new Web3(web3.currentProvider);  } else {   window.web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:7545"));  }   Voting.setProvider(web3.currentProvider);  populateCandidates();    //初始化查看投票人事件   $("#voter-lookup-btn").click(() => {     let address = $("#voter-info").val();     Voting.deployed().then((contractInstance) => {       //获取投票人信息       contractInstance.voterDetails.call(address).then( (v) => {         $("#tokens-bought").html("<br>总共购买投票通证数量: " + v[0].toString());         let votesPerCandidate = v[1];         $("#votes-cast").empty();         $("#votes-cast").append("通证已经用于投票记录如下： <br>");         let table_data="<table class='table table-striped table-bordered table-condensed'>";         let allCandidates = Object.keys(candidates);         for(let i=0; i < allCandidates.length; i++) {           table_data+="<tr><td>"+allCandidates[i]+"</td><td>"+votesPerCandidate[i]+"</td></tr>";         }         table_data+="</table>";         $("#votes-cast").append(table_data);     });    });   });    //发起投票操作事件   $("#voter-send").click(() => {     let candidateName = $("#candidate").val(); //获取被投票的候选人     let voteTokens = $("#vote-tokens").val();  //获取票数     $("#candidate").val("");     $("#vote-tokens").val("");      Voting.deployed().then( (contractInstance) => {       contractInstance.voteForCandidate(candidateName, voteTokens, {gas: 140000, from: web3.eth.accounts[1]}).then( () => {         let div_id = candidates[candidateName];         return contractInstance.totalVotesFor.call(candidateName).then( (v) => {           //更新候选人票数           $("#" + div_id).html(v.toString());           $("#msg").fadeIn(300);           setTimeout(() => $("#msg").fadeOut(1000),1000);         });       });      });   });    //绑定购买通证事件   $("#voter_buyTokens").click(() => {      let tokensToBuy = $("#buy").val();      let price = tokensToBuy * tokenPrice;      Voting.deployed().then(function(contractInstance) {       contractInstance.buy({value: web3.toWei(price, 'ether'), from: web3.eth.accounts[1]}).then(function(v) {                 web3.eth.getBalance(contractInstance.address, function(error, result) {           $("#contract-balance").html(web3.fromWei(result.toString()) + " Ether");         });          $("#buy-msg").fadeIn(300);         setTimeout(() => $("#buy-msg").fadeOut(1000),1000);               })      });      populateTokenData();   });  });

添加完成这连个文件，前端页面开发完成

7、页面测试

在根目录输入 npm run dev 启动此工程，如下：

> truffle-init-webpack@0.0.2 dev C:\Workspace\Ruoli-Code\Voting-Truffle-Token > webpack-dev-server  Project is running at http://localhost:8081/ webpack output is served from / Hash: 311e234883b64483e595 Version: webpack 2.7.0 Time: 1322ms      Asset     Size  Chunks                    Chunk Names     app.js  1.79 MB       0  [emitted]  [big]  main index.html   3.5 kB          [emitted] chunk    {0} app.js (main) 1.77 MB [entry] [rendered]    [71] ./app/javascripts/app.js 4.68 kB {0} [built]    [72] (webpack)-dev-server/client?http://localhost:8081 7.93 kB {0} [built]    [73] ./build/contracts/Voting.json 163 kB {0} [built]   [109] ./~/loglevel/lib/loglevel.js 7.86 kB {0} [built]   [117] ./~/strip-ansi/index.js 161 bytes {0} [built]   [154] ./~/truffle-contract-schema/index.js 5.4 kB {0} [built]   [159] ./~/truffle-contract/index.js 2.64 kB {0} [built]   [193] ./~/url/url.js 23.3 kB {0} [built]   [194] ./~/url/util.js 314 bytes {0} [built]   [195] ./~/web3/index.js 193 bytes {0} [built]   [229] (webpack)-dev-server/client/overlay.js 3.67 kB {0} [built]   [230] (webpack)-dev-server/client/socket.js 1.08 kB {0} [built]   [231] (webpack)/hot nonrecursive ^\.\/log$ 160 bytes {0} [built]   [232] (webpack)/hot/emitter.js 77 bytes {0} [built]   [233] multi (webpack)-dev-server/client?http://localhost:8081 ./app/javascripts/app.js 40 bytes {0} [built]      + 219 hidden modules webpack: Compiled successfully. 

启动完成后，在浏览器中访问 http://localhost:8081/ ，即可看到页面最开始展示的效果，可以用于购买通证，发起投票以及查看每个账户的投票记录信息。

由于是使用Ganache中第一个账户进行部署的合约，上述代码中是使用 Ganache第二个账户进行购买通证及发起投票的，所以在打开Ganache主页，即可发现由于购买通证，第二个账户的以太币已经减少，但为什么减少的以太币没有转入第一个账户，这个需要进行一下合约账户余额转出操作，对应合约中的 transferTo 方法，此处没有调用。