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

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