當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2025/3/15 编程问答 13 豆豆

生活随笔收集整理的這篇文章主要介紹了 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 providerwindow.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端对以太坊数据的读写的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： EVM反编译软件Porosity的使用-
下一篇：使用web3.js进行开发