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

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

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

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

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){
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. });

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