Block chain browser building based on Ethereum

Blockchain development is very hot, there is a great development prospects, this article is mainly in the local private chain after the success, the use of Web3.js, Angularjs and servlet to build the private link block information including address, block information, transaction information and other information display.

Effect Show:

RELATED Links: web3.js api:https://github.com/ethereum/wiki/wiki/javascript-api#web3versionnetwork

AngularJS api:http://www.runoob.com/angularjs/angularjs-http.html

The code is included in some backend Java code, explorer for the front-end code, can be run directly in the Webstorm, need to pay attention to the following places:

Index.html need to speak the IP address to your own private link address:

<script>
$ ("#modaltext"). Text (' Geth--rpc--rpccorsdomain "' + Window.location.protocol + '//' + ') 10.132.97.27:8545 "+" "'),//IP address changed to you start the private chain address
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 style= "font-family:arial, Helvetica, Sans-serif; " Change the >//IP address to the address you initiated the private chain </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 this to the background data processing has been on the block of real-time refresh the chunk data into the database, easy to read the foreground view:

. 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;
        Get all 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 ();//Declaration of Commitment $http. Get (' http://10.132.97.27:8080/ Ethereum/servlet/addressaction?action=gettransaction '). Success (function (data) {DEferred.resolve (data.alladdress);//Request succeeded}). Error (function (data) {Console.log (data);
            });   return deferred.promise;
            Return the promise, here is not the data returned, but the API} function getalladdress () {var deferred = $q. Defer ();/Declaration Commitment $http. Get (' http://10.132.97.27:8080/ethereum/servlet/AddressAction?action=getAddress '). Success (Functio
                    N (data) {deferred.resolve (data.alladdress);//Request succeeded}). Error (function (data) {
                Console.log (data);
            });   return deferred.promise; Return the promise, this is not the data returned, but the API} function Accountinit (address_data) {var result=address_data;//web3.e
            th.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; }//real-time refresh chunk Data $interval (function () {var deferred = $q. Defer ();//Statement Commitment $http. Get (' H
                    Ttp://10.132.97.27:8080/ethereum/servlet/addressaction?action=getblockcount '). Success (function (data) {
                    Console.log ("Get Chunk data request succeeded" +data.blocknumber);
                    Deferred.resolve (Data.blocknumber);//Request successful Var blockstart=number (Data.blocknumber);
                Datainit (Blockstart);
                    }). Error (function (data) {Console.log (data);
                Console.log ("Get Chunk Data request failed");
        });
        }, 120000);
        Add 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,//address information
                TransactionArr:blockinfo.transactions.join ()//trading address};
                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) {}//array de-reset 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; }//Store the queried address in database 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 trans
                        Actionsstr02=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 save succeeded = = remainder");
      })}}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 saved successfully");
                        }). Error (function (data) {Console.log ("address save Failed");
                    }); } 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 saved successfully");
                        }). Error (function (data) {Console.log ("address save Failed");
            }); }
        }
    });

This is a beginner on GitHub on the search, follow-up company internal test development and development of a set, link http://blog.csdn.net/super_wu1992/article/details/77043502, interested can refer to