非常實用的一篇參考https://blog.csdn.net/weixin_45629315/article/details/113469323已經(jīng)非常詳細（下面簡稱它教程），操作簡單，但是對于完全沒有接觸過Dapp開發(fā)、從來沒有使用過Remix/Ganache/solidity的程序員來說，仍然不清楚某些操作具體怎樣做，所以這里通過截圖補充的再詳細一些~
1. 打開windows的開發(fā)者模型
不知道這一步是否有用，之前由于別的項目打開windows的開發(fā)者模式了，可能對它有幫助
2. 火狐瀏覽器加載MetaMask插件
下面這張圖紅框標注的是“移除”，因為我已經(jīng)加載過MetaMask工具了，如果沒有安裝過MetaMask插件，那么紅框位置是一個“加載”按鈕
3. 登錄MetaMask
- 新建賬號
首次登錄MetaMask有兩個選項，一個是新建賬號，一個是導入賬號，我點了新建賬戶，一路next下去，一定要記下來助記詞（這也是MetaMask還是以太坊還是區(qū)塊鏈還是Web3比較特別的地方，它們不是用密碼、驗證碼登錄的是，是用助記詞登錄，一旦創(chuàng)建了賬號就不能被銷毀~），助記詞是12個英文單詞。接下來，可以新建一個Account賬戶（這個Account賬戶也是一旦建立不能被銷毀的），一定要記下來它的Key（私鑰），便于以后找回
這里的網(wǎng)絡是以太網(wǎng)主網(wǎng)絡，賬戶里沒有錢ETH，怎么用local網(wǎng)絡，怎么導入有ETH的賬戶，在第4部分
- 導入賬號
在第4部分之后介紹如何導入賬號
4. 啟動Ganache
按照教程官網(wǎng)上下載Ganache安裝包，安裝之后，啟動界面有兩個按鈕，選擇QUICKSTART（先不要管silent-plants(ethereum）
Ganache搭建了一個私有的本地的以太坊網(wǎng)絡，網(wǎng)絡地址和端口號在紅色框里，馬賽克部分是10個賬戶，每個賬戶100ETH余額，后面我們把某個賬戶導入到MetaMask里邊
藍色框位置有“保存”按鈕（我這里保存過了所以沒有保存按鈕了），這樣記下來一個Workspace，Workspac的名字是silent-plants，下次再啟動Ganache，點擊下圖中的silent-plants(ethereum)，進入到對應的workspace里邊，重復使用那些10個賬戶了
5. MetaMask和Ganache連接
參考教程https://blog.csdn.net/sanqima/article/details/120406660的第6部分
MetaMask添加網(wǎng)絡
如下圖：“網(wǎng)絡名稱”自己定義
“新增RPC URL”是下圖紅框中Ganache的地址
“鏈ID”默認是1337，“貨幣符號”是ETH
點擊保存，MetaMask連接上本地私有網(wǎng)絡，在下面位置選中本地私有網(wǎng)絡
6. MetaMask導入Ganache賬戶
點擊右上角圓圈頭像→點擊“導入賬戶”
粘貼私鑰
私鑰在Ganache
回到MetaMask粘貼，點擊“導入”，導入成功
補充說明下：
MetaMask有兩種賬戶，第一種是新建的（如下圖的Account1，右側沒有“已導入”按鈕），第二種是導入的賬戶（如下圖的Account2，右側有“已導入”按鈕），選中Account2切換到該賬戶
第一種賬戶創(chuàng)建后不能刪除，也不能移除，第二種賬戶可以從MetaMask中移除，也不能徹底刪除賬戶，這是因為以太坊/區(qū)塊鏈上的賬戶一旦創(chuàng)建都不能徹底刪除
刪除的方法是，如下圖點擊Account2右側的三個點按鈕，點擊“刪除賬戶”，那么Account2從MetaMask上移除
7. MetaMask連接到Remix
此時MetaMask沒有連接到Remix
在Remix網(wǎng)站下點擊MetaMask→點擊右上角三個原點→點擊“已連接的網(wǎng)站”
彈出對話框中選中“手動連接當前站點”
選擇Account2→點擊“下一步”
點擊“連接”
連接成功！
8. Remix部署合約
這部分和教程一致~
9. 連接前端，部署智能合約到Web
教程里邊沒有講在哪里寫html和javascript的代碼，我一直在Remix里邊寫，寫了又不知道如何運行，其實很簡單，沒有那么復雜~
在本地文件夾新建一個index.html文件，位置放在哪里都可以
html的代碼如下
<!DOCTYPE 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，和index.html放在同一個文件夾目錄下
js代碼如下：
web3 = new Web3(new Web3.providers.HttpProvider("HTTP://127.0.0.1:7545"));
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);
}
});
教程里沒有提到的是，html文件下圖中的js文件名字要和js文件名字一致
修改js文件第一行是Ganache地址，如下圖
修改js文件新建合約的地址，是Remix部署的合約地址，不是Ganache的賬戶地址！
用火狐瀏覽器打開index.html，親測用其它瀏覽器打開index.html也可以，部署合約到Web成功了！
Github源碼
https://github.com/ningmengzhihe/Vote.git文章來源：http://www.zghlxwxcb.cn/news/detail-822988.html
歡迎感興趣的朋友點贊、關注、收藏喲文章來源地址http://www.zghlxwxcb.cn/news/detail-822988.html
到了這里，關于最詳細教你如何搭建一個最簡單的有前端的Dapp投票系統(tǒng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
