使用solidity+web3.js+matemask写一个投票DAPP2

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

接下来，我们就可以使用VS code 写truffle了

1、合约部署

var vote = artifacts.require("./vote.sol"); //使用我们上一篇写的合约
module.exports = function(deployer) {
  deployer.deploy(Election);
};

2、我们就可以搭建私链，也可以使用ganache模拟节点，或者直接使用以太坊测试链

<1>、搭建私链

1、去官网下载geth（傻瓜式操作）

geth.ethereum.org/

2、生成创世纪文件

//打开cmd，新建文件夹
mkdir  node
//进入文件夹，生成创世纪文件
输入命令 puppeth

然后根据提示来选择就行了

3、在node下创建子目录nodedata

4、在cmd命令行输入，初始化创世块

geth --datadir "./nodedata" --networkid 99998888 --rpc init ./geth.json

5、创建账户

geth --datadir "./nodedata" account new

6、新建一个password文件，里面存放的是账户密码

7、新建启动批处理文件startnode.bat （以下命令为一行）

geth --allow-insecure-unlock --unlock=0 --password ./password --networkid 99998888 --datadir "nodedata" --http --http.api "admin,debug,web3,eth,txpool,personal,ethash,miner,net" -- http.corsdomain="*" --http.port=8545 --http.addr="0.0.0.0" --port 30303 console

8、然后就私链就搭建成功了

ganache下载地址

trufflesuite.com/ganache/

sourceforge.net/projects/ga…

二选一，官网会比较慢一点。

连接小狐狸钱包 matemask

网络地址 id什么的看ganache就好了

truffle.js 配置文件，与ganache或者私链一致。

部署合约

truffle migrate

合约交互

1、初始化web3

  initWeb3: async function() {
    if (window.ethereum) {
      App.web3Provider = window.ethereum;
      try {
        await window.ethereum.enable();
      } catch (error) {
        console.error("User denied account access")
      }
    }
    else if (window.web3) {
      App.web3Provider = window.web3.currentProvider;
    }
    else {
      App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
    }
    web3 = new Web3(App.web3Provider);
    return App.initContract();
}

2、监听投票事件

listenForEvents: function() {    App.contracts.Election.deployed().then(function(instance) {
      instance.votedEvent({}, {
        fromBlock: 0,
        toBlock: 'latest'
      }).watch(function(error, event) {
        App.render();
      });
    });
  }

3、渲染前端，数据交互

  render: function() {
    var electionInstance;
    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);  // ❹
        });
      }
    }

启动服务就欧克了！！！！！

npm run dev