不使用框架搭建投票Dapp

最新推荐文章于 2022-11-12 09:48:45 发布

algiz_kk

最新推荐文章于 2022-11-12 09:48:45 发布

阅读量310

点赞数

分类专栏：以太坊智能合约 solidity 区块链文章标签： dapp

本文链接：https://blog.csdn.net/qq_33657251/article/details/84592519

版权

区块链同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

智能合约

5 篇文章 0 订阅

订阅专栏

以太坊

2 篇文章 0 订阅

订阅专栏

一、开发环境

二、编写智能合约

pragma solidity ^0.5.0;

contract Voting {

  mapping (bytes32 => uint8) public votesReceived;

  bytes32[3] public candidateList;

  constructor() public {
    candidateList[0] = 'Rama';
    candidateList[1] = 'Nick';
    candidateList[2] = 'Jose';
  }

  function totalVotesFor(bytes32 candidate) view public returns (uint8) {
    require(validCandidate(candidate));
    return votesReceived[candidate];
  }

  function voteForCandidate(bytes32 candidate) public {
    require(validCandidate(candidate));
    votesReceived[candidate] += 1;
  }

  function validCandidate(bytes32 candidate) view public returns (bool) {
    for(uint i = 0; i < candidateList.length; i++) {
      if (candidateList[i] == candidate) {
        return true;
      }
    }
    return false;
  }
}

三、编译智能合约

四、开启本地节点

五、部署智能合约

选择web3 provider
点击deploy部署

部署成功后，复制下合约地址以及abi

六、web3.js与合约交互

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Hello World DApp</title>
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
</head>
<body class="container">
  <h1>A Simple Hello World Voting Application</h1>
  <div class="table-responsive">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Candidate</th>
          <th>Votes</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Rama</td>
          <td id="candidate-1"></td>
        </tr>
        <tr>
          <td>Nick</td>
          <td id="candidate-2"></td>
        </tr>
        <tr>
          <td>Jose</td>
          <td id="candidate-3"></td>
        </tr>
      </tbody>
    </table>
  </div>
  <input type="text" id="candidate" class="form-control" />
  <a href="#" onclick="voteForCandidate()" class="btn btn-primary">Vote</a>
</body>
<script src="./web3.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
//initialize web3
if (typeof web3 !== 'undefined') {
	web3 = new Web3(web3.currentProvider);
} else {
	web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
}

var abi = [
	{
		"inputs": [],
		"payable": false,
		"stateMutability": "nonpayable",
		"type": "constructor"
	},
	{
		"constant": false,
		"inputs": [
			{
				"name": "candidate",
				"type": "bytes32"
			}
		],
		"name": "voteForCandidate",
		"outputs": [],
		"payable": false,
		"stateMutability": "nonpayable",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [
			{
				"name": "",
				"type": "uint256"
			}
		],
		"name": "candidateList",
		"outputs": [
			{
				"name": "",
				"type": "bytes32"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [
			{
				"name": "candidate",
				"type": "bytes32"
			}
		],
		"name": "totalVotesFor",
		"outputs": [
			{
				"name": "",
				"type": "uint8"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [
			{
				"name": "candidate",
				"type": "bytes32"
			}
		],
		"name": "validCandidate",
		"outputs": [
			{
				"name": "",
				"type": "bool"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	},
	{
		"constant": true,
		"inputs": [
			{
				"name": "",
				"type": "bytes32"
			}
		],
		"name": "votesReceived",
		"outputs": [
			{
				"name": "",
				"type": "uint8"
			}
		],
		"payable": false,
		"stateMutability": "view",
		"type": "function"
	}
];
var addr = '0xbcb1a883448458557cc2634a68e1c3f0825b1933';
VotingContract=web3.eth.contract(abi);
contractInstance=VotingContract.at(addr);
candidates={"Rama":"candidate-1","Nick":"candidate-2","Jose":"candidate-3"};

function voteForCandidate() {
	candidateName=$("#candidate").val();
	contractInstance.voteForCandidate(candidateName,{from:web3.eth.accounts[0]},function(){
		let div_id=candidates[candidateName];
		$("#"+div_id).html(contractInstance.totalVotesFor.call(candidateName).toString());
	});
}

$(document).ready(function(){
	candidateNames=Object.keys(candidates);
	for(var i=0;i<candidateNames.length;i++){
			let name=candidateNames[i];
			let val=contractInstance.totalVotesFor.call(name).toString();
			$("#"+candidates[name]).html(val);
	}
});
</script>
</html>