【区块链】利用Node.js开发与合约交互的Web界面

利用Node.js开发与合约交互的Web界面

参考地址：here and here

零、在私有链上部署合约

// 本文中用到的MetaCoin合约
pragma solidity ^0.4.2;

contract MetaCoin {
    mapping (address => uint) balances;

    event Transfer(address indexed _from, address indexed _to, uint256 _value);

    function MetaCoin() {
        balances[tx.origin] = 10000;
    }

    function sendCoin(address receiver, uint amount) returns(bool sufficient) {
        if (balances[msg.sender] < amount) return false;
        balances[msg.sender] -= amount;
        balances[receiver] += amount;
        Transfer(msg.sender, receiver, amount);
        return true;
    }

    function getBalance(address addr) returns(uint) {
        return balances[addr];
    }
}

一、新建一个项目

新建一个node.js项目并初始化

$ mkdir web3test && cd web3test
$ npm init

二、导入web3.js

npm install web3 --save

三、创建web3对象

var Web3 = require("web3");
//创建web3对象
var web3 = new Web3();
// 连接到以太坊节点
web3.setProvider(new Web3.providers.HttpProvider("http://localhost:8545"));

可以测试一下:

var version = web3.version.node;
console.log(version);
==>
在app目录下，终端输入：
prodeMacBook-Pro:web3test pro$ node app.js
输出：
Geth/linoy/v1.6.5-stable-cf87713d/darwin-amd64/go1.8.3

四、调用合约

部署合约：
私有链上查看地址，abi可以通过here获取

var abi = [{"constant":false,"inputs":[{"name":"receiver","type":"address"},{"name":"amount","type":"uint256"}],"name":"sendCoin","outputs":[{"name":"sufficient","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"addr","type":"address"}],"name":"getBalance","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"inputs":[],"payable":false,"stateMutability":"nonpayable","type":"constructor"},{"anonymous":false,"inputs":[{"indexed":true,"name":"_from","type":"address"},{"indexed":true,"name":"_to","type":"address"},{"indexed":false,"name":"_value","type":"uint256"}],"name":"Transfer","type":"event"}];

var address = "0x6a0a87bd4da65b39a1b27597edb1a5b505a55a0b";

var metacoin = web3.eth.contract(abi).at(address);

调用合约：

/* 查看账户余额 */
var account_one = web3.eth.accounts[0];
var account_one_balance = metacoin.getBalance.call(account_one);
console.log("account one balance: ", account_one_balance.toNumber());
===>
终端查看：
prodeMacBook-Pro:web3test pro$ node app.js
account one balance:  10000

/* 转账操作 */
var account_one = web3.eth.accounts[0];
var account_two = web3.eth.accounts[1];

var txhash = metacoin.sendCoin.sendTransaction(account_two, 100, { from: account_one });

var myEvent = metacoin.Transfer();
myEvent.watch(function (err, result) {
    if (!err) {
        if (result.transactionHash == txhash) {
            var account_one_balance = metacoin.getBalance.call(account_one);
            console.log("account one balance after sendCoin:", account_one_balance.toNumber());
        }
    } else {
        console.log(err);
    }
    myEvent.stopWatching();
});
====>
这里可能会遇到错误：Error: authentication needed: password or unlock
原因是账户没有解锁：在终端，personal.unlockAccount(user1, "123456")
然后再次尝试可以看到：
account one balance:  10000
account one balance after sendCoin: 9900

创建账户：

var account_three = web3.personal.newAccount("123456");
console.log(account_three);

五、与web界面交互

1 . 安装express

查看：here

npm install express --save

2 . 导入BigNumber.js

处理大数字需要使用BigNumber库

npm install --save bignumber.js
===>
var BigNumber = require('bignumber.js');

3 . 调用合约

a. call

var returnValue = metacoin.getBalance.call(address).toString();

b. sendTransaction

var txhash = metacoin.sendCoin.sendTransaction(address_b, trans_value, {from:address_a});

4 . 界面

六、代码部分

1 . app.js代码

/* 现连接到geth节点，并获取已部署合约的引用 */
var express = require("express");  
var app = express();  
var server = require("http").createServer(app);
var io = require("socket.io")(server);
var BigNumber = require('bignumber.js');

app.use(express.static("public"));

app.get("/", function(req, res){
    res.sendFile(__dirname + "/index.html");
})

// 现连接到geth节点
var Web3 = require("web3");
web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));  


