投票Dapp创建

news/2024/7/10 3:06:39 标签: vue, java, js, javascript, nodejs

投票Dapp创建

  1. 环境搭建
# 初始化npm包管理工具
mkdir voteDapp
npm init
npm install web3@0.20.1 solc@0.4.22 ganache-cli

# 启动ganache 默认 http://localhost:8545
./node_modules/.bin/ganache-cli -h 192.168.1.114 -p 8989
  1. 编写solidity合约
pragma solidity ^0.4.22;

contract Voting{
    
    bytes32[] public candidateList;
    mapping(bytes32=>uint8) public votingMap;
    
    constructor(bytes32[] candidateListName) public{
        candidateList = candidateListName;
    }
    
    function validateCandidate(bytes32 candidateListName) internal view returns(bool){
        for(uint8 i=0 ; i<candidateList.length ; i++){
            if(candidateListName == candidateList[i]){
                return true;
            }
        }
        return false;
    }
    
    function vote(bytes32 candidateListName) public{
        require(validateCandidate(candidateListName));
        votingMap[candidateListName] += 1;
    }
    
    function totalVoters(bytes32 candidateListName) public view returns(uint8){
        require(validateCandidate(candidateListName));
        return votingMap[candidateListName];
    }   
}
  1. 连接到本地ganache，并部署合约
javascript">//启动node，输入以下代码部署合约

var Web3 = require('web3');
// 加载solc用于编译solidity合约，注意与合约版本一致
var solc = require('solc');
var web3 = new Web3(new Web3.providers.HttpProvider("http://192.168.1.114:8989"));
web3.isConnected();
// 读取solidity文件，采用同步读取为字符串类型
var sourceCode = fs.readFileSync("Voting.sol").toString();
// solc编译solidity文件
var compileCode = solc.compile(sourceCode);
// 从编译结果中拿到 abi 和 bin 的内容
var abi = JSON.parse(compileCode.contracts[":Voting"].interface);
var byteCode = compileCode.contracts[":Voting"].bytecode;
// 部署合约
var VotingContract = web3.eth.contract(abi);
var deployObj = {from:web3.eth.accounts[0],data:byteCode,gas:3000000};
var votingInstance = VotingContract.new(["Bob","Alice","Jerry"],deployObj);
// 查看合约地址，验证部署是否成功
votingInstance.address;
  1. 调用合约函数
javascript">// 给Bob投票
votingInstance.vote("Bob",{from:web3.eth.accounts[0]});
votingInstance.vote.sendTransaction("Bob",{from:web3.eth.accounts[0]});
// 查看Bob得票数
votingInstance.totalVoters("Bob");
votingInstance.totalVoters.call("Bob");
  1. 前端页面布局，将如下代码添加到index.html文件中
<!DOCTYPE html>
<html>
    <head>
        <title>Voting Dapp</title>
        <link href="http://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>
                    <tr>
                        <th>Candidate</th>
                        <th>Voting count</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>Jerry</td>
                        <td id="candidate-3"></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <input type="text" id="candidate"/>
        <a href="#" onclick="voteForCandidate()" class="btn btn-primary">Voting</a>
    </body>
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/web3@0.20.1/dist/web3.min.js"></script>
    <script src="./index.js"></script>
</html>
  1. js脚本编写，将如下内容添加到与index.html同级目录下的index.js文件中
javascript">var web3 = new Web3(new Web3.providers.HttpProvider("http://192.168.1.114:8989"));

