简单投票dapp从solidity到前端javascript与html
时间: 2024-01-10 13:03:23 浏览: 122
Solidity+Web3.js实现的投票系统源码.zip
这里提供一个简单投票dapp的实现步骤,包括solidity的编写、智能合约的部署、前端JavaScript和HTML的实现。
1. Solidity代码
首先,我们需要编写一个solidity合约来实现投票功能。以下是一个简单的投票合约:
```
pragma solidity ^0.8.0;
contract Voting {
mapping (bytes32 => uint8) public votesReceived;
bytes32[] public candidateList;
constructor(bytes32[] memory candidateNames) {
candidateList = candidateNames;
}
function voteForCandidate(bytes32 candidate) public {
require(validCandidate(candidate));
votesReceived[candidate] += 1;
}
function totalVotesFor(bytes32 candidate) public view returns (uint8) {
require(validCandidate(candidate));
return votesReceived[candidate];
}
function validCandidate(bytes32 candidate) public view returns (bool) {
for(uint i = 0; i < candidateList.length; i++) {
if(candidateList[i] == candidate) {
return true;
}
}
return false;
}
}
```
该合约包括一个候选人列表,以及一个投票功能。候选人列表作为构造函数的参数传入,投票功能接受一个候选人的名称,如果该名称在候选人列表中,就将该候选人的投票数加一。
2. 部署智能合约
我们需要将该合约部署到以太坊网络上,以便我们在dapp中使用。可以使用Remix等工具来编译和部署智能合约。
3. 前端JavaScript和HTML代码
接下来,我们需要使用JavaScript和HTML来构建一个简单的前端界面,以便用户可以在网页上进行投票。
以下是一个简单的HTML代码,它包括一个表单,可以让用户输入投票的候选人名称:
```
<!DOCTYPE html>
<html>
<head>
<title>Voting Dapp</title>
</head>
<body>
<h1>Voting Dapp</h1>
<form>
<label for="candidate">Candidate:</label>
<input type="text" id="candidate" name="candidate"><br><br>
<input type="button" value="Vote" onclick="vote()">
</form>
<div id="result"></div>
<script src="web3.min.js"></script>
<script src="voting.js"></script>
</body>
</html>
```
在该HTML页面中,我们引入了web3.js库和voting.js脚本。web3.js库可以让我们与以太坊网络进行交互,voting.js脚本则包含了与智能合约交互的代码。
以下是一个简单的JavaScript代码,它通过web3.js库连接到以太坊网络,并与智能合约进行交互:
```
var web3 = new Web3(Web3.givenProvider);
var contractInstance;
$(document).ready(function() {
contractInstance = new web3.eth.Contract(abi, contractAddress);
});
function vote() {
var candidate = $("#candidate").val();
contractInstance.methods.voteForCandidate(web3.utils.asciiToHex(candidate)).send({from: eth.accounts[0]})
.then(function() {
return contractInstance.methods.totalVotesFor(web3.utils.asciiToHex(candidate)).call();
})
.then(function(result) {
$("#result").html("Total votes for " + candidate + ": " + result);
});
}
```
该代码首先使用web3.js库创建一个web3实例,并通过智能合约的abi和地址创建了一个contractInstance。然后,当用户点击“投票”按钮时,它会获取用户输入的候选人名称,并调用智能合约的voteForCandidate方法。投票完成后,该代码还会调用智能合约的totalVotesFor方法,以获取该候选人的总票数,并将其显示在页面上。
综上所述,我们可以通过上述代码实现一个简单的投票dapp。当然,这只是一个简单的示例,实际上在实现一个完整的dapp时,还需要考虑安全性、用户体验、性能等方面的问题。
阅读全文