【CryptoZombies - 1 Solidity 教程】008事件与Web3.js导入

落日映苍穹つ 2021-06-11 15:14 317阅读 0赞

**目录**

一、前言

二、事件（Events）

1、返回值格式

1、实战

1.要求

2.代码

三、Web3.js

--------------------

# 一、前言 #

看了一些区块链的教程，论文，在网上刚刚找到了一个项目实战，CryptoZombies。从这篇博客开始总结自己的学习笔记，与大家一同分享。

如果你想了解更多有关于机器学习、深度学习、区块链、计算机视觉等相关技术的内容，想与更多大佬一起沟通，那就扫描下方二维码加入我们吧！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NodWl5aXhpbg_size_36_color_FF36FF_t_70][]

# 二、事件（Events） #

## 1、返回值格式 ##

**事件** 是合约和区块链通讯的一种机制。前端应用“监听”某些事件，并做出反应。格式示例如下：

event IntegersAdded(uint x, uint y, uint result);
    
    function add(uint _x, uint _y) public {
      uint result = _x + _y;
      //触发事件，通知app
      IntegersAdded(_x, _y, result);
      return result;
    }

app 前端可以监听这个事件。JavaScript 实现如下:

YourContract.IntegersAdded(function(error, result) { 
      
    }

## 1、实战 ##

### 1.要求 ###

1. 定义一个 `事件` 叫做 `NewZombie`。 它有3个参数: `zombieId` (`uint`)， `name` (`string`)， 和 `dna`(`uint`)。

2. 修改 `_createZombie` 函数使得当新僵尸造出来并加入`zombies`数组后，生成事件`NewZombie`。

3. 需要定义僵尸`id`。 `array.push()` 返回数组的长度类型是`uint` - 因为数组的第一个元素的索引是 0， `array.push() - 1` 将是我们加入的僵尸的索引。 `zombies.push() - 1` 就是 `id`，数据类型是 `uint`。在下一行中你可以把它用到 `NewZombie` 事件中。

### 2.代码 ###

这里的代码是 CryptoZombies-Solidity 第一课的全部代码。

pragma solidity ^0.4.25;
    
    contract ZombieFactory {
    
        // 这里建立事件
        event NewZombie(uint zombieId , string name , uint dna);
    
        uint dnaDigits = 16;
        uint dnaModulus = 10 ** dnaDigits;
    
        struct Zombie {
            string name;
            uint dna;
        }
    
        Zombie[] public zombies;
    
        function _createZombie(string _name, uint _dna) private {
            //zombies.push(Zombie(_name, _dna));
            // 这里触发事件
            uint id  = zombies.push(Zombie(_name, _dna)) - 1;
            NewZombie(id, _name ,_dna);
        }
    
        function _generateRandomDna(string _str) private view returns (uint) {
            uint rand = uint(keccak256(_str));
            return rand % dnaModulus;
        }
    
        function createRandomZombie(string _name) public {
            uint randDna = _generateRandomDna(_name);
            _createZombie(_name, randDna);
        }
    
    }

# 三、Web3.js #

以太坊有一个 JavaScript 库，名为**Web3.js**。下面是Web3.js 代码示例

// 下面是调用合约的方式:
    var abi = /* abi是由编译器生成的 */
    var ZombieFactoryContract = web3.eth.contract(abi)
    var contractAddress = /* 发布之后在以太坊上生成的合约地址 */
    var ZombieFactory = ZombieFactoryContract.at(contractAddress)
    // `ZombieFactory` 能访问公共的函数以及事件
    
    // 某个监听文本输入的监听器:
    $("#ourButton").click(function(e) {
      var name = $("#nameInput").val()
      //调用合约的 `createRandomZombie` 函数:
      ZombieFactory.createRandomZombie(name)
    })
    
    // 监听 `NewZombie` 事件, 并且更新UI
    var event = ZombieFactory.NewZombie(function(error, result) {
      if (error) return
      generateZombie(result.zombieId, result.name, result.dna)
    })
    
    // 获取 Zombie 的 dna, 更新图像
    function generateZombie(id, name, dna) {
      let dnaStr = String(dna)
      // 如果dna少于16位,在它前面用0补上
      while (dnaStr.length < 16)
        dnaStr = "0" + dnaStr
    
      let zombieDetails = {
        // 前两位数构成头部.我们可能有7种头部, 所以 % 7
        // 得到的数在0-6,再加上1,数的范围变成1-7
        // 通过这样计算：
        headChoice: dnaStr.substring(0, 2) % 7 + 1，
        // 我们得到的图片名称从head1.png 到 head7.png
    
        // 接下来的两位数构成眼睛, 眼睛变化就对11取模:
        eyeChoice: dnaStr.substring(2, 4) % 11 + 1,
        // 再接下来的两位数构成衣服，衣服变化就对6取模:
        shirtChoice: dnaStr.substring(4, 6) % 6 + 1,
        //最后6位控制颜色. 用css选择器: hue-rotate来更新
        // 360度:
        skinColorChoice: parseInt(dnaStr.substring(6, 8) / 100 * 360),
        eyeColorChoice: parseInt(dnaStr.substring(8, 10) / 100 * 360),
        clothesColorChoice: parseInt(dnaStr.substring(10, 12) / 100 * 360),
        zombieName: name,
        zombieDescription: "A Level 1 CryptoZombie",
      }
      return zombieDetails
    }

# 彩蛋：卡哇伊僵尸-勇往直前 #

奋斗的人生，需要勇往直前。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NodWl5aXhpbg_size_36_color_FF95FF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NodWl5aXhpbg_size_56_color_F625FF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NodWl5aXhpbg_size_36_color_FF36FF_t_70]: /images/20210516/7a01e52f13e74ba48776a193a3d094f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NodWl5aXhpbg_size_36_color_FF95FF_t_70]: /images/20210516/41edba63bb5947b6893fca00fb6ea7cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NodWl5aXhpbg_size_56_color_F625FF_t_70]: /images/20210516/673265c6f99345c5a81ceed4c5ae2181.png