1.开发环境准备：ganache+webjs+nodejs
2.创建一个文件夹Dapp
mkdir Dapp3.安装ganache-cli，要求（nodejs>=V8）
npm install -g ganache-cliganache是 开发和测试的本地内存区块链。它模拟了真实的以太坊网络的功能，包括由测试以太币资助的多个账户的可用性。 4.安装web3js
npm install web3 -save5.安装truffle
npm install -g truffletruffle是节省程序员写多余代码的框架，通过truffle命令可以直接生成开发框架 安装过程如果出错建议更新一下nodejs 安装完成通过truffle -V检查版本 6.在remix中编写智能合约，并编译通过（新版本，需要翻墙： Remix – Ethereum IDE 旧版本： Remix – Ethereum IDE）
pragma solidity >=0.4.22 bool) public voters; //将投票人地址，映射成一个布尔值，用以判断该账户知否已经投过 struct Candidate { //定义一个结构体，包含候选人ID，名字，投票数 uint id; string name; uint voteCount; } mapping(uint => Candidate) public candidates; //通过ID来访问候选人 function addCandidate(string memory _name) private{ //定义添加候选人函数，并声明为私有的 candidatesCount ++; //添加一个就将候选人总数加一 candidates[candidatesCount] = Candidate(candidatesCount,_name,0); //将整个结构体赋予对应的候选人 } constructor () public { //构造函数，添加候选人 addCandidate("张三"); addCandidate("李四"); } function vote(uint _candidateId) public { //投票函数，传入输入框候选人对应的ID require(!voters[msg.sender]); //检查该账户是否已投过票，msg.sender为调用合约地址 require(_candidateId > 0 && _candidateId <= candidatesCount); //检查所投的候选人是否在候选人名单中 voters[msg.sender] = true; //将调用合约账户设为已投 candidates[_candidateId].voteCount ++; //将所投候选人投票数加一 emit votedEvent(_candidateId);//发出事件 } event votedEvent ( //定义事件，用以刷新界面 uint indexed _candidateId ); }7.在Dapp中创建模板工程
truffle unbox pet-port此过程可能会出错，多试几次，大部分是因为网络问题 8.运行ganache-cli
ganache-cli 运行成功会生成10个合约账户以及对应的私钥，同时还有连接的本地端口 9.修改truffle-config.js 
连接的端口和地址需要与ganache最终的一致 10.创建合约
vim Election.sol将remix中的智能合约粘贴在这 11.编写前端页面，用以显示投票，修改src/index.html
投票 DApp 投票 DApp
Loading...
# 候选人 得票数
12.修改src/js/app.js代码
App = { web3Provider: null, contracts: {}, account: '0x0', hasVoted: false, init: async function() { return await App.initWeb3(); }, initWeb3: async function() { if (window.ethereum) { App.web3Provider = window.ethereum; try { await window.ethereum.enable(); } catch (error) { console.error("User denied account access") } } else if (window.web3) { App.web3Provider = window.web3.currentProvider; } else { App.web3Provider = new Web3.providers.HttpProvider('http://localhost:8545'); } web3 = new Web3(App.web3Provider); return App.initContract(); }, initContract: function() { $.getJSON("Election.json", function(election) { App.contracts.Election = TruffleContract(election); App.contracts.Election.setProvider(App.web3Provider); App.listenForEvents(); return App.render(); }); }, listenForEvents: function() { App.contracts.Election.deployed().then(function(instance) { instance.votedEvent({}, { fromBlock: 0, toBlock: 'latest' }).watch(function(error, event) { console.log("event triggered", event) App.render(); }); }); }, render: function() { var electionInstance; var loader = $("#loader"); var content = $("#content"); loader.show(); content.hide(); web3.eth.getCoinbase(function(err, account) { if (err === null) { App.account = account; $("#accountAddress").html("Your Account: " + account); } }); App.contracts.Election.deployed().then(function(instance) { electionInstance = instance; return electionInstance.candidatesCount(); }).then(function(candidatesCount) { var candidatesResults = $("#candidatesResults"); candidatesResults.empty(); var candidatesSelect = $('#candidatesSelect'); candidatesSelect.empty(); for (var i = 1; i <= candidatesCount; i++) { electionInstance.candidates(i).then(function(candidate) { var id = candidate[0]; var name = candidate[1]; var voteCount = candidate[2]; // Render candidate Result var candidateTemplate = "" + id + " " + name + " " + voteCount + " 12.更新依赖
npm install13.编译部署合约
truffle compiletruffle migrate 14.需要在谷歌浏览器中安装钱包插件， Releases · MetaMask/metamask-extension · GitHub直接下载对应的版本，如果出错，选不了网络，可以下载其他版本地址如下 链接： 百度网盘 请输入提取码
https://pan.baidu.com/s/1qJTOKgFqXUXHRkAQAmcxZw 提取码：0w3n 解压添加到谷歌浏览器插件 15.在插件中导入账户，将ganache中生成的账户私钥输入 16.运行合约
npm run dev17.在浏览器地址输入127.0.0.1:3000，会自动调出钱包，需要对钱包下一步即可