区块链】利用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界面的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。