var abi = JSON.parse('[{"constant":true,"inputs":[{"name":"","type":"bytes32"}],"name":"votingMap","outputs":[{"name":"","type":"uint8"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"candidateListName","type":"bytes32"}],"name":"totalVoters","outputs":[{"name":"","type":"uint8"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"candidateListName","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 contractAddr = "0x08c19cb41678b41609d51662e3c0691998f640f8";
var VotingContract = web3.eth.contract(abi);
var contractInstance = VotingContract.at(contractAddr);
var candidates = {"Alice":"candidate-1","Bob":"candidate-2","Jerry":"candidate-3"};

function voteForCandidate(){
    let candidateName = $("#candidate").val();
    contractInstance.vote(candidateName,{from:web3.eth.accounts[0]},function(err,res){
        if(err){
            console.log("Error:",err);
        }else{
            let count = contractInstance.totalVoters(candidateName).toString();
            $("#"+candidates[candidateName]).html(count);
        }
    });
}

$(document).ready(function(){
    var candidateList = Object.keys(candidates);
    for(let i=0 ; i<candidateList.length ; i++){
        let name = candidateList[i];
        let count = contractInstance.totalVoters(name).toString();
        $("#"+candidates[name]).html(count);
    }
}
);
  1. 页面效果图
1-1590996031675.png

http://www.niftyadmin.cn/n/1571919.html

相关文章

fabric环境搭建

fabric环境搭建

参考&#xff1a;https://blog.csdn.net/hehui0316/article/details/106295487?utm_mediumdistribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-7.nonecase&depth_1-utm_sourcedistribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai…
阅读更多...
fabric手动组建网络demo

fabric手动组建网络demo

Fabric证书生成 配置crypto-config.yaml文件 # Copyright IBM Corp. All Rights Reserved. # # SPDX-License-Identifier: Apache-2.0 ## --------------------------------------------------------------------------- # "OrdererOrgs" - Definition of organizati…
阅读更多...
Mybatis使用与配置

Mybatis使用与配置

本测试项目涵盖了Mybatis框架的入门快速构建、基于xml的CRUD操作、配置信息说明、基于注解的CRUD操作、多对一和一对多的映射操作以及动态SQL相关内容。望可以帮助到有相关需求的伙伴。 测试代码Github地址&#xff1a;https://github.com/yaokuku123/mybatis-demo 一. 搭建Myb…
阅读更多...
Mybatis-Plus使用与配置

Mybatis-Plus使用与配置

本测试项目涵盖了Mybatis-Plus框架的入门快速构建以及基本的CRUD相关的操作说明。望可以帮助到有相关需求的伙伴。 测试代码Github地址&#xff1a;https://github.com/yaokuku123/mybatis-demo 1 Mybatis-Plus快速搭建 本项目测试需要基于SpringBoot框架完成。 1.1 创建并初始…
阅读更多...
nodejs与npm包管理工具

nodejs与npm包管理工具

1 nodejs使用说明 1.1 nodejs的安装 在官网下载对应版本的nodejs&#xff0c;根据安装向导直接下一步默认安装即可。 image-20200827084947500.png测试是否安装nodejs成功。打开cmd终端&#xff0c;输入如下命令&#xff0c;若显示版本号则说明安装成功。 node -v 1.2 nodejs的…
阅读更多...
babel配置与使用说明

babel配置与使用说明

1 概述 babel是转码器&#xff0c;用于将es6的代码转换为es5的代码。提升代码在浏览器中的兼容性。 2 使用步骤 最终文件目录结构 image-20200827094819375.png安装babel工具 # 全局安装babel工具 npm install -g babel-cli # 测试是否安装成功 babel --version npm初始化项目 …
阅读更多...
webpack配置与使用

webpack配置与使用

1 概述 Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析&#xff0c;然后将这些模块按照指定的规则生成对应的静态资源。 2 webpack安装 # 全局安装webpack npm install -g webpack webpack-cli # 查看版本确认是否安装成功 webpack -v 3 js文件打包…
阅读更多...
nginx的反向代理实例1

nginx的反向代理实例1

0. 实现效果 通过本地浏览器输入域名&#xff0c;可以实现通过nginx反向代理的操作&#xff0c;跳转到linux服务器的tomcat主页面的效果。 1. 准备工作 配置java环境安装tomcat&#xff0c;并测试是否可以正常访问配置安装nginx 2. 具体配置 2.1 在windows系统的host文件中进行…
阅读更多...
最新文章

Copyright @ 2022~2023