使用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(傻瓜式操作)

https://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下载地址

https://trufflesuite.com/ganache/

https://sourceforge.net/projects/ganache.mirror/

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

连接小狐狸钱包 matemask

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

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

部署合约

```控制台(cmd) 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