區塊鏈】利用Node.js開發與合約交互的Web界面

2018-03-11 16:10:37?宣之于口?閱讀數 6128??收藏?更多

分類專欄：?區塊鏈?區塊鏈學習筆記

版權聲明：本文為博主原創文章，遵循?CC 4.0 BY-SA?版權協議，轉載請附上原文出處鏈接和本聲明。

本文鏈接：https://blog.csdn.net/loy_184548/article/details/79517264

利用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];} }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24

一、新建一個項目

新建一個node.js項目并初始化

$ mkdir web3test && cd web3test $ npm init

• 1
• 2

二、導入web3.js

npm install web3 --save

• 1

三、創建web3對象

var Web3 = require("web3"); //創建web3對象 var web3 = new Web3(); // 連接到以太坊節點 web3.setProvider(new Web3.providers.HttpProvider("http://localhost:8545"));

• 1
• 2
• 3
• 4
• 5

可以測試一下:

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

四、調用合約

部署合約：
私有鏈上查看地址，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);

• 1
• 2
• 3
• 4
• 5

調用合約：

/* 查看賬戶余額 */ 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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33

創建賬戶：

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

• 1
• 2

五、與web界面交互

1 . 安裝express

查看：here

npm install express --save

• 1

2 . 導入BigNumber.js

處理大數字需要使用BigNumber庫

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

• 1
• 2
• 3

3 . 調用合約

a. call

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

• 1

b. sendTransaction

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

• 1

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57

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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41

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);});}

總結

以上是生活随笔為你收集整理的区块链】利用Node.js开发与合约交互的Web界面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。