nodejs之以太坊truffle-contract 和web3 环境搭建之实现web宠物源代码

 

package.json配置文件依赖包！

"dependencies": {
    "bootstrap": "^4.2.1",
    "jquery": "^3.3.1",
    "popper.js": "^1.14.6",
    "truffle-contract": "^3.0.4",
    "web3": "^0.20.0"
  }


//app.js核心js代码(其他js文件全部是nodejs库，安装即可)

var $ = require("jquery");

var startObj = {
    ////web初始化成功之后获得的当前操作账号对象！
    web3Provider : null,
    //truffle-contract智能合约初始化成功后，获得调取账户实例的权限！
    contracts : {},
    //web初始化成功之后获得的web3对象！
    web3 : {},


    //初始化web前端宠物界面！！
    init : function () {
        // Load pets.
        $.getJSON('../pets.json', function(data) {
            var petsRow = $('#petsRow');
            var petTemplate = $('#petTemplate');

            for (i = 0; i < data.length; i ++) {
                petTemplate.find('.panel-title').text(data[i].name);
                petTemplate.find('img').attr('src', data[i].picture);
                petTemplate.find('.pet-breed').text(data[i].breed);
                petTemplate.find('.pet-age').text(data[i].age);
                petTemplate.find('.pet-location').text(data[i].location);
                petTemplate.find('.btn-adopt').attr('data-id', data[i].id);
                //petTemplate.css("display","block");
                petsRow.append(petTemplate.html());
            }
        });
    },

    //web3初始化函数！
    initWeb3 : function() {
        var Web3 = require('web3');
        if (typeof web3 !== 'undefined') {
            web3 = new Web3(web3.currentProvider);
            } else {
            // set the provider you want from Web3.providers
            web3 = new Web3(new Web3.providers.HttpProvider("http://127.0.0.1:8545"));
            }
            startObj.web3Provider = web3.currentProvider;
            startObj.web3 = web3;
        
    },

    //truffle-contract智能合约初始化函数！
    initContract : function () {
        var TruffleContract = require("truffle-contract");

        //这里的json文件路径由于在lite-server服务器文件bs-config.json配置了./build/contracts默认路径！
        $.getJSON('Adoption.json', function(data) {
            var AdoptionArtifact = data;

            startObj.contracts.Adoption = TruffleContract(AdoptionArtifact);
            startObj.contracts.Adoption.setProvider(startObj.web3Provider);
           
            //合约初始化完毕之后，等待执行ETH账户与合约的交互工作！
            startObj.markAdopted();
        });
    },

    //调用智能合约中的getAdoptors函数，查询所有领养者的账号信息！
    markAdopted : function() {
        var apotionInstance;
        startObj.contracts.Adoption.deployed().then(function(instance) {
            apotionInstance = instance;
            console.log("实例账户对象为：");
            console.log(instance);
            var adopters = apotionInstance.getAdoptors.call();
            console.log("从智能合约数组中得到的结果：",adopters);
            //这里的return返回的结果，会传递给下一个then回调函数！
            return adopters;

        }).then(function(adopters) {
                for(i =0; i< adopters.length; i++) {
                    console.log(adopters[i]);
                    if(adopters[i] !== '0x0000000000000000000000000000000000000000') {
                        $('.panel-pet').eq(i).find('button').text('Success').attr('disabled', true);
                    }
                }
            }).catch(function(err) {
                console.log(err.message);
            })
    },

    //按钮事件，如果有点击领养，那么获得领养账户的地址，并调用智能合约中的adoptor方法把当前账号地址存入数组中！
    bindEvents : function () {
        $(document).on('click', '.btn-adopt', function(event) {
            event.preventDefault();
            var apotionInstance;
            var petId = parseInt($(event.target).data('id'));

            startObj.web3.eth.getAccounts(function(error, accounts){
                var account = accounts[0];

                startObj.contracts.Adoption.deployed().then(function(instance){
                    apotionInstance = instance;
        
                    return apotionInstance.adoptor(petId, {from: account});
                    }).then(function(result) {
                    return startObj.markAdopted();
                    } ).catch(function(err) {
                    console.log(err.message);
                });
            });
        });
    }
}


$(function() {
    //初始化前端宠物界面！
    startObj.init();
    //展示完毕宠物信息之后，初始化web3;
    startObj.initWeb3();
    //web3初始化完毕之后，继续初始化合约;
    startObj.initContract();
    //绑定按钮事件，等待用户Adopt领养触发！
    startObj.bindEvents();

});

//html主文件（样式方面的就不提供了，自己搞！！！）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Pete's Pet Shop</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <h1 class="text-center">Pete's Pet Shop</h1>
        <div id="petsRow" class="row">
            
        </div>
    
    </div>

    <div id="petTemplate" style="display:none">
        <div class="col-sm-6 col-md-4 col-lg-3">
          <div class="panel panel-default panel-pet">
            <div class="panel-heading">
              <h3 class="panel-title">Scrappy</h3>
            </div>
            <div class="panel-body">
              <img alt="140x140" data-src="holder.js/140x140"
               class="img-rounded img-center" style="width: 100%;" src="" data-holder-rendered="true">
              <br/><br/>
              <strong>Breed</strong>: <span class="pet-breed">Golden Retriever</span><br/>
              <strong>Age</strong>: <span class="pet-age">3</span><br/>
              <strong>Location</strong>: <span class="pet-location">Warren, MI</span><br/><br/>
              <button class="btn btn-default btn-adopt" type="button" data-id="0">Adopt</button>
            </div>
          </div>
        </div>
      </div>

      <script src="./browserify/main.js"></script>


</body>
</html>