11.11大促主会场
新人页面
精选商品
首月0月租体验,领12个月京东PLUS
自营热卖

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

往事清秋濯 1年前   阅读数 123 0

 

 

 

 

 

上一篇我们在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网络的查询余额的东西就写好了

非常简单

 

 

 

现在来测试一下

 

 

然后随便找一个用户地址

比如

0xaFad1D75b685C14d8B48006286E5da00234F96F8

 

然后查询一下

 

 

成功

 

 

 

 

 

 

 

 

 

 

 

发布了1081 篇原创文章 · 获赞 42 · 访问量 21万+

注意:本文归作者所有,未经作者允许,不得转载

全部评论: 0

    我有话说: