269-ethereum抽奖小游戏三

ethereum抽奖小游戏三








然后在App.js导入一下
let lotteryInstance = require(../loadInstance)

然后在class App里面
//生命周期函数
componentWillMount(){
	let manager = await lotteryInstance.methods.manager().call()
	console.log(manager)
}

//react状态变量,可以负责类内的数据共享
state = {
	manager: ''
}

然后
this.setState({
	manager : manager,
})

然后读取出来
<p>manager: {this.state.manager}</p>






然后我们看一下这段完整代码
尝试把manager显示出来

import React, {Component} from 'react';

let lotteryInstance = require('./loadInstance')

class App extends Component {

    //react状态变量,可以负责类内的
    state = {
        manager: ''
    }

    //生命周期函数
    async componentWillMount() {
        let manager = await lotteryInstance.methods.manager().call()
        console.log(manager)

        //给状态变量赋值
        this.setState({
            manager: manager
        })
    }

    //render渲染
    render() {
        return (
            <div>
                <p>hello world</p>
                <p>manager: {this.state.manager}</p>
            </div>
        );
    }
}

export default App;








现在我们重新把显示manager的逻辑和代码整理一次

第一步.写合约


pragma solidity ^0.4.24;

contract Lottery{

    address public manager;
    address [] public players;
    address  public winner;
    uint public round;

    constructor() public{
        manager=msg.sender;
    }

    function play() public payable{

        //限定每次只能投注1个eth
        require(msg.value == 1 ether);

        //记录彩民
        players.push(msg.sender);

    }

    function getPlayers() public view returns (address [] memory){
	    return players;
    }

    function getBalance() public view returns(uint){
	    return address(this).balance;
    }

    modifier onlyManager{
        require(msg.sender==manager);
        _;
    }

    function draw() public onlyManager{
    	//获取时间戳,玩家个数,区块链难度
    	bytes memory infos = abi.encodePacked(block.timestamp,players.length,block.difficulty);

    	//生成hash
    	bytes32 hash = keccak256(infos);

    	//求余数
    	uint winnerIndex = uint(hash) % players.length;

    	//赢家
    	winner = players[winnerIndex];

    	//转账
    	winner.transfer(address(this).balance);

    	//清空彩民池
    	delete players;

    	//期数加1
    	round++;
    }

}





第二步.编译合约
let fs = require('fs');
let solc = require('solc');

let contractInfo = fs.readFileSync('./lottery.sol');
let compileInfo = solc.compile(contractInfo.toString(), 1);

module.exports = compileInfo['contracts'][':Lottery'];





第三步.启动ganache-cli服务
ganache-cli -h 127.0.0.1 -p 7545 -m "scout same ..."

这里给定了地址127.0.0.1:7545
然后给定了账户,这个账户是指定的付款账户




第四步.部署合约
启动服务之后就可以部署合约了

let {bytecode, interface} = require('./compile')

//导入web3
let Web3 = require('web3')
let web3 = new Web3('http://127.0.0.1:7545');

let account1 = '0xd595指定付款账户'

//部署
let deploy = async() =>{
    //实例
    let contractInstance = new web3.eth.Contract(JSON.parse(interface))

    //部署
    let res = await contractInstance.deploy({
        data: bytecode,
        arguments: [],
    }).send({
        from: account1,
        gas: '1000000',
        value: 0,
    })

    //获取ABI和合约地址
    console.log(interface)
    console.log(res.options.address)

}

//调用,部署
deploy()







第五步.获取合约实例
//abi和address
let abi = '部署时获取的ABI'
let address = '0x0fe50部署时获取的合约地址'

//web3
let Web3 = require('web3')
let web3 = new Web3('http://127.0.0.1:7545')
console.log(web3.version)

//获取合约实例
let lotteryInstance = new web3.eth.Contract(JSON.parse(abi),address)

//导出
module.exports = lotteryInstance








第六步.显示
import React, {Component} from 'react';

let lotteryInstance = require('./loadInstance')

class App extends Component {

    //react状态变量,可以负责类内的
    state = {
        manager: '',
    }

    //生命周期函数
    async componentWillMount() {
        let manager = await lotteryInstance.methods.manager().call()
        console.log(manager)

        //给状态变量赋值
        this.setState({
            manager: manager,
        })

    }

    //render渲染
    render() {
        return (
            <div>
                <p>hello world</p>
                <p>你好 世界</p>
                <p>manager: {this.state.manager}</p>
            </div>
        );
    }
}

export default App;