“Web3”指的是“基于区块链的去中心化在线生态系统”。 2021 年，Web3 的想法开始流行。到 2021 年底，特别兴趣激增，这主要是由于加密货币爱好者的兴趣以及知名技术专家和公司的投资
Web3 的核心显着特征是商业模式的去中心化。从这个意义上说，它标志着互联网的第三阶段（因此称为“Web3”）和用户当前现状的逆转。
Web3 是下一次迭代，它可能会颠覆这种权力结构，将其转移回用户。开放标准和协议可以回归。其目的是控制不再集中在大型平台和聚合器中，而是通过“无需许可”的去中心化区块链和智能合约广泛分布。
这在实践中意味着什么？从本质上讲，它可以通过将去中介化作为核心要素，标志着数字应用商业模式的范式转变。在数据、功能和价值方面可能不再需要中介。用户和创作者可以占据上风，并且通过开源而不是专有应用程序，将有动力进行创新、测试、构建和扩展。
HTML的代码如下：
<html>
<head>
<title>Hello World DApp</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>A Simple 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>Alice</td>
<td id="candidate-1"></td>
</tr>
<tr>
<td>Bob</td>
<td id="candidate-2"></td>
</tr>
<tr>
<td>Cary</td>
<td id="candidate-3"></td>
</tr>
</tbody>
</table>
</div>
<input type="text" id="candidate" />
<a href="#" onclick="voteForCandidate()" class="btn btn-primary">Vote</a>
</body>
<script src="https://cdn.jsdelivr.net/npm/web3@0.20.1/dist/web3.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="./app.js"></script>
</html>
再新建一个js文件命名为app.js，js代码如下：
abi = JSON.parse('[{"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"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"candidateList","outputs":[{"name":"","type":"bytes32"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"candidate","type":"bytes32"}],"name":"voteForCandidate","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"inputs":[{"name":"candidateNames","type":"bytes32[]"}],"payable":false,"stateMutability":"nonpayable","type":"constructor"}]')
VotingContract = web3.eth.contract(abi);
//部署的合约地址
contractInstance = VotingContract.at('0xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
candidates = {"Alice": "candidate-1","Bob": "candidate-2","Cary":"candidate-3"}
function voteForCandidate() {
console.log(candidate);
candidateName = $("#candidate").val();
console.log(candidateName);
contractInstance.voteForCandidate(candidateName, {from: web3.eth.accounts[0]}, function() {
let div_id = candidates[candidateName];
console.log(contractInstance.totalVotesFor.call(candidateName).toString());
$("#" + div_id).html(contractInstance.totalVotesFor.call(candidateName).toString());
});
console.log(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);
}
});
