[区块链笔记12] 第一个DApp--demo-CFANZ编程社区

初始化项目
git clone https://github.com/truffle-box/bare-box

如果是linux环境需要truffle.json cp truffle-config.js truffle.js

编辑InfoContract.sol

pragma solidity ^0.4.23;
contract Info {
    string name;
    uint age;
    event doneEvent(string name, uint age);
    function setInfo(string _name, uint _age) public {
        name = _name;
        age = _age;
        emit doneEvent(name, age);
    }
    function getInfo() public view returns (string, uint) {
        return (name, age);
    }
}

编译合约 truffle compile

打开Ganache，分配一个区块链网络

配置truffle.js文件， 127.0.0.1和7545端口

编辑一个2_info_migration.js文件

const Info = artifacts.require("Info");
module.exports = function(deployer) {
  deployer.deploy(Info);
};

部署合约truffle migrate

npm init用npm初始化，因为后续要用npm 来install包

npm install truffle-contract安装truffle-contract,方便和智能合约交互

创建src和js和css文件夹,用于存放html和js和css文件

把web3.min.js和jquery.min.js和truffle-contract.min.js拷贝到js目录下

css目录下创建index.css,内容如下

body {
  background-color: #F0F0F0;
}
#info {
  padding: 20px;
  background-color: #FFF;
}
#button {
  width: 100px;
}

编辑src下的index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Dapp demo</title>
  <link rel="stylesheet" type="text/css" href="../css/index.css">
  <script src="../js/web3.min.js"></script>
  <script src="../js/jquery.min.js"></script>
  <script src="../js/app.js"></script>
  <script src="../js/truffle-contract.min.js"></script>
</head>
<body>
  <div class="content">
    <h1>Dapp demo</h1>
    <h2 id="info"></h2>
    <br />
    <label>姓名: </label>
    <input id="name" type="text">
    <br />
    <label>年龄: </label>
    <input id="age" type="text">
    <br /><br />
    <button id="button">更新</button>
    <h2 id="loader">正在加载</h2>
  </div>
</body>
</html>

编辑app.js文件

App = {
  web3Provider: null,
  contracts: {},

  init: function(){
    ethereum.enable();
    return App.initWeb3();
  },
  initWeb3: function(){
    
    if (typeof web3 !=='undefined') {
      App.web3Provider = web3.currentProvider;
      web3 = new Web3(App.web3Provider);
      //web3.eth.defaultAccount = web3.eth.accounts[0];
    } else {
      App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
      web3 = new Web3(App.web3Provider);
    }
    // ethereum.enable(function(){
  //           web3.eth.getAccounts((error, accounts) => {
  //                web3.eth.defaultAccount = accounts[0];
  //                 console.log(accounts)
  //           })
  //       }) 
    App.initContract();
  },
  initContract: function() {
    $.getJSON('../build/contracts/InfoContract.json', function(data) {
      App.contracts.InfoContract = TruffleContract(data);
      App.contracts.InfoContract.setProvider(App.web3Provider);
      App.watchChanged();
      return App.getInfo();
    });
    App.bindEvents();
    
    
  },

  getInfo: function() {
    App.contracts.InfoContract.deployed().then(function(instance) {
      return instance.getInfo.call();
    }).then(function(result) {
      $('#loader').hide();
      $('#info').html(result[0] + '(' + result[1] + ')years old');
    }).catch(function(error) {
      alert(error);
    });
  },

  
  bindEvents: function() {
    $('#button').click(function() {
      $('#loader').show();
      App.contracts.InfoContract.deployed().then(function(instance) {
        var message = {from: "0x549697a9ca1D3D5a2068b165f6B5AC70Da6ef813", gas:500000};
        return instance.setInfo.sendTransaction($('#name').val(), $('#age').val(), message);
      }).then(function(result) {
        return App.getInfo();
      }).catch(function(error) {
        alert(error);
      });
    });
  },
  watchChanged: function() {
    App.contracts.InfoContract.deployed().then(function(instance) {
      var infoEvent = instance.doneEvent();
      infoEvent.watch(function(error, result) {
        $('#loader').hide();
        $('#info').html(result.args.name + '(' + result.args.age + ')years old');
      });
    });
  }
}

$(window).on('load', function() {
  App.init();
});