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

ゞ浴缸里的玫瑰 2021-09-17 11:48 174阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70][]

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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70]: /images/20210812/a5b1684dd8e347b0a98427903ea4bbdf.png