/* 部署合约 */
var abi = [{"constant":false,"inputs":[{"name":"receiver","type":"address"},{"name":"amount","type":"uint256"}],"name":"sendCoin","outputs":[{"name":"sufficient","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"addr","type":"address"}],"name":"getBalance","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"inputs":[],"payable":false,"stateMutability":"nonpayable","type":"constructor"},{"anonymous":false,"inputs":[{"indexed":true,"name":"_from","type":"address"},{"indexed":true,"name":"_to","type":"address"},{"indexed":false,"name":"_value","type":"uint256"}],"name":"Transfer","type":"event"}];

var address = "0x6a0a87bd4da65b39a1b27597edb1a5b505a55a0b";

var metacoin = web3.eth.contract(abi).at(address);

app.get("/register", function(req, res){

    //获取输入的密码
    var password = req.query.password;
    //创建账户
    var account = web3.personal.newAccount(password);
    res.send(account);

})

app.get("/getBalance", function(req, res){

    var address = req.query.address;

    //获取address的余额
    var returnValue = metacoin.getBalance.call(address).toString();
    res.send(returnValue);

})

app.get("/sendcoin", function(req, res){

    var address_a = req.query.address_a;
    var address_b = req.query.address_b;
    var trans_value = req.query.trans_value;

    //转账操作
    var txhash = metacoin.sendCoin.sendTransaction(address_b, trans_value, {from:address_a});
    res.send(txhash);

})
server.listen(8080);

2 . html代码

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>转账操作title>
    <link rel="stylesheet" href="">
head>
<body>
    <div>
        <div> 
            <h3>注册：h3><br>
            <label for="identity">请输入密码：label><input type="text" id="password" >input>
            <button type = "submit"  onclick="register()">注册button>
            <p id = "address_test">地址：p>
        div>
        <div> 
            <h3>查询余额：h3><br>
            <label for="identity">请输入地址：label><input type="text" id="address" >input>
            <button type = "submit" onclick="getBalance()">查询余额button>
            <p id = "address_balance">余额：p>
        div>  
        <div>
            <h3>转账h3>
            <label for="identity">转出用户地址label><input type="text" id="address_a" >input>
            <br><label for="identity">转入用户地址label><input type="text" id="address_b" >input>
            <br><label for="identity">金额label><input type="text" id="trans_value" >input>
            <button type = "submit"  onclick="sendcoin()">确定button>
            <p id = "tx_hash">交易：p>
        div>

    div>
    <script type="text/javascript" src="/sha1.min.js">script>
    <script type="text/javascript" src="/jquery.min.js">script>
    <script type="text/javascript" src="/socket.io.min.js">script>
    <script type="text/javascript" src="/main.js">script>
    <script type="text/javascript" src="/bignumber.js">script>

body>
html>

3 . main.js代码

function register()
{
    var password = document.getElementById("password").value;

    $.get("/register?password=" + password, function(data){
        if(data == "Error")
        {
            $("#address_test").text("An error occured.");
        }
        else
        {
            $("#address_test").html("地址: " + data);
        }
    });
}

function getBalance()
{
    var address = document.getElementById("address").value;

    $.get("/getBalance?address=" + address, function(data){

        if(data == "Error")
        {
            $("#address_balance").text("An error occured.");
        }
        else
        {
            $("#address_balance").html("余额: " + data);
        }
    });
}

function sendcoin()
{
    var address_a = document.getElementById("address_a").value;
    var address_b = document.getElementById("address_b").value;
    var trans_value = document.getElementById("trans_value").value;

    var tx_hash = document.getElementById("tx_hash").value;

    //转账
    $.get("/sendcoin?address_a=" + address_a + "&address_b=" + address_b + "&trans_value=" + trans_value, function(data){

        $("#tx_hash").html("交易: " + data);

    });

}