区块链】利用Node.js开发与合约交互的Web界面
2024-04-04 21:12:46
区块链】利用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界面相关推荐
- 蚂蚁区块链BaaS平台应用开发指南（五）：JS SDK的接入
基于JavaScript SDK的接入 在上一节中,我们通过JavaSDK接入了我们的目标链并调用合约成功.在本节中,我们将通过JS SDK实现同样的调用.JS SDK可以集成在Web应用中,运行在浏 ...
- 83998 连接服务器出错_新生福利 | 使用 Node.Js 开发服务器
点击蓝字关注,创智助你长姿势 Node.js 是一个 Javascript 运行环境 (runtime),发布于 2009 年 5 月,由 Ryan Dahl 开发.实际上它是对 Google V8 ...
- eos 区块链 java 开发_EOS区块链用什么语言开发？
最近大热的EOS,代表了区块链技术发展到了新的阶段,那么EOS区块链用什么语言开发的呢?答案是C++. 学习区块链开发,主要学好3条公链就足够了,就是比特币.以太坊.EOS,因为他们分别是区块链1.0 ...
- 区块链技术在软件开发中的应用
如果你是一名软件开发者或者IT从业者,你一定已经听说过区块链技术.区块链是一种基于密码学的分布式账本技术,被广泛应用于数字货币.金融.物联网等领域.但是,除了这些领域之外,区块链技术还可以在软件开发中 ...
- 赛联区块链培训：Web3的核心要素——区块链、加密资产、智能合约和预言机
在2008年,中本聪发布了比特币白皮书,彻底颠覆了我们对数字化交易的概念,并首次提出了一种无需可信中间方的安全在线交易模式.中本聪写道:"需要基于加密证明,而非信任,来建立电子支付系统.&q ...
- 02区块链誓言DAPP项目开发实战学习笔记
1.DAPP开发 1.1 前端页面使用HTML展示 (1)vue (2)react 1.2 后端数据部署到区块链上 (1)编写合约 (2)部署合约,选择网络: 私有网络: 以太坊官方提供的网络: 主网 ...
- 如何更好的利用Node.js的性能极限
通过使用非阻塞.事件驱动的I/O操作,Node.js为构建和运行大规模网络应用及服务提供了很好的平台,也受到了广泛的欢迎.其主要特性表现为能够处理庞大的并且高吞吐量的并发连接,从而构建高性能.高扩展性 ...
- solidity payable_以太坊区块链搭建与使用(五)-智能合约Solidity
一.智能合约Solidity开发工具 1.remix-ide http://remix.ethereum.org/ 在线版本,也可以去github下载安装到本地.开发.编译.发布.执行.测试 2.re ...
- 蚂蚁区块链BaaS平台应用开发指南（四）：JavaSDK的接入
在尝试本节的样例代码前,需要保证目标智能合约已经按照蚂蚁区块链BaaS平台应用开发指南(三):从一个简单合约开始中的做法编译部署成功. 基于JavaSDK的接入 在上一节里,我们通过Cloud IDE ...
最新文章
- c# for 应输入;
- 【风控建模】互联网金融-机器学习及评分卡构建
- 使用Apriori算法进行关联分析
- c1200 写频软件_摩托罗拉XIR C1200数字对讲机试用——来自HAM族的呼叫
- android:自己实现能播放网络视频url的播放器
- sublime快捷键收藏
- “父母双学霸, 生娃是学渣”的科学解释是什么？
- 剖析Caffe源码之Net---Net构造函数
- 数据结构期末复习之平衡二叉树
- elasticsearch中文分词
- 大一计算机引论知识点,计算机引论知识点2015.doc
- java pdf合并_利用iText 合并PDF与分解PDF的例子
- 布朗运动 1 | 基本概念与性质
- nssa和stub_华为路由器OSPF设置之NSSA和STUB
- “华为杯”山东理工大学第十一届 ACM程序设计竞赛 我不是股神
- 计算机技术在生物学中的应用鲁东大学,生物科学与技术学院
- 使用matlab画图中图
- 嵌入式设备开发专题《NB-IoT开发，解读SIM卡、USIM卡、UICC卡、eSIM卡的区别》
- 通过两个小例子，更快了解-Xms -Xmx
- confluence 使用教程
热门文章
- 转 Oracle 删除表,oracle 中删除表 drop delete truncate 的区别
- matlab 高斯一阶导,将Matlab高斯导数转换为Opencv
- linux配置tomcat内存配置文件,Linux与Windows下tomcat内存设置
- 生成html页面的ftl文件,FreeMarker生成静态HTML页面的工具类FreeMarkerUtil
- makefile 最简单用法
- Markovdecisionprocesses_Discretestochasticdynamicprogramming下载
- CUDA编程之快速入门
- amh支持java吗_AMH 6.0 发布，国内领先的云主机面板
- arima模型 p q d 确定_基于ARIMA预测股指期货价格走势
- Leetcode 240.剑指 Offer 06. 从尾到头打印链表 (每日一题 20210728)