[区块链&DAPP介绍 Day26] Dapp 实战投票系统 - 2

延续昨天没做完的议题，今天来把 js & html 补完，让变成一个完整的 Dapp

首先 html 的部分，请修改原本 app 底下的 index.html

<!DOCTYPE html>
<html>
<head>
  <title>活动票选</title>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
</head>
<body class="container">
<h1>活动票选</h1>
<div id="address"></div>
<div class="table-responsive">
  <table class="table table-bordered">
    <thead>
    <tr>
      <th>姓名</th>
      <th>票数</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>去烤肉</td>
      <td id="candidate-1"></td>
    </tr>
    <tr>
      <td>去逛街</td>
      <td id="candidate-2"></td>
    </tr>
    <tr>
      <td>去游泳</td>
      <td id="candidate-3"></td>
    </tr>
    </tbody>
  </table>
  <div id="msg"></div>
</div>
<input type="text" id="candidate" />
<a href="#" onclick="App.voteAction()" class="btn btn-primary">Vote</a>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="index.js"></script>
</html>

再来修改 index.js

import Web3 from "web3";
import voting_artifacts from '../../build/contracts/Voting.json'

let candidates = {"去烤肉": "candidate-1", "去逛街": "candidate-2", "去游泳": "candidate-3"}

const App = {
  web3: null,
  account: null,
  meta: null,

  start: async function () {
    const {web3} = this;

    try {
      这边做合约初始化的动作
      // get contract instance
      const networkId = await web3.eth.net.getId();
      const deployedNetwork = voting_artifacts.networks[networkId];
      //换成我们新增的 Voting 合约
      this.meta = new web3.eth.Contract(
        voting_artifacts.abi,
        deployedNetwork.address,
      );
      const accounts = await web3.eth.getAccounts();
      this.account = accounts[0];

      this.loadCurrentVoting();
    } catch (error) {
      console.error("Could not connect to contract or chain.");
    }
  },

  //查询目前票数
  loadCurrentVoting: async function (){

    let candidateNames = Object.keys(candidates);
    const { queryVotes } = this.meta.methods;

    for (var i = 0; i < candidateNames.length; i++) {
      let name = candidateNames[i];
      const v = await queryVotes(this.web3.utils.utf8ToHex(name)).call();
      $("#" + candidates[name]).html(v.toString());
    }
  },

  //投票
  voteAction: async function (){
    let name= $("#candidate").val()
    const { addVote } = this.meta.methods;
    await addVote(this.web3.utils.utf8ToHex(name)).send({ from: this.account });

    this.loadCurrentVoting();
  }
}

//这边是原本的程序码
window.App = App;

//此段意思是判断浏览器是否 ehterum的钱包，如果没有的话，直接直连区块链的位址
$(document).ready(function() {
  if (window.ethereum) {
    App.web3 = new Web3(window.ethereum);
    window.ethereum.enable(); //
  } else {
    console.warn(
        "No web3 detected. Falling back to http://127.0.0.1:7545. You should remove this fallback when you deploy live",
    );
    App.web3 = new Web3(
        new Web3.providers.HttpProvider("http://127.0.0.1:7545"),
    )
  }

  App.start();

});

接下来在原本的 app 目录里面，下下面语法