Truffle合约交互 - WEB端对以太坊数据的读写

1. 初始化truffle

truffle init webpack

可以参考：here

2. 写一个合约

这里给出一个简单的合约。

pragma solidity ^0.4.2;

contract Credit {

  event createRecord(address indexed _address, string identity, uint category, uint price);

  string a;
  uint b;
  uint c;

    function create(string identity, uint category, uint256 price)
  {
      a = identity;
      b = category;
      c = price;
      createRecord(msg.sender, identity, category, price);
  }

  function all() returns (string, uint, uint){
      return(a, b, c);
  }

}

3. 部署合约

前文有提到：here

4. 修改HTML文件

这里假设已经有了web基础。

写3个input, 分别是身份、分类以及价格。注意它们的id

以及2个按钮：

提交：会调用saveMessage函数，把数据写入以太坊
获取信息：调用getMessage函数，从以太坊读取数据

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>MetaCoin - Truffle Webpack Demo w/ Frontend</title>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
  <script src="./app.js"></script>
</head>
<body>
  <h1>区块链征信</h1>

  <br><label for="identity">身份ID</label><input type="text" id="identity" ></input>
  <br><label for="category">分类</label><input type="text" id="category" ></input>
  <br><label for="price">价格</label><input type="text" id="price" ></input>


  <br><br><button type = "submit" id="send" onclick="App.saveMessage()">提交</button>

  <br><br><button type = "submit" id="get" onclick="App.getMessage()">获取信息</button>

  <br><label for="amount" id = "status" >信息</label>

</body>
</html>

5. 修改app.js文件

注意引入的文件。

// Import the page's CSS. Webpack will know what to do with it.
import "../stylesheets/app.css";

// Import libraries we need.
import { default as Web3} from 'web3';
import { default as contract } from 'truffle-contract'

// Import our contract artifacts and turn them into usable abstractions.
import credit_artifacts from '../../build/contracts/Credit.json'

// MetaCoin is our usable abstraction, which we'll use through the code below.
var Credit = contract(credit_artifacts);

//展示与合约的互动
var accounts;
var account;

window.App = {
  start: function() {
    var self = this;

    // Bootstrap the Credit abstraction for Use.
    Credit.setProvider(web3.currentProvider);

    //获取初始账户
    web3.eth.getAccounts(function(err, accs) {
      if (err != null) {
        alert("There was an error fetching your accounts.");
        return;
      }

      if (accs.length == 0) {
        alert("Couldn't get any accounts! Make sure your Ethereum client is configured correctly.");
        return;
      }
      accounts = accs;
      account = accounts[0];
    //  self.refreshBalance();
    });
  },

  //设置页面文字信息
  setStatus: function(message) {
    var status = document.getElementById("status");
    status.innerHTML = message;
  },

  //从以太坊获取信息
  getMessage: function(){

    var self = this;
    var meta;

    var a,b,c;

    Credit.deployed().then(function(instance) {
        meta = instance;
        return meta.all.call({from: account});
    }).then(function(value){
        self.setStatus(value);
    }).catch(function(e) {
      console.log(e);
      self.setStatus("Error getting message. see log.");
    });
  },

  //写数据到以太坊
  saveMessage: function(){

      var self = this;
      var meta;

      var identity = document.getElementById("identity").value;
      var category = parseInt(document.getElementById("category").value);
      var price = parseInt(document.getElementById("price").value);

      Credit.deployed().then(function(instance) {
          meta = instance;
          return meta.create(identity, category, price, {from: account});
      }).then(function(){
          self.setStatus(identity);
      }).catch(function(e){
        console.log(e);
        self.setStatus("Error");
    });
  }
};

//下面这一段应该是不用管照抄就行了。web页面加载会调用。但实际上我还没理解，待解决。
window.addEventListener('load', function() {

  if (typeof web3 !== 'undefined') {
    console.warn("Using web3 detected from external source. If you find that your accounts don't appear or you have 0 MetaCoin, ensure you've configured that source properly. If using MetaMask, see the following link. Feel free to delete this warning. :) http://truffleframework.com/tutorials/truffle-and-metamask")
    // Use Mist/MetaMask's provider
    window.web3 = new Web3(web3.currentProvider);
  } else {
    console.warn("No web3 detected. Falling back to http://localhost:8545. You should remove this fallback when you deploy live, as it's inherently insecure. Consider switching to Metamask for development. More info here: http://truffleframework.com/tutorials/truffle-and-metamask");
    // fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail)
    window.web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
  }

  App.start();
});

参考：here

记录一下自己遇到的问题：

刚开始写法：

event createRecord(string identity, uint category, uint price);
调用时：createRecord(identity, category, price);

得到的identity不是输入的字符串而是一串类似于下面这样的数据

0x4f6054c80000000000000000000000000000000000000000

解决：

event createRecord(address indexed _address, string identity, uint category, uint price);

调用时：createRecord(msg.sender, identity, category, price);

可以看到加了一个地址，这个事件是用来广播的，第一个参数是用来部署合约的地址。

【区块链】Truffle合约交互 - WEB端对以太坊数据的读写

Truffle合约交互 - WEB端对以太坊数据的读写

1. 初始化truffle

2. 写一个合约

3. 部署合约

4. 修改HTML文件

5. 修改app.js文件

猜你喜欢