Solidity

使用前端 truffle petbox 吸引 dapp

  • March 10, 2022
App = {
 web3Provider: null,
 contracts: {},
 account: '0x0',

 init: function() {
   // Load pets.
   return App.initWeb3();
 },

 initWeb3: function() {
   if (typeof web3 !== 'undefined') {
     // If a web3 instance is already provided by Meta Mask.
     App.web3Provider = web3.currentProvider;
     web3 = new Web3(web3.currentProvider);
   } else {
     // Specify default instance if no web3 instance provided
     App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
     web3 = new Web3(App.web3Provider);
   }

   return App.initContract();
 },

 initContract: function() {
   $.getJSON("adding.json", function(addingdappfrontend) {

     App.contracts.Add = TruffleContract(addingdappfrontend);

     // we have to set provideer

       App.contracts.Add.setProvider(App.web3Provider);

      return App.render();

   });
 },

 render : function(){
   var addingInstance;

     // loading data
     web3.eth.getCoinbase(function(err, account) {
       if (err === null) {
         App.account = account;
         $("#accountAddress").html("Your Account: " + account);
       }
     });

     // Load contract data
     $("#add").click(function(){
     App.contracts.Add .deployed().then(function(i){
       app = i
       return app.add($("#fvalue").val() , $("#svalue").val());
     }).then(function(j){
       $("#total").val(j.total());
     });
   });
 }
};

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

以下程式碼是我的區塊鏈ui的app.js程式碼

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
   <title>Adding and Subracting  Twonumbers </title>

   <!-- Bootstrap -->
   <link href="css/bootstrap.min.css" rel="stylesheet">


 </head>
 <body>
   <div class="container">
     <div class="row">
       <div class="col-xs-12 col-sm-8 col-sm-push-2">
         <h1 class="text-center">adding Two Numbers</h1>
         <hr/>
         <br/>
         Firstvalue</br>
         <input type="number" name="fvalue"  id = "fvalue" value=""></br>
         second Value</br>
         <input type = "number"  name = "svalue"  id = "svalue" value = ""></br>
         Total</br>
         <input type = "number"  name= "total"  id = "total" value = ""> </br>
       </br><button name="add" id="add">Add</button>
       </div>
     </div>
     <p id="accountAddress" class="text-center"></p>
   </div>


   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <!-- Include all compiled plugins (below), or include individual files as needed -->
   <script src="js/bootstrap.min.js"></script>
   <script src="js/web3.min.js"></script>
   <script src="js/truffle-contract.js"></script>
   <script src="js/app.js"></script>
 </body>
</html>

我已經編寫了我的 index.html 程式碼,我想連結到我的後端 Solidity 程式碼並呼叫我的 add 函式並部署我的 index.html 程式碼中提供的總計框

pragma solidity ^0.4.23;

contract adding{

 uint256 public total;
 function  add(uint256 val1,uint256 val2) public returns(uint256){
   total = val1+val2;
   return total;
 }
}

上面的程式碼給了我以下錯誤載入資源失敗:

net::ERR_CONNECTION_REFUSED
app.js:54 14

   browser-sync-client.js?v=2.26.3:9 GET http://localhost:3000/browser-sync/socket.io/?EIO=3&transport=polling&t=MPxk1Re net::ERR_CONNECTION_REFUSED
   i.create @ browser-sync-client.js?v=2.26.3:9
   i @ browser-sync-client.js?v=2.26.3:9
   o.request @ browser-sync-client.js?v=2.26.3:9
   o.doPoll @ browser-sync-client.js?v=2.26.3:9
   n.poll @ browser-sync-client.js?v=2.26.3:9
   n.doOpen @ browser-sync-client.js?v=2.26.3:9
   n.open @ browser-sync-client.js?v=2.26.3:9
   n.open @ browser-sync-client.js?v=2.26.3:9
   n @ browser-sync-client.js?v=2.26.3:9
   n @ browser-sync-client.js?v=2.26.3:9
   n.open.n.connect @ browser-sync-client.js?v=2.26.3:9
   (anonymous) @ browser-sync-client.js?v=2.26.3:9
   browser-sync-client.js?v=2.26.3:9 GET http://localhost:3000/browser-sync/socket.io/?EIO=3&transport=polling&t=MPxk2fv net::ERR_CONNECTION_REFUSE

上面有很多程式碼,但沒有足夠的資訊來幫助你

第一個建議,確保adding.json可以訪問

解決目前問題後,您可能會面臨:

$("#add").click(function() {
   App.contracts.Add.deployed().then(function(i) {
       return i.add($("#fvalue").val(), $("#svalue").val());
   }).then(function(j) {
       $("#total").val(j);
   });
});

我已將函式更改為純函式,它執行良好

pragma solidity ^0.4.23;

contract adding{

 function  add(uint256 val1,uint256 val2) public pure  returns(uint256){
   //uint256 public total;
   uint256 total = val1+val2;
   return total;
 }
}

單元測試出錯了

請參閱以下連結進行說明

引用自:https://ethereum.stackexchange.com/questions/60610