【区块链】Truffle合约交互

来源：互联网发布：字幕下载软件编辑：程序博客网时间：2024/05/27 01:12

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);

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

阅读全文

0 0