以太坊誓言Dapp开发

基于React开发的誓言Dapp

技术: 前端React框架，geth搭建的本地链,web3js,智能合约

具体实现目标

1.编写合约，部署在本地链上。（此操作可以在remix-ide上实现）
别忘了拷贝合约abi和合约地址

pragma solidity ^0.5.0;

contract Words {

    struct Item {
        string what;
        address who;
        uint when ;
    }

    Item[] private allWords;

    function save(string memory s, uint t) public {
        allWords.push(Item({
            what: s,
            who: msg.sender,
            when: t
        }));
    }

    function getSize() public view returns (uint){
        return allWords.length;
    }

    function getRandom(uint random) public view returns (string memory, address, uint) {
        if(allWords.length==0){
            return ("", msg.sender, 0);
        }else{
            Item storage result = allWords[random];
            return (result.what, result.who, result.when);
        }
    }
}

2.## 详解react的js文件

 render() {
    return (
      <div className="App">
        <p>当前誓言总数：{this.state.size}</p>
        <p id='abc'></p>
        <header className="App-header"></header>
        <div>
          <input id="greeting" type="text"></input>
          <button type="submit" onClick={this.xxxxx.bind(this)}>查询誓言</button>
        </div>
        <br></br>
        <br></br>
        <div>
          <textarea rows="3" cols="20" id="wordArea"></textarea>
          <button type="submit" onClick={this.xxx.bind(this)}>添加誓言</button>
        </div>
      </div>
    );
  }

显示誓言总条数：
调用合约中的getsize函数，将返回值设置为state：size

class AppShiYan extends Component {
  componentWillMount() {
    this.LoadBlockChainData();
  }
async LoadBlockChainData() {
    const Web3 = require('web3'); //记得npm install web3js
    const web3 = new Web3(new Web3.providers.WebsocketProvider("ws://localhost:8546")); //启动本地链，连接
    var contractAbi =合约ABI
    var contractAddress = 合约地址
    var contract = new web3.eth.Contract(contractAbi, contractAddress);
    console.log(contract);
    const { getSize } = contract.methods; //结构函数
    const count = await getSize().call()
    this.setState({ size: count });
  }
  constructor(props) {
    super(props);
    this.state = { size: '' }
  }

添加誓言

xxx() {
    const Web3 = require('web3');
    if (window.ethereum)
      // use MetaMask's provider
      var web3 = new Web3(window.ethereum);
    window.ethereum.enable(); // get permission to access accounts
    var contractAbi =合约ABI
    var contractAddress = 合约地址
    var contract = new web3.eth.Contract(contractAbi, contractAddress);
    const msg = document.getElementById("wordArea").value; //获取内容
    let timestamp = new Date().getTime(); //获取时间
    web3.eth.getAccounts().then(function (accounts) {
      contract.methods.save(msg, parseInt(timestamp / 1000)).send({ from: accounts[0] });
      console.log("OK!---------")//调用合约save函数添加誓言
    });
  }

查询誓言

 xxxxx() {
    function formatNumber(n) {
      n = n.toString()
      return n[1] ? n : '0' + n
    }
    function formatTime(timestamp) {
      let date = new Date(Number(timestamp * 1000))
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      let hour = date.getHours()
      let minute = date.getMinutes()
      let second = date.getSeconds()
      let fDate = [year, month, day,].map(formatNumber)
      return fDate[0] + '年' + fDate[1] + '月' + fDate[2] + '日' + ' ' + [hour, minute, second].map(formatNumber).join(':')
    }
    const Web3 = require('web3');
    const web3 = new Web3(new Web3.providers.WebsocketProvider("ws://localhost:8546"));
    var contractAbi =合约abi
    var contractAddress = 合约地址
    var contract = new web3.eth.Contract(contractAbi, contractAddress);
    contract.methods.getRandom($("#greeting").val()).call(function (err, result) {
      console.log(err, result);
      const msgEl = document.getElementById("abc")
      const msg = "内容:" + result[0]
        + " <br /> 来源:" + result[1]
        + " <br /> 时间:" + formatTime(result[2])
        + "<br /> id:" + $("#greeting").val()
      msgEl.innerHTML = msg
    });
  }