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

Posted 2023-01-13 宣之于口

利用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代码

<!DOCTYPE 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);

    );