Truffle
使用 truffle-contract.js 載入合約
我有一個非常簡單的契約,叫做
Friend.sol
:pragma solidity ^0.4.17; contract Friend { string name; uint age; function setFriend(string _name, uint _age) public { name = _name; age = _age; } function getFriend() public constant returns (string, uint) { return(name, age); } }
我將契約部署在
ganache-cli
:Running migration: 1_initial_migration.js Deploying Migrations... ... 0xa4d581c585527651c4a74a0d85ef2e21ac91a43e17f290f5f548d6e5f0686e22 Migrations: 0xf741d74fb4d4eab8c044dc4b1c0dfb7a244a6922 Saving successful migration to network... ... 0xca51a8f5124ef4f1dc8dfba5b9a9c1388cda003686309ff152b776600a64cf81 Saving artifacts... Running migration: 2_deploy_contracts.js Deploying Friend... ... 0x9195ced6c131afaf1e735fc90464f9b94dd4215e909f463f06e51565b5e7e804 Friend: 0x8a260eec4c77f82bd885b730f782f9bbe680dd64 Saving successful migration to network... ... 0x008b78bf25c5aa93fb6b8f16367d006e68751a54550da32bcce382067ad1250d Saving artifacts...
在我的前端,我試圖通過web3和truffle -contract訪問契約:
<html> <head>Truffle-Contract Test</head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <body> <h1>I am Friend with...</h1> <h2 id="friend"></h2> <label for="name" class="col-lg-2 control-label">Name:</label> <input type="text" id="name"> <label for="age" class="col-lg-2 control-label">Age:</label> <input type="text" id="age"> <button id="button">Update Friend</button> </body> <script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script type="text/javascript" src="./js/web3.min.js"></script> <script type="text/javascript" src="./js/truffle-contract.js"></script> <script type="text/javascript"> // Is there an injected web3 instance? if (typeof web3 !== 'undefined') { var web3Provider = web3.currentProvider; } else { // If no injected web3 instance is detected, fall back to Ganache var web3Provider = new Web3.providers.HttpProvider('http://localhost:7545'); } web3 = new Web3(web3Provider); // Get Contract $.getJSON('./Friend.json', function (data) { // Get the necessary contract artifact file and instantiate it with truffle-contract var FriendArtifact = data; var FriendContract = TruffleContract(FriendArtifact); // Set the provider for our contract FriendContract.setProvider(web3Provider); console.log("FriendContract:") console.log(FriendContract) // interact with the smart contract FriendContract.getFriend(function (error, result) { if (!error) { $("#friend").html(result[0] + ' (' + result[1] + 'years old)') } else { console.log(error) } }) $("button").click(function () { FriendContract.setFriend($("name").val(), $("age").val()) }) }); </script> </html>
但是,當我執行時,
lite-server
我得到:錯誤是,當我想在以下行與我的契約進行互動時:
FriendContract.getFriend(function (error, result) {
我還創建了一個小型github 儲存庫來展示我的整個程式碼。
有什麼建議我做錯了嗎?
試試這個:
var friendinstance; FriendContract.deployed().then(function(instance){ friendinstance = instance; return friendinstance.getFriend(); }).then(function(result) { console.log(result); var str=result.toString(); var friendDetails=str.split(","); $('#friend').html("Name:"+friendDetails[0]+"<br>"+"Age:"+friendDetails[1]); }).catch(function(err) { console.log(err.message); });
也許你忘記了
deployed
函式。FriendContract.deployed().then(function(instance) { car friend = instance; return frined.getFriend(); }).then(function(friends) {