微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

区块链目前发展很火,有很大发展前景,本文主要是在本地私有链搭建成功后,利用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

   源代码链接https://pan.baidu.com/s/1gfpxXkR 密码: 5jai 

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

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

[html]  view plain  copy
 print ?
  1. <script>  
  2. $("#modaltext").text( 'geth --rpc --rpccorsdomain "'+ window.location.protocol + '//' +"10.132.97.27:8545" + '"' );//IP地址改为你启动私有链的地址  
  3. var Web3 = require('web3');  
  4. var web3 = new Web3();  
  5. web3.setProvider(new web3.providers.HttpProvider('http://10.132.97.27:8545'));  
  6. var number=web3.eth.blockNumber;  
  7. console.log(number);  
  8. </script>  
app.js

copy

  .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这个对后台数据处理已经对区块的实时刷新将区块数据存入数据库,便于前台读取查看:

    copy
     ?
      .controller('mainCtrlInit',function($rootScope, $scope, $location,$http,$q,$interval){  
    1.         //$scope.menuState={show: false};  
    2.         $scope.toggleMenu=function(index) {  
    3.             //console.log(index);  
    4.             //$scope.menuState.index=!$scope.menuState.index;  
    5.             $(".closediv").removeClass("opendiv");  
    6.             $(".div"+index).addClass("opendiv").slidetoggle("slow");  
    7.         };  
    8.         $scope.blockNum = web3.eth.blockNumber;  
    9.         //获取全部accounts  
    10.         // datainit();  
    11.         /**  
    12.         getAllAddress().then(function(result){  
    13.             var address_data=result;  
    14.             accountinit(address_data);  
    15.         });  
    16.         **/  
    17.         getAllTrancation().then(function(result){  
    18.             $scope.transactions=result;  
    19.         function getAllTrancation(){  
    20.             var deferred = $q.defer();//声明承诺  
    21.             $http.get('http://10.132.97.27:8080/ethereum/servlet/AddressAction?action=getTransaction')  
    22.                 .success(function(data){  
    23.                     deferred.resolve(data.allAddress);//请求成功  
    24.                 }).error(function(data){  
    25.                     console.log(data);  
    26.                 });  
    27.             return deferred.promise;   // 返回承诺,这里返回的不是数据,而是API  
    28.         function getAllAddress(){  
    29.             $http.get('http://10.132.97.27:8080/ethereum/servlet/AddressAction?action=getAddress')  
    30.         function accountinit(address_data){  
    31.             var result=address_data;//web3.eth.accounts;  
    32.             var accounts=new Array();  
    33.             for(i in result){  
    34.                 var balance = web3.eth.getBalance(result[i]);  
    35.                 var balanceInEther=web3.fromWei(balance, 'ether');  
    36.                 var account=new Object();  
    37.                 account.addressId=result[i];  
    38.                 account.balance=balance.toNumber();  
    39.                 account.balanceInEther=balanceInEther.toNumber();  
    40.                 accounts.push(account);  
    41.             }  
    42.             $scope.accounts=accounts;  
    43.         //实时刷新区块数据  
    44.         $interval(function () {  
    45.             var deferred = $q.defer();//声明承诺  
    46.             $http.get('http://10.132.97.27:8080/ethereum/servlet/AddressAction?action=getBlockCount')  
    47.                 .success(function(data){  
    48.                     console.log("获取区块数据请求成功"+data.blockNumber);  
    49.                     //deferred.resolve(data.blockNumber);//请求成功  
    50.                     var blockstart=Number(data.blockNumber);  
    51.                     datainit(blockstart);  
    52.                     console.log("获取区块数据请求失败");  
    53.                 });  
    54.         }, 120000);  
    55.         //添加address  
    56. //        datainit(1);  
    57.         function  datainit(blockstart){  
    58.             var data=new Array();  
    59.             var transactions=new Array();  
    60.             var blockend=web3.eth.blockNumber;  
    61.             console.log("-----"+blockstart+"========"+blockend);  
    62.             for(var i=blockstart;i<blockend;i++){  
    63.                 var blockinfoweb3.eth.getBlock(i);  
    64.                 //console.log(i+"----"+blockinfo.miner);  
    65.                 // accountinit(blockinfo.miner);  
    66.                 var  block={  
    67.                     blockId:blockinfo.number,  
    68.                     address:blockinfo.miner,//地址信息  
    69.                     transactionArr:blockinfo.transactions.join()//交易地址  
    70.                 };  
    71.                 data.push(blockinfo.miner);  
    72.                 if(block.transactionArr.length>0){  
    73.                    // console.log(block.transactionArr);  
    74.                     transactions.push(block);  
    75.                 }  
    76.             var address_data=unique(data);  
    77.             //console.log(address_data);  
    78.             if(blockend>blockstart){  
    79.                 addAddressjsON(address_data,transactions,blockend);  
    80.             }  
    81.         function replaceTrans(transactionArr){  
    82.   
    83.         //数组去重  
    84.         function unique(arr) {  
    85.             var result = [], hash = {};  
    86.             for (var i = 0, elem; (elem = arr[i]) != null; i++) {  
    87.                 if (!hash[elem]) {  
    88.                     result.push(elem);  
    89.                     hash[elem] = true;  
    90.             return result;  
    91.         //将查询到的地址存入数据库  
    92.         function addAddressjsON(address_data,blockend){  
    93.             if(address_data.length>0){  
    94.                 var transactionsstr="";  
    95.                 var url="";  
    96.                 if(transactions.length>0 && transactions.length>12){  
    97.                     var n=transactions.length/12;  
    98.                     var m=transactions.length%12;  
    99.                    // console.log(n+"==="+m);  
    100.                     var h=1;  
    101.                             for(var i=0;i<n;i++){  
    102.                                 var transactionsstr01=JSON.stringify(transactions.slice(12*i,12*(i+1)));  
    103.                                 var uri='http://10.132.97.27:8080/ethereum/servlet/AddressAction?action=addTransaction&transactionsstr='+transactionsstr01;  
    104.                                 $http.post(uri).success(function(){  
    105.                                     console.log("transactionsstr保存成功===整除");  
    106.                                 })  
    107.                             }  
    108.                     if(m>0){  
    109.                         var transactionsstr02=JSON.stringify(transactions.slice(12*n,transactions.length));  
    110.                         var uri='http://10.132.97.27:8080/ethereum/servlet/AddressAction?action=addTransaction&transactionsstr='+transactionsstr02;  
    111.                         $http.post(uri).success(function(){  
    112.                             console.log("transactionsstr保存成功==除余");  
    113.                         })  
    114.                     }  
    115.                 }else if(transactions.length>0 && transactions.length<12){  
    116.                         transactionsstr=JSON.stringify(transactions);  
    117.                          var url='http://10.132.97.27:8080/ethereum/servlet/AddressAction?action=addAddress&address_data='+address_data+'&blockend='+blockend+'&transactionsstr='+transactionsstr;  
    118.                         $http.post(url).success(function(){  
    119.                             console.log("address保存成功");  
    120.                         }).error(function(data) {  
    121.                             console.log("address保存失败");  
    122.                         });  
    123.                     }  
    124.                         var  url='http://10.132.97.27:8080/ethereum/servlet/AddressAction?action=addAddress&address_data='+address_data+'&blockend='+blockend;  
    125.                         $http.post(url).success(function(){  
    126.                             console.log("address保存成功");  
    127.                         }).error(function(data) {  
    128.                             console.log("address保存失败");  
    129.                         });  
    130.     });  
    原文转自:http://blog.csdn.net/super_wu1992/article/details/52302672

    版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

    相关推荐