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。因此能够仔细仔细看一看，指望对咱们有些帮忙。