Web3与智能合约交互实战

链客,专为开发者而生,有问必答!

此文章来自区块链技术社区,未经允许拒绝转载。

Web3与智能合约交互实战

以太坊中智能合约和web3交互实战

最近区块链、以太坊十分的火,所有就会有许多人去进入区块链这个工作,也有许多人去学习。所以在开端学习以太坊的时分,许多人都是自己创建以太坊节点后,运用geth交互。但是不能盼望普通用户经过指令运用dapp。因此我们需求一种友爱的方法来与智能合约交互,那么这种问题的答案便是web3.js。

Web3.js

Web3.js是以太坊官方的API,可以帮忙智能合约开发者运用HTTP或许IPC与本地、长途的以太坊节点交互。实践就一个库的调集。当然了也包括几个库,比如:

web3-eth用来与以太坊区块链和智能合约交互

web3-shh用来控制whisper协议与p2p通讯以及播送

web3-bzz用来与swarm协议交互

web3-utils包括了一些Dapp开发有用的功用

Web3与geth通讯运用的是 JSON-RPC ,这是一种轻量级的RPC协议,整个通讯的模型可以抽象为下图。

树立检验链

在开发的初期的时分,我们并不用用实在的公链,为了开发的效率,一般都是用本地树立检验链。在这儿我们就挑选用Ganache,一个图形化检验软件,可以一键在本地树立以太坊区块检验环境,且用区块链的状态显现出来。

从图中可以看到Ganache会默许创建10个账户,监听地址是http://127.0.0.1:7545,可以实时看到Current Block、Gas Price、Gas Limit等信息。

创建智能合约

现在以太坊官方全力支持的智能合约开发环境是Remix IDE,我们在合约修正页面编写如下代码:

pragma solidity ^0.4.21;

contract InfoContract {

string fName;

uint age;

function setInfo(string _fName, uint _age) public {

  fName = _fName;

  age = _age;

}

function getInfo() public constant returns (string, uint) {

  return (fName, age);

}

}

代码很简略,便是简略的给name和age变量赋值与读取,接下来切换到 run 的 tab 下,将Environment切换成Web3 Provider,并输入我们的检验链的地址http://127.0.0.1:7545,这儿对这三个选项做一简略说明:

Javascript VM:简略的Javascript虚拟机环境,朴实练习智能合约编写的时分可以挑选

Injected Web3:衔接到嵌入到页面的Web3,比如衔接到MetaMask

Web3 Provider:衔接到自定义的节点,如私有的检验网络。

假设衔接成功,那么在下面的Account的选项会默许挑选 Ganache 创建的第一个账户地址。接下来我们点击Create就会将我们的智能合约布置到我们的检验网中。接下来 Remix 的页面不要封闭,在后面编写前端代码时还要用到合约的地址以及ABI信息。

装置Web3

在这之前,先在终端创建我们的项目:

mkdir info

cd info

接下来运用 node.js 的包管理工具 npm 初始化项目,创建package.json 文件,其间保存了项目需求的相关依赖环境。

npm init

一路按回车直到项目创建结束。终究,运转下面指令装置web.js:

npm install web3

创建 UI

在项目目录下创建index.html,在这儿我们将创建基础的 UI,功用包括name和age的输入框,以及一个按钮,这些将经过 jQuery 结束:

Document

Info Contract

    Name

    Age

    Update Info

接下来需求编写main.css文件设定根本的款式:

body {

background-color:#F0F0F0;

padding: 2em;

font-family: 'Raleway','Source Sans Pro', 'Arial';

}

.container {

width: 50%;

margin: 0 auto;

}

label {

display:block;

margin-bottom:10px;

}

input {

padding:10px;

width: 50%;

margin-bottom: 1em;

}

button {

margin: 2em 0;

padding: 1em 4em;

display:block;

}

#info {

padding:1em;

background-color:#fff;

margin: 1em 0;

}

##运用Web3与智能合约交互

UI 创建好之后,在

这段代码是web3.js Github供应的样例,意思是假设web3现已被定义,那么就可以直接当作我们的 provider 运用。假设没有定义,则我们手动指定 provider。

在上面代码的基础上,接下来设置默许的以太坊账户:

web3.eth.defaultAccount = web3.eth.accounts[0];

在上文中我们运用 Ganache 现已创建了 10 个账户了,这儿我们挑选第一个账户当作默许账户。

接下来需求让我们的web3知道我们的合约是什么样的,这儿需求用到合约的 ABI(Application Binary Interface)。ABI可以使我们调用合约的函数,而且从合约中获取数据。

在上文中我们现已在 Remix 中创建了我们的合约,这时重新回到 Remix,在 Compile 的 tab 下我们点击Details 呈现的页面中我们可以拷贝合约的ABI,如下图所示。

将其复制到代码中:

var infoContract = web3.eth.contract(PASTE ABI HERE!);

接下来转到 run 的tab,拷贝合约的地址,将其复制到下面的代码中:

var info = InfoContract.at(‘PASTE CONTRACT ADDRESS HERE’);

结束这些我们就可以调用合约中的函数了,下面我们运用 jQuery 与我们的合约进行交互:

info.getInfo(function(error, result){

if(!error)

    {

        $("#info").html(result[0]+' ('+result[1]+' years old)');

        console.log(result);

    }

else

    console.error(error);

});

$("#button").click(function() {

info.setInfo($("#name").val(), $("#age").val());

});

以上的代码就简略地结束了对合约中两个函数的调用,别离读取和显现name和age变量。

到此我们就结束了悉数的代码,完好代码可以在 InfoContract 中找到。在浏览器中翻开index.html检验效果如下图(输入名字和年龄后改写)。

毕竟也说了,最近区块链以太坊都很火,也就会有许多衍生的使用,需求我们去多学习学习笔记那个跟上节奏嘛。今日就讲到这儿,因此我们需求一种友爱的方法来与智能合约交互,那么这种问题的答案便是web3.js。所以可以仔细仔细看一看,期望对我们有些帮忙。

你可能感兴趣的:(web3,智能合约,实战,交流学习,技术)