基于以太坊的区块链浏览器搭建

区块链目前发展很火，有很大发展前景，本文主要是在本地私有链搭建成功后，利用web3.js、AngularJS和servlet对搭建的私有链上区块信息包括地址、区块信息、交易信息等信息的展示。

效果展示：

相关链接：web3.js api:https://github.com/ethereum/wiki/wiki/JavaScript-API#web3versionnetwork

AngularJS api:http://www.runoob.com/angularjs/angularjs-http.html

代码是包含一些后端java代码，explorer为前端代码，可直接在webstorm运行，需要注意的地方如下：

index.html需要讲Ip地址改为你自己的私有链地址：

<script>
$("#modaltext").text( 'geth --rpc --rpccorsdomain "'+ window.location.protocol + '//' +"10.132.97.27:8545" + '"' );//IP地址改为你启动私有链的地址
var Web3 = require('web3');
var web3 = new Web3();
web3.setProvider(new web3.providers.HttpProvider('http://10.132.97.27:8545'));
var number=web3.eth.blockNumber;
console.log(number);
</script>

app.js

.run(function($rootScope,$interval) {
var Web3 = require('web3');
var web3 = new Web3();
web3.setProvider(new web3.providers.HttpProvider('http://10.132.97.27:8545'));<span style="font-family: Arial, Helvetica, sans-serif;">//IP地址改为你启动私有链的地址</span>
$rootScope.web3=web3;
function sleepFor( sleepDuration ){
var now = new Date().getTime();
while(new Date().getTime() < now + sleepDuration){ /* do nothing */ }
}
var connected = false;
if(!web3.isConnected()) {
$('#connectwarning').modal({keyboard: false, backdrop: 'static'})
$('#connectwarning').modal('show')
}
});

mainController.js这个对后台数据处理已经对区块的实时刷新将区块数据存入数据库，便于前台读取查看

.controller('mainCtrlInit',function($rootScope, $scope, $location,$http,$q,$interval){
//$scope.menuState={show: false};
$scope.toggleMenu=function(index) {
//console.log(index);
//$scope.menuState.index=!$scope.menuState.index;
$(".closediv").removeClass("opendiv");
$(".div"+index).addClass("opendiv").slideToggle("slow");
};
$scope.blockNum = web3.eth.blockNumber;
//获取全部accounts
// datainit();
/**
getAllAddress().then(function(result){
var address_data=result;
accountinit(address_data);
});
**/
getAllTrancation().then(function(result){
$scope.transactions=result;
});
function getAllTrancation(){
var deferred = $q.defer();//声明承诺
$http.get('http://10.132.97.27:8080/ethereum/servlet/AddressAction?action=getTransaction')
.success(function(data){
deferred.resolve(data.allAddress);//请求成功
}).error(function(data){
console.log(data);
});
return deferred.promise; // 返回承诺，这里返回的不是数据，而是API
}
function getAllAddress(){
var deferred = $q.defer();//声明承诺
$http.get('http://10.132.97.27:8080/ethereum/servlet/AddressAction?action=getAddress')
.success(function(data){
deferred.resolve(data.allAddress);//请求成功
}).error(function(data){
console.log(data);
});
return deferred.promise; // 返回承诺，这里返回的不是数据，而是API
}
function accountinit(address_data){
var result=address_data;//web3.eth.accounts;
var accounts=new Array();
for(i in result){
var balance = web3.eth.getBalance(result[i]);
var balanceInEther=web3.fromWei(balance, 'ether');
var account=new Object();
account.addressId=result[i];
account.balance=balance.toNumber();
account.balanceInEther=balanceInEther.toNumber();
accounts.push(account);
}
$scope.accounts=accounts;
}
//实时刷新区块数据
$interval(function () {
var deferred = $q.defer();//声明承诺
$http.get('http://10.132.97.27:8080/ethereum/servlet/AddressAction?action=getBlockCount')
.success(function(data){
console.log("获取区块数据请求成功"+data.blockNumber);
//deferred.resolve(data.blockNumber);//请求成功
var blockstart=Number(data.blockNumber);
datainit(blockstart);
}).error(function(data){
console.log(data);
console.log("获取区块数据请求失败");
});
}, 120000);
//添加address
// datainit(1);
function datainit(blockstart){
var data=new Array();
var transactions=new Array();
var blockend=web3.eth.blockNumber;
console.log("-----"+blockstart+"========"+blockend);
for(var i=blockstart;i<blockend;i++){
var blockinfo= web3.eth.getBlock(i);
//console.log(i+"----"+blockinfo.miner);
// accountinit(blockinfo.miner);
var block={
blockId:blockinfo.number,
address:blockinfo.miner,//地址信息
transactionArr:blockinfo.transactions.join()//交易地址
};
data.push(blockinfo.miner);
if(block.transactionArr.length>0){
// console.log(block.transactionArr);
transactions.push(block);
}
}
var address_data=unique(data);
//console.log(address_data);
if(blockend>blockstart){
addAddressJSON(address_data,transactions,blockend);
}
}
function replaceTrans(transactionArr){
}
//数组去重
function unique(arr) {
var result = [], hash = {};
for (var i = 0, elem; (elem = arr[i]) != null; i++) {
if (!hash[elem]) {
result.push(elem);
hash[elem] = true;
}
}
return result;
}
//将查询到的地址存入数据库
function addAddressJSON(address_data,transactions,blockend){
if(address_data.length>0){
var transactionsstr="";
var url="";
if(transactions.length>0 && transactions.length>12){
var n=transactions.length/12;
var m=transactions.length%12;
// console.log(n+"==="+m);
var h=1;
for(var i=0;i<n;i++){
var transactionsstr01=JSON.stringify(transactions.slice(12*i,12*(i+1)));
var uri='http://10.132.97.27:8080/ethereum/servlet/AddressAction?action=addTransaction&transactionsstr='+transactionsstr01;
$http.post(uri).success(function(){
console.log("transactionsstr保存成功===整除");
})
}
if(m>0){
var transactionsstr02=JSON.stringify(transactions.slice(12*n,transactions.length));
var uri='http://10.132.97.27:8080/ethereum/servlet/AddressAction?action=addTransaction&transactionsstr='+transactionsstr02;
$http.post(uri).success(function(){
console.log("transactionsstr保存成功==除余");
})
}
}else if(transactions.length>0 && transactions.length<12){
transactionsstr=JSON.stringify(transactions);
var url='http://10.132.97.27:8080/ethereum/servlet/AddressAction?action=addAddress&address_data='+address_data+'&blockend='+blockend+'&transactionsstr='+transactionsstr;
$http.post(url).success(function(){
console.log("address保存成功");
}).error(function(data) {
console.log("address保存失败");
});
}
var url='http://10.132.97.27:8080/ethereum/servlet/AddressAction?action=addAddress&address_data='+address_data+'&blockend='+blockend;
$http.post(url).success(function(){
console.log("address保存成功");
}).error(function(data) {
console.log("address保存失败");
});
}
}
});

这个是初学时在GitHub上找的，后续公司内部测试开发又开发一套，链接 http://blog.csdn.net/super_wu1992/article/details/77043502，感兴趣的可以参考

基于以太坊的区块链浏览器搭建相关推荐

干货|破解遗传算法——CryptoPups旺财，基于以太坊的区块链游戏（分享实录）
CryptoPups旺财是一个类似谜恋猫的游戏,即将推出新的手机中文版.本文将通过CryptoPups旺财来分享基于以太坊的区块链游戏. 1 游戏结构和技术概述其实我个人认为谜恋猫跟传统的游戏比起来 ...
干货|破解遗传算法——CryptoPups旺财，基于以太坊的区块链游戏（分享实录）...
CryptoPups旺财是一个类似谜恋猫的游戏,即将推出新的手机中文版.本文将通过CryptoPups旺财来分享基于以太坊的区块链游戏. 1 游戏结构和技术概述其实我个人认为谜恋猫跟传统的游戏比起来 ...
开发基于以太坊的区块链底层平台，秘猿科技想做共识数据时代的Oracle
"与其说区块链是比特币的底层技术,不如说比特币是区块链技术的第一个成功的应用."秘猿科技的创始人谢晗剑这样看待区块链和比特币的关系. 秘猿科技是一家从事底层区块链平台开发和共识算法 ...
区块链开发（一）Windows平台搭建基于以太坊的区块链开发环境
引言 Ethereum(以太坊)是一个使开发人员能够建立和发布下一代分布式应用的公共区块链平台. 通过其专用加密货币以太币(Ether)提供去中心化的虚拟机(称为"以太虚拟机"Et ...
2018-11-08 微信小程序上做基于以太坊的区块链Dapp
1.以太坊开发环境搭建 a.Geth 节点的安装下载:https://www.ethereum.org/cli b.创建一个配置文件 genesis.json 用于创建创世块和设置网络 c ...
以太坊开启区块链2.0时代
链客,专为开发者而生,有问必答! 此文章来自区块链技术社区,未经允许拒绝转载. 今天我们唠唠以太坊,这个开启区块链2.0时代的伟大项目. 前面我们说比特币实际上是一个大账本,从比特币白皮书里走出来的区 ...
如何开始学习以太坊及区块链
一. 以太坊和区块链的关系从区块链历史上来说,先诞生了比特币,当时并没有区块链这个技术和名词,然后业界从比特币中提取了技术架构和体系,称之为区块链技术.从比特币提取的区块链技术称之为区块链1. ...
以太坊和区块链实战技术分析详解
想知道更多关于区块链技术知识,请百度[链客区块链技术问答社区] 链客,有问必答!!以太坊和区块链一. 以太坊和区块链的关系从区块链历史上来说,先诞生了比特币,当时并没有区块链这个技 ...
比特币vs分布式账本vs以太坊vs区块链
链客,专为开发者而生,有问必答! 此文章来自区块链技术社区,未经允许拒绝转载. 我们经常被告知,区块链 - 比特币背后的技术 - 不仅将重新布线银行业,还包括社会保障支付,医疗保健甚至数字投票. 到目 ...

基于以太坊的区块链浏览器搭建

基于以太坊的区块链浏览器搭建相关推荐

最新文章

热门文章