078 Web3 interactúan utilizando la WebUI y Etereum

 

 

 

 

 

Nos anterior desplegado una red de contratos de prueba Ropsten

Hacemos este contrato sólo se puede acceder por la remezcla

 

Entonces, ¿cómo crear una página web para interactuar con este contrato que Eth

Tenemos que utilizar WEB3

 

 

nodo de un paquete es web3

Así que tenemos que utilizar nodo, instalarlo usted mismo

 

 

 

 

Vamos a escribir un pequeño proyecto de prueba

Cualquier usuario puede consultar el equilibrio Ropsten

 

Crear una carpeta

init NPM

 

La inicialización se ha completado,

package.json archivo generado

 

 

 

 

Entonces instalamos web3

NPM instalar web3 --save

instalado

 

 

 

 

Entonces tenemos que escribir una simple página 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>

 

 

 

 

Acabamos de instalar un web3,

Ahora la introducción de lo web3

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

 

 

 

 

Entonces tenemos que escribir js, operación 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;
    })
}

 

 

 

 

Tales consultas de saldo cosas nuestra red Ropsten fue escrito

muy sencillo

 

 

 

Ahora a prueba

 

 

A continuación, sólo encontrar la dirección de un usuario

tal como

0xaFad1D75b685C14d8B48006286E5da00234F96F8

 

A continuación, comprobar lo

 

 

éxito

 

 

 

 

 

 

 

 

 

 

 

Liberadas 1081 artículos originales · ganado elogios 42 · vistas 210 000 +

Supongo que te gusta

Origin blog.csdn.net/qq_33781658/article/details/105110841
Recomendado
Clasificación