truffle unbox改编系列1:宠物商店pet-shop

宠物商店pet-shop

网上有很多教学如何部署pet-shop的教程，我就不在累赘的阐述了，可以从这里开始学习。
我主要从运行的逻辑和涉及的知识点，让和我一样对app.js文件中如何实现web访问ethereum的逻辑有一些简单的理解

pet-shop文件结构

---

//adoptpet.sol
pragma solidity ^0.4.24;

contract adoptpet{

    mapping(uint=>address)  public adopters;//直接使用映射,将地址与宠物id进行绑定

    function setPet(uint petid) public returns(uint){
        require(0<=petid&&petid<16);
        adopters[petid] = msg.sender;
        return petid;
    }
    //去除了取回领养宠物的函数:主要原因是--点击领取之后,领养按钮将失效,其他人无法重复领养
}

//app.js
App = {
  web3Provider: null,
  contracts: {},

  init: async function() {
    // Load pets.
    $.getJSON('../pets.json', function(data) {
      var petsRow = $('#petsRow');
      var petTemplate = $('#petTemplate');//按照id="petTemplate"下的规则取出'./pet.json'宠物内容

      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-adoptpet').attr('data-id', data[i].id);

        petsRow.append(petTemplate.html());//将取出的宠物信息显示在id="petsRow"部分内
      }
    });

    return await App.initWeb3();
  },

  initWeb3: async function() {
    //Proxy {selectedAddress: "0x2ad7852d02b20acb05d75e6ad43bbc488339a4d8",
    //networkVersion: "5777", _events: {…}, _eventsCount: 0, _maxListeners: 100, …}
    //window.ethereum/window.web3.currentProvider:当前连接以太坊节点
    if(window.ethereum){
    try{
      App.web3Provider = window.ethereum;
    }catch(error){
      console.log("not peer accessed");
      }
    }

    if(window.web3){
      App.web3Provider = window.web3.currentProvider;

    }else{
      App.web3Provider = new Web3.providers.HttpProvider("http://127.0.0.1:8545");
    }
    return App.initContract();
  },

  initContract: async function() {
    $.getJSON('adoptpet.json').then(function(contract){//这里需要调用异步,否则部署合约时会无法获取we3.Provider
    //var contract = $.getJSON('adoptpet.json');/直接传递--部署合约时会无法获取we3.Provider
    App.contracts.adoptpet = TruffleContract(contract);

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

    App.contracts.adoptpet.deployed().then(function(){
    }).catch(function(error){
      console.log(error.message);
    })
  })
    return App.bindEvents();
  },

  bindEvents: function() {
    //$(document)是一个选择器，选中的是整个html所有元素的集合。
	//on:在被选元素及子元素上添加一个或多个事件处理程序。
	//on(events,[selector],[data],fn)
    $(document).on('click', '.btn-adopt', App.handleadoptpet);
  },

  handleadoptpet: function(event) {
    //规定阻止哪个事件的默认动作。这个 event 参数来自事件绑定函数。
    event.preventDefault();

    //event.target:返回哪个 DOM 元素触发了事件
    //parseInt是用于将字符串根据基数转换成整数
    var petId = parseInt($(event.target).data('id'));

    var account = web3.eth.getAccounts(function(err){
      if(err){
        console.log(err);
      }
    })

    App.contracts.adoptpet.deployed().then(function(instance){
        instance.setPet(petId,{from:account}).then( ()=>{ //()=>/function()
          instance.adopters(petId).then((data)=>{
          $('.panel-pet').find('button').eq(petId).text("seccess").attr("disabled",true);})
          .catch(function(err){
            console.log(err);
          })
        })
      })
    }
  };
//窗口加载时,启用app.init函数
$(function() {
  $(window).load(function() {
    App.init();
  });
});

简单理解:实现web端访问ethereum文档app.js内容

---

//app.js
类:APP
  状态变量:web3Provider,contracts
  方法:init,initWeb3,initContract,handleadoptpet
  事件:bindEvents
eth
  web3
  truffle-contract
  合约的部署,实例化,调用
其他:
  .then()/.catch()/console.log()/$(jQuery)

以上是我个人关于app.js文件的整理，应该可以在此基础上衍生出其他合约的web实现逻辑，后期我将继续尝试其他实例…