078 Web3 interact using the WebUI and Ethereum

 

 

 

 

 

Previous We deployed a test network contracts Ropsten

We do this contract can only be accessed by remix

 

So how do we create a Web page to interact with this contract it Eth

We need to use Web3

 

 

node of a packet is web3

So we need to use node, install it yourself

 

 

 

 

Let's write a small test project

Any user can query Ropsten balance

 

Create a folder

Then npm init

 

Initialization is complete,

Generated file package.json

 

 

 

 

Then we install web3

npm install web3 --save

Installed

 

 

 

 

Then we have to write a simple html page

<!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>

 

 

 

 

We just installed a web3,

Now the introduction of what web3

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

 

 

 

 

Then we have to write a js, operation 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;
    })
}

 

 

 

 

Such balance inquiries things our ropsten network was written

very simple

 

 

 

Now to test

 

 

Then just find a user's address

such as

0xaFad1D75b685C14d8B48006286E5da00234F96F8

 

Then check what

 

 

success

 

 

 

 

 

 

 

 

 

 

 

Released 1081 original articles · won praise 42 · views 210 000 +

Guess you like

Origin blog.csdn.net/qq_33781658/article/details/105110841