078-使用Web3实现WebUI和Ethereum的交互

上一篇我们在Ropsten测试网络部署了一个合约

我们暂时只能通过remix来访问这个合约

那么我们如何创建Web网页来和这个Eth合约进行交互呢

我们需要用到Web3

web3是node的一个包

所以我们需要用到node,自己安装一下

我们先来写一个小的测试项目

可以查询Ropsten任何用户的余额

创建一个文件夹

然后npm init

初始化完成了,

生成了package.json文件

然后我们来安装web3

npm install web3 --save

安装完毕

然后我们来写一个简单的html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <script src="node_modules/web3/dist/web3.min.js"></script>
</head>
<body>

<div>欢迎来到Ropsten余额查询系统</div>
<input type="text" id="user_address" placeholder="请输入用户地址">
<input type="button" onclick="checkBalance()" value="查询">
<div>
    <span>余额: </span>
    <span id="text_balance"></span>
</div>

</body>
</html>

刚刚我们安装了web3,

现在引入一下web3

<script src="node_modules/web3/dist/web3.min.js"></script>

然后我们来写一个js,操作html

if (typeof web3 !== 'undefined') {
    web3 = new Web3(web3.currentProvider);
} else {
    web3 = new Web3(new Web3.providers.HttpProvider("https://ropsten.infura.io/v3/a1538f216f9f4f1480f97d160d9ecf67"));
}

function checkBalance() {
    let inputUserAddress = document.getElementById("user_address");
    let userAddress = inputUserAddress.value;

    web3.eth.getBalance(userAddress).then(function (balance) {
        console.log('balance:', balance)
        let text_balance = document.getElementById("text_balance");
        text_balance.textContent = balance;
    })
}

这样我们的ropsten网络的查询余额的东西就写好了

非常简单

现在来测试一下