目录
这部分我遇到问题，没有走通，换版本重新写了一个，仅有借鉴意义
实现效果预览图
前提条件：安装包
包：
"ganache-cli": "^6.1.8",
"solc": "^0.4.25" // 之前用"solc"："^0.7.3",二者编译有好多不同，改了好多个问题，最后卡住没办法版本了
"web3": "^1.7.0"系统：
"ubuntu-20.04.4-desktop-amd64"
下面是基于 Linux 的安装指南。这里要求我们预先安装 nodejs 和 npm,再用 npm 安装 ganache、solc、web3 ,就可以继续项目的下一步了
simple_vote_dapp 文件夹 中安装以下环境
mkdir ~/桌面/simple_vote_dapp
cd ~/桌面/simple_vote_dapp
npm init
sudo npm install [email protected] [email protected] [email protected]如果安装成功，运行如下命令，应该能够看到如下的输出
~/桌面/simple_vote_dapp/node_modules/.bin/ganache-cli
新建一个contracts用来存放 sol 合约文件
mkdir ~/桌面/simple_vote_dapp/contracts目录结构
确保此时同时 ganache 已经在另一个窗口中运行
另起一个终端中，并在simple_vote_dapp目录下
运行 node 进入 node 控制台，初始化 web3 对象，并向区块链查询获取所有的账户。
nodevar Web3 = require('web3')
var web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
var accounts;
web3.eth.getAccounts().then((res)=>{accounts = res;console.log(accounts)});
简单投票 Dapp 设计流程
solidity 合约
我们设计一个叫做 Voting 的合约，这个合约有以下内容：
- 一个构造函数，用来初始化一些候选人
- 一个用来投票的方法(对投票数 + 1)
- 一个返回候选者所获得的总票数的方法
当你把合约部署到区块链的时候，就会调用构造函数，并只调用一次。与 web 世界里每次部署代码都会覆盖旧代码不同，在区块链上部署的合约是不可改变的，也就是说，如果你更新合约并再次部署，旧的合约仍然会在区块链上存在
创建 Voting.sol 合约
// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.4.25 <0.9.0;
contract Voting{
bytes32[] public candidateList;
mapping(bytes32 => uint8) public votesReceived;
constructor(bytes32[] memory candidateListName){
candidateList = candidateListName;
}
function validateCandidate(bytes32 candidateName) internal view returns(bool){
for (uint8 i = 0; i < candidateList.length; i++){
if(candidateName == candidateList[i]){
return true;
}
}
return false;
}
function vote(bytes32 candidateName) public{
require(validateCandidate(candidateName));
votesReceived[candidateName] += 1;
}
function totalVotesFor(bytes32 candidateName) public view returns(uint8){
require(validateCandidate(candidateName));
return votesReceived[candidateName];
}
}为了编译合约，先从 Voting.sol 中加载代码并绑定到一个 string 类型的变量
编译合约
在 node 控制台下
（1）导入 solc 和 fs
var solc = require('solc')
var fs = require('fs')（2）读取合约内容
var contractContent = fs.readFileSync('./contracts/Voting.sol', 'utf-8').toString()（3）编译合约代码
var contractCompiled = solc.compile(contractContent);（4）取abi 、byteCode
var abi = contractCompiled['contracts'][':Voting']['interface']
var byteCode = contractCompiled['contracts'][':Voting']['bytecode']部署合约
（1）创建Web3实例
var Web3 = require('web3')
var web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));（2）创建Contract对象
var contract = new web3.eth.Contract(JSON.parse(abi));（3）部署合约
var accounts;
web3.eth.getAccounts().then((res)=>{accounts = res;console.log(accounts)});
// 合约拥有者账户
var account = accounts[0];
var gasLimit = 3000000;
// 参数需要两个数组是因为 deploy 参数 arguments 本身接收的就是一个数组,用以接收多个数据,所以最外层是一个数组,里面的数组是我们 Voting合约构造函数定义的参数为 bytes32[]
// 因为构造函数参数定义为 bytes32[],所以我们需要传入 bytes32,而不能直接传入字符串
var argument = [[web3.utils.fromAscii('Alice'),web3.utils.fromAscii('Bob'),web3.utils.fromAscii('Cary')]]
// 或
// var argument = [["0x416c696365000000000000000000000000000000000000000000000000000000","0x426f620000000000000000000000000000000000000000000000000000000000","0x4361727900000000000000000000000000000000000000000000000000000000"]]
contract.deploy({
data:byteCode,
arguments:argument
}).send({
from:account,
gas:gasLimit,
}).then(instance => {
contractInstance = instance;
console.log("contract address:", instance.options.address)
})记下合约地址 contract address，后面修改 fontend-Voting.js 中的contract address 为你自己的
完整代码
var solc = require('solc')
var fs = require('fs')
var Web3 = require('web3')
var web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
var contractContent = fs.readFileSync('./contracts/Voting.sol', 'utf-8').toString()
var contractCompiled = solc.compile(contractContent);
var abi = contractCompiled['contracts'][':Voting']['interface']
var byteCode = contractCompiled['contracts'][':Voting']['bytecode']
var contract = new web3.eth.Contract(JSON.parse(abi));
var accounts;
web3.eth.getAccounts().then((res)=>{accounts = res;console.log(accounts)});
var account = accounts[0];
var gasLimit = 3000000;
var argument = [[web3.utils.fromAscii('Alice'),web3.utils.fromAscii('Bob'),web3.utils.fromAscii('Cary')]]
// 或
// var argument = [["0x416c696365000000000000000000000000000000000000000000000000000000","0x426f620000000000000000000000000000000000000000000000000000000000","0x4361727900000000000000000000000000000000000000000000000000000000"]]
contract.deploy({
data:byteCode,
arguments:argument
}).send({
from:account,
gas:gasLimit,
}).then(instance => {
contractInstance = instance;
console.log("contract address:", instance.options.address)
})调用合约方法
调用合约中的 vote 方法，投票给Alice
var voteTo = web3.utils.fromAscii('Alice')
contractInstance.methods.vote(voteTo).send({from:accounts[0]}).then(console.log)
查看候选人的所得票数
var aVoter = web3.utils.fromAscii('Alice')
contractInstance.methods.totalVotesFor(aVoter).call({from:accounts[0]}).then(res=>console.log(res))
前端页面HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Voting 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>Simple Voting DApp</h1>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<th>Candidate</th>
<th>Vote Count</th>
</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>
<input type="text" id="candidate" />
<a href="#" onclick="" class="btn btn-primary">Vote</a>
</div>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/ethereum/[email protected]/dist/web3.min.js"></script>
<script src="./fontend-Voting.js"></script>
</html>前端JS
方法一：获得合约地址和abi
solcjs --abi --bin Voting.sol
方法二：获得 abi
solc --abi --bin Voting.sol
let voteForCandidate;
let initial = async() => {
// 不需要先 var Web3 = require('web3'), 因为已经网络引入了
var web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
var abi = JSON.parse('[{"constant":true,"inputs":[{"name":"candidateName","type":"bytes32"}],"name":"totalVotesFor","outputs":[{"name":"","type":"uint8"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[],"name":"getLengthList","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"","type":"bytes32"}],"name":"votesReceived","outputs":[{"name":"","type":"uint8"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"tlength","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"candidateName","type":"bytes32"}],"name":"vote","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"},{"inputs":[{"name":"candidateListName","type":"bytes32[]"}],"payable":false,"stateMutability":"nonpayable","type":"constructor"}]')
var contractAddress = '使用你自己的，上面步骤中有输出';
var contractInstance = await new web3.eth.Contract(abi, contractAddress);
var accounts = await web3.eth.getAccounts();
console.log(accounts)
// 对应关系
var candidates = { "Alice": "candidate-1", "Bob": "candidate-2", "Cary": "candidate-3" };
(async() => {
var candidateList = Object.keys(candidates); // 拿出 candidates 中的 key 值
for (let i = 0; i < candidateList.length; i++) {
let name = candidateList[i];
let aVoter = await web3.utils.fromAscii(name)
let count = await contractInstance.methods.totalVotesFor(aVoter).call({ from: accounts[0] });
console.log('count=', count)
$("#" + candidates[name]).html(count)
}
})();
voteForCandidate = async() => {
var candidateName = $("#candidate").val()
try {
var voteTo = await web3.utils.fromAscii(candidateName)
contractInstance.methods.vote(voteTo).send({ from: accounts[0] }, async(err, res) => {
if (err) {
console.log("Error: ", err);
} else {
let id = candidates[candidateName];
var count = await contractInstance.methods.totalVotesFor(voteTo).call({ from: accounts[0] });
console.log(count)
$("#" + id).html(count);
}
})
} catch (err) {
console.log(err)
}
}
}
$(document).ready(function() {
initial();
});编写 server.js
在 fontend 目录下创建 server.js
var http = require('http');
var fs = require('fs');
var url = require('url');
// 创建服务器
let server = http.createServer( function (request, response) {
// 解析请求，包括文件名
var pathname = url.parse(request.url).pathname;
// 输出请求的文件名
console.log("Request for " + pathname + " received.");
// 从文件系统中读取请求的文件内容
fs.readFile(pathname.substr(1), function (err, data) {
if (err) {
console.log(err);
// HTTP 状态码: 404 : NOT FOUND
// Content Type: text/html
response.writeHead(404, {'Content-Type': 'text/html'});
}else{
// HTTP 状态码: 200 : OK
// Content Type: text/html
response.writeHead(200, {'Content-Type': 'text/html'});
// 响应文件内容
response.write(data.toString());
}
// 发送响应数据
response.end();
});
})
server.listen(8888, '0.0.0.0', () => {
console.log('Server running at http://0.0.0.0:8888/');
})执行 server.js
调用 server.js ，前提ganache-cli已经在后台启动，且 fontend-Voting.js 中的合约地址 contract address 是上面操作中新创建的
node server.js之后就可以在浏览器中打开前端页面，测试使用了
http://127.0.0.1:8888/fontend-Voting.html（没走通版本）简单投票 Dapp 设计流程
！！！！！！！！！
这部分我遇到问题，没有走通，换版本重新写了一个，仅有借鉴意义
包：
"ganache-cli": "^6.1.8",
"solc": "^0.7.3" // 走不通，换^0.4.25了
"web3": "^1.7.0"系统：
"ubuntu-20.04.4-desktop-amd64"
solidity 合约
我们设计一个叫做 Voting 的合约，这个合约有以下内容：
- 一个构造函数，用来初始化一些候选人
- 一个用来投票的方法(对投票数 + 1)
- 一个返回候选者所获得的总票数的方法
当你把合约部署到区块链的时候，就会调用构造函数，并只调用一次。与 web 世界里每次部署代码都会覆盖旧代码不同，在区块链上部署的合约是不可改变的，也就是说，如果你更新合约并再次部署，旧的合约仍然会在区块链上存在
创建 Voting.sol 合约
// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.4.25 <0.9.0;
contract Voting{
bytes32[] public candidateList;
mapping(bytes32 => uint8) public votesReceived;
constructor(bytes32[] memory candidateListName){
candidateList = candidateListName;
}
function validateCandidate(bytes32 candidateName) internal view returns(bool){
for (uint8 i = 0; i < candidateList.length; i++){
if(candidateName == candidateList[i]){
return true;
}
}
return false;
}
function vote(bytes32 candidateName) public{
require(validateCandidate(candidateName));
votesReceived[candidateName] += 1;
}
function totalVotesFor(bytes32 candidateName) public view returns(uint8){
require(validateCandidate(candidateName));
return votesReceived[candidateName];
}
}为了编译合约，先从 Voting.sol 中加载代码并绑定到一个 string 类型的变量
编译合约
在 node 控制台下
（1）导入 solc 和 fs
var solc = require('solc')
var fs = require('fs')（2）读取合约内容
var contractContent = fs.readFileSync('./contracts/Voting.sol', 'utf-8').toString()（3）编译合约代码
合约内容转化为 JSON 格式
var input = {
language: 'Solidity',
sources: {
contract: {
content: contractContent
}
},
settings: {
outputSelection: {
'*': {
'*': '*'
}
}
}
}
var contractCompiled = JSON.parse(solc.compile(JSON.stringify(input)));（4）取abi 和 byteCode
var contractCompliedContent = contractCompiled.contracts.contract.Voting;
var abi = contractCompliedContent.abi;
var byteCode = contractCompliedContent.evm.bytecode.object;部署合约
（1）创建Web3实例
var Web3 = require('web3')
var web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));（2）创建Contract对象
var contract = new web3.eth.Contract(abi);（3）部署合约
var accounts;
web3.eth.getAccounts().then((res)=>{accounts = res;console.log(accounts)});
// 合约拥有者的帐号
var account = accounts[0];
var gasLimit = 3000000;
// 参数需要两个数组是因为 deploy 参数 arguments 本身接收的就是一个数组,用以接收多个数据,所以最外层是一个数组,里面的数组是我们 Voting合约构造函数定义的参数为 bytes32[]
// 因为构造函数参数定义为 bytes32[],所以我们需要传入 bytes32,而不能直接传入字符串
var argument = [[web3.utils.fromAscii('Alice'),web3.utils.fromAscii('Bob'),web3.utils.fromAscii('Cary')]]
// 或
// var argument = [["0x7465737400000000000000000000000000000000000000000000000000000000","0x7465737400000000000000000000000000000000000000000000000000000000"]]
var contractInstance;
contract.deploy({
data:byteCode,
arguments:argument
}).send({
from:account,
gas:gasLimit,
}).then(instance => {
contractInstance = instance;
console.log("contract address:", instance.options.address)
})调用合约方法
之后我调用这 vote 合约方法走不通了，尝试了好多方法都不行
一直报错误 VM Exception while processing transaction: invalid opcode，如果有好心人知道，望告知
换成0.4.25版本 编译之后就可以了，猜测是因为上面 input 那步骤，因为换了0.4.25版本之后没有用到 input 步骤
具体原因暂时不知
contractInstance.methods.vote("0x416c6963650000000000000000000000").send({from:accounts[0]}).then(console.log)
运行外部网络访问
在 fontend文件夹下，创建 server.js 文件
var http = require('http');
var fs = require('fs');
var url = require('url');
// 创建服务器
let server = http.createServer( function (request, response) {
// 解析请求，包括文件名
var pathname = url.parse(request.url).pathname;
// 输出请求的文件名
console.log("Request for " + pathname + " received.");
// 从文件系统中读取请求的文件内容
fs.readFile(pathname.substr(1), function (err, data) {
if (err) {
console.log(err);
// HTTP 状态码: 404 : NOT FOUND
// Content Type: text/html
response.writeHead(404, {'Content-Type': 'text/html'});
}else{
// HTTP 状态码: 200 : OK
// Content Type: text/html
response.writeHead(200, {'Content-Type': 'text/html'});
// 响应文件内容
response.write(data.toString());
}
// 发送响应数据
response.end();
});
})
server.listen(8890, '0.0.0.0', () => {
console.log('Server running at http://0.0.0.0:8890/');
})将 server.js 放入云服务器上，执行以下命令
node server.js