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

凌云  收藏于2018-02-05   转藏1次

区块链目前发展很火，有很大发展前景，本文主要是在本地私有链搭建成功后，利用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 >//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，感兴趣的可以参考


 阅读全部内容  
点击查看
特别重申：本篇文档资料为 “好网角收藏夹” 注册用户(收藏家)上传共享，仅供参考之用，请谨慎辨别，不代表本站任何观点。
好网角收藏夹为网友提供资料整理云存储服务，仅提供信息存储共享平台。

信息删除举报或发邮件到：dongye2016@qq.com
TOP
下载连接中...
返回

提示信息

确定 返回

添加文章收藏

更多设置 (选填)

阅读权限：

转藏到我的收藏夹

非法或侵权内容举报：

提交 (如果是侵权投诉，请将相关证明材料发送到邮箱：374524223@qq.com)

登录好网角

 
获取
登录/注册
QQ 微博微信
注册是视为同意用户服务协议账号密码登录

loading