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

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

[html]  view plain  copy

 print ?

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

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

[html]  view plain  copy

 print ?

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

原文转自：http://blog.csdn.net/super_wu1992/article/details/52302672