准备工作
-
使用remix IDE开发智能合约代码,并部署合约到测试链上。请参考《使用remix发布智能合约》
-
安装Ganache,使用Ganache模拟一个以太坊坊节点。请参考《Ganache模拟以太坊区块链节点》
Web3简介
Web3JS是以太坊官方的Javascript API库的集合,通过web3可以开发出用户友好的去中心化应用,Web3与以太坊节点通信实现了 JSON-RPC协议 ,这是一种轻量级的RPC(Remote Procedure Call)协议,整个通信的模型可以抽象为下图。
安装Web3
安装web3之前,需要先安装nodejs和npm,如果不知道怎么安装的可以参考《使用ganche模拟以太坊节点》,里边有介绍到。进入nodejs命令行终端,输入下面命令,创建web3userinfo项目,我们把项目放在e盘,当然也可以放到其它位置上:
D:\ProgramFiles\blockchain\nodejs>e:
E:\>mkdir web3useinfo
E:\>cd web3useinfo
然后,使用 node.js 的包管理工具 npm 初始化项目:
E:\web3useinfo>npm init
下来一路回车完成package.json文件的创建,这个文件用来定义项目基本信息包括项目名称,版本,作者等。接下来,使用下面的命令来安装web3js:
E:\web3useinfo>npm install web3@^0.20.0
以节点模块的方式引入web3,所以安装完成后项目文件里多了一个node_modules文件,文件夹里边就是web3相关的js函数库。
注意:“npm install web3@^0.20.0”,安装0.20.0版本的web3,如果按照官网命令“npm install web3”,安装最新的版本,到目前为止,是无法完成安装的。
创建界面
在项目目录下创建index.html,在这里我们将创建前端界面,功能包括姓名和年龄的输入框,以及一个按钮,这些将通过 jQuery 实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="./node_modules/web3/dist/web3.min.js"></script><!—引入web3-->
</head>
<body>
<div class="container">
<h1>用户信息智能合约</h1>
<h2 id="info"></h2>
<label for="name" class="col-lg-2 control-label">姓名</label>
<input id="name" type="text">
<label for="name" class="col-lg-2 control-label">年龄</label>
<input id="age" type="text">
<button id="button">更新信息</button>
</div>
<script src="./node_modules/ jquery-3.2.1/jquery-3.2.1.slim.min.js"></script>
<script src=”./app/index.js”>
// 引入更新和读取智能合约的代码
</script>
</body>
</html>
接下来需要编写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;
}
#instructor {
padding:1em;
background-color:#fff;
margin: 1em 0;
}
到此页面已经准备好了。
编写交互的代码
使用Web3与智能合约交互,在项目根目录下新建文件./app/index.js,修改html页面的<script src=”./app/index.js”></scrip>脚本,引入交互的代码。
可以开始编写在index.js代码,首先创建web3实例,并连接我们的GANACHE以太坊节点:
if (typeof web3 !== 'undefined') {
web3 = new Web3(web3.currentProvider); //可以用来连接metamask Provider
} else {
// 创建新的provider,连接本地以太坊节点,我们可以连接ganache作为模拟节点
web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:7545"));
}
|
上面代码作用是如果web3已经被定义,那么就可以直接当作我们的provider 使用。如果没有定义,则我们手动指定 provider。
在上面代码的基础上,接下来设置默认的以太坊账户:
web3.eth.defaultAccount = web3.eth.accounts[0];
Ganache安装完成后,默认自动创建了 10 个账户了提供给我们使用,这里我们选择第一个账户当作默认账户。
接下来需要获取合约的 ABI(Application Binary Interface)和合约地址,简单来说,合约地址是用来区分不同合约的,而ABI是用来定义合约拥有什么的功能。只有知道了合约的地址和ABI才可以和合约进行交互。假设已经发布了UserInfoContract合约,并获取到ABI后,把ABI粘贴到下面方法里。
var userInfoContract = web3.eth.contract(粘贴合约ABI);
如果没有发布UserInfoContract合约,可以参考《使用remix发布智能合约》。接下来拷贝合约的地址,将其复制到下面的代码中:
var userInfo = userInfoContract.at('粘贴合约地址');
完成这些我们就可以调用合约中的函数了,下面使用 jQuery 与我们的合约进行交互:
serInfo.getUser(function(error, result){
if(!error)
{
$("#info").html(result[0]+' ('+result[1]+' 岁 )');
console.log(result);
}
else
console.error(error);
});
$("#button").click(function() {
info.setUser($("#name").val(), $("#age").val());
});
以上的代码就简单地实现了对合约中两个函数的调用,分别读取和显示姓名(userName)和年龄(userAge)变量。
到此我们就完成了全部的代码, index.html测试效果如下图(输入名字和年龄后刷新)。
总结一下,通过这一课程,介绍了使用web3js,web页面和智能合约进行交互。
参考文献
-
Interacting with a Smart Contract through Web3.js :
(Tutorial)) https://coursetro.com/posts/code/99/Interacting-with-a-Smart-Contract-through-Web3.js-(Tutorial