一、在页面上获取合约信息

（1）在App.js中导入合约实例。

// 导入合约实例
let contractInstance = require('./eth/lottery')

（2）定义一个App类，继承Component，并提供componentWillMount()和render函数。

import React, {Component} from 'react';

// 导入合约实例
let contractInstance = require('./eth/lottery')

class App extends Component {

    constructor() {
        super()
    }

    // 在页面渲染前自动执行
    async componentWillMount() {
        console.log("执行 componnetWillMount方法...")
        
    }

    // 渲染页面
    render() {
        console.log("执行render方法...")

        return (
            <div>
                <p>Hello React！！！</p>
            </div>
        );
    }
}

export default App;

（3）在构造函数中定义状态变量。

constructor() {
    super()
    this.state = {
        manager : '',
        winner : '',
        round : 0,
        balance : 0,
        players : [],
        playerCounts : 0
    }
}

（4）在componentWillMount函数中调用合约实例方法，初始化状态变量。

// 在页面渲染前自动执行
async componentWillMount() {
    console.log("执行 componnetWillMount方法...")
    let manager = await contractInstance.methods.getManagerAddress().call()
    let winner = await contractInstance.methods.getWinner().call()
    let round = await contractInstance.methods.getRound().call()
    let balance = await contractInstance.methods.getAmount().call()
    let players = await contractInstance.methods.getPlays().call()
    this.setState({
        manager,
        winner,
        round,
        balance,
        players,
    })
}

（5）修改render函数，把状态变量的值输出到页面上。

// 渲染页面
render() {
    return (
        <div>
            <p>Hello React!!!</p>
            <p>manager : {this.state.manager}</p>
            <p>winner : {this.state.winner}</p>
            <p>round : {this.state.round}</p>
            <p>balance : {this.state.balance}</p>
            <p>players : {this.state.players}</p>
        </div>
    );
}

（5）测试。

第一步：打开remix，在At Address输入框中输入合约地址，找到该合约，然后再进行投注、开奖操作。

第二步：启动React，在浏览器上输入localhost:3000，如果在页面上以下效果，就代表测试成功。

二、搭建界面

（1）下载semantic-ui-react和semantic-ui-css模块。

"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.83.0"

（2）在semantic官方文档中查找card视图，找到后点击Try it并复制代码。

（3）把复制代码粘贴到display/ui.js文件中。

import React from 'react'
import { Card, Icon, Image } from 'semantic-ui-react'

const CardExampleCard = () => (
    <Card>   
        <Image src='/images/avatar/large/matthew.png' wrapped ui={false} />
        <Card.Content>
            <Card.Header>Matthew</Card.Header>
            <Card.Meta>
                <span className='date'>Joined in 2015</span>
            </Card.Meta>
            <Card.Description>
                Matthew is a musician living in Nashville.
            </Card.Description>
        </Card.Content>
        <Card.Content extra>
            <a>
                <Icon name='user' />
                22 Friends
            </a>
        </Card.Content>
    </Card>
)

// 在ES6语法中，如果使用export导出，那么就要使用import导入
export default CardExampleCard

（4）新建一个logo图片，然后保存在public/images目录下。

（5）修改logo图片的路径。

<Image src='/images/logo.jpg' wrapped ui={false} />

（6）在App.js文件中导入ui.js页面，然后在render方法中创建CardExampleCard。

import CardExampleCard from './display/ui';

....


render() {
    return (
        <div>
            <CardExampleCard/>
            <p>Hello React!!!</p>
            <p>manager : {this.state.manager}</p>
            <p>winner : {this.state.winner}</p>
            <p>round : {this.state.round}</p>
            <p>balance : {this.state.balance}</p>
            <p>players : {this.state.players}</p>
        </div>
    );
}

（7）在index.js中导入CSS。

import 'semantic-ui-css/semantic.min.css'

（8）测试代码，界面如下图所示：

三、向页面添加数据

（1）修改ui.js文件。

第一步：从semantic-ui-react库中导入Statistic。

import { Statistic } from 'semantic-ui-react'

第二步：获取CardExampleCard函数参数props，把props中的数据分别展示在界面上。

const CardExampleCard = (props) => (
    <Card>
        <Image src='/images/logo.jpg' wrapped ui={false} />
        <Card.Content>
            <Card.Header>福利彩票广州站</Card.Header>
            <Card.Meta>
                <p>管理员：{props.manager}</p>
                <p>当前用户：{props.currentPlayer}</p>
            </Card.Meta>
            <Card.Description>
                每晚八点准时开奖, 不见不散!
            </Card.Description>
        </Card.Content>
        <Card.Content extra>
            <a>
                <Icon name='user' />
                {props.playerCount} 人参与
            </a>
        </Card.Content>
        <Card.Content extra>
            <Statistic color='red'>
                <Statistic.Value>{props.balance}ETH</Statistic.Value>
                <Statistic.Label>奖金池</Statistic.Label>
            </Statistic>
        </Card.Content>
        <Card.Content extra>
            <Statistic color='blue'>
                <Statistic.Value>第{props.round}期</Statistic.Value>
                <a href='#'>点击我查看交易历史</a>
            </Statistic>
        </Card.Content>
    </Card>
)

（2）修改App.js文件

第一步：导入InitWeb3。

let web3 = require('./utils/InitWeb3')

第二步：在构造函数中，添加currentPlayer状态变量。

constructor() {
   super()
   this.state = {
        manager : '',
        ...
        currentPlayer : ''
    }
}

第三步：在componentWillMount函数中，设置状态变量的值。

async componentWillMount() {
    ...
    let balanceWei = await contractInstance.methods.getAmount().call()
    //从wei单位转换为'ether'单位
    let balance = web3.utils.fromWei(balanceWei, 'ether')
    let players = await contractInstance.methods.getPlays().call()
    let playerCount = await players.length
    let allPlayers = await web3.eth.getAccounts()
    this.setState({
        manager,
        winner,
        round,
        balance,
        players,
        playerCount,
        currentPlayer : allPlayers[0]
    })
}

第四步：修改render方法，在CardExampleCard元素中为每一个状态变量添加对应的属性。这些属性会保存在CardExampleCard函数的props参数中。

<CardExampleCard
      manager = {this.state.manager}
      currentPlayer = {this.state.currentPlayer}
      playerCount = {this.state.playerCount}
      balance = {this.state.balance}
      round = {this.state.round}
/>

（3）测试代码，效果如下图所示：

以太坊彩票DAPP实战（三）

一、在页面上获取合约信息

二、搭建界面

三、向页面添加数据

猜你喜欢