以太坊区块链浏览器的搭建 - 好文

本文是以太坊和智能合约系列文章中的第三篇《以太坊区块链浏览器的搭建》。系列文章列表为：

* 以太坊单节点私有链环境的搭建 <http://www.360bchain.com/article/151.html>
主要描述环境的搭建以及账户、收益以及挖矿相关知识和命令
* 以太坊多节点私有链环境的搭建 <http://www.360bchain.com/article/157.html>
主要描述多节点的互联以及交易、区块信息（给出一个节点间交易的例子）
* 以太坊区块链浏览器的搭建（当前文章） <http://www.360bchain.com/article/156.html>
主要描述区块链浏览器的搭建以及在浏览器中查看区块和交易信息
* 在以太坊系统下构建第一个智能合约
主要描述truffle的使用，以及如何在以太坊多节点系统中构建智能合约
* 在以太坊系统下构建可升级的智能合约
主要描述如何编写可升级智能合约代码
本文主要描述区块链浏览器的搭建以及在浏览器中查看区块和交易信息

* 基本信息
<http://www.360bchain.com/article/156.html#%E5%9F%BA%E6%9C%AC%E4%BF%A1%E6%81%AF>
* 下载区块链浏览器代码
<http://www.360bchain.com/article/156.html#%E4%B8%8B%E8%BD%BD%E5%8C%BA%E5%9D%97%E9%93%BE%E6%B5%8F%E8%A7%88%E5%99%A8%E4%BB%A3%E7%A0%81>
* 修改配置文件
<http://www.360bchain.com/article/156.html#%E4%BF%AE%E6%94%B9%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6>
* 修改连接以太网节点地址为远程节点地址
<http://www.360bchain.com/article/156.html#%E4%BF%AE%E6%94%B9%E8%BF%9E%E6%8E%A5%E4%BB%A5%E5%A4%AA%E7%BD%91%E8%8A%82%E7%82%B9%E5%9C%B0%E5%9D%80%E4%B8%BA%E8%BF%9C%E7%A8%8B%E8%8A%82%E7%82%B9%E5%9C%B0%E5%9D%80>
* 修改浏览器地址为本地IP地址
<http://www.360bchain.com/article/156.html#%E4%BF%AE%E6%94%B9%E6%B5%8F%E8%A7%88%E5%99%A8%E5%9C%B0%E5%9D%80%E4%B8%BA%E6%9C%AC%E5%9C%B0IP%E5%9C%B0%E5%9D%80>
* 下载bower工具
<http://www.360bchain.com/article/156.html#%E4%B8%8B%E8%BD%BDbower%E5%B7%A5%E5%85%B7>
* 启动区块链浏览器
<http://www.360bchain.com/article/156.html#%E5%90%AF%E5%8A%A8%E5%8C%BA%E5%9D%97%E9%93%BE%E6%B5%8F%E8%A7%88%E5%99%A8>
* 启动以太坊节点
<http://www.360bchain.com/article/156.html#%E5%90%AF%E5%8A%A8%E4%BB%A5%E5%A4%AA%E5%9D%8A%E8%8A%82%E7%82%B9>
* 启动区块链浏览器后台程序
<http://www.360bchain.com/article/156.html#%E5%90%AF%E5%8A%A8%E5%8C%BA%E5%9D%97%E9%93%BE%E6%B5%8F%E8%A7%88%E5%99%A8%E5%90%8E%E5%8F%B0%E7%A8%8B%E5%BA%8F>
* 在浏览器中查看
<http://www.360bchain.com/article/156.html#%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E6%9F%A5%E7%9C%8B>
* 在浏览器中查看区块和交易
<http://www.360bchain.com/article/156.html#%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E6%9F%A5%E7%9C%8B%E5%8C%BA%E5%9D%97%E5%92%8C%E4%BA%A4%E6%98%93>
* 查看区块详情
<http://www.360bchain.com/article/156.html#%E6%9F%A5%E7%9C%8B%E5%8C%BA%E5%9D%97%E8%AF%A6%E6%83%85>
* 查看交易详情
<http://www.360bchain.com/article/156.html#%E6%9F%A5%E7%9C%8B%E4%BA%A4%E6%98%93%E8%AF%A6%E6%83%85>
<>基本信息

操作系统： ubuntu16.04 x86_64
系统内存：大于等于2G
go 版本： go1.10.2
geth版本： 1.8.8-unstable(github当前最新版)
nodeJS版本：v10.0.0（系统apt自带版本）
npm版本： v5.6.0（系统apt自带版本）
bower版本： v1.8.4

<>下载区块链浏览器代码

* root@cc-virtual-machine:/opt# git clone https://github.com/etherparty/
explorer
<>修改配置文件

<>修改连接以太网节点地址为远程节点地址

（192.168.172.201为以太坊节点地址）

* root@cc-virtual-machine:/opt# cd explorer
* root@cc-virtual-machine:/opt/explorer# vim app/app.js
* 将var eth_node_url = 'http://localhost:8545'; 修改为 var eth_node_url =
'http://192.168.172.201:8545';
<>修改浏览器地址为本地IP地址

（192.168.172.201为本地IP地址也为以太坊节点地址，这样可在局域网其他机器访问区块链界面）

* root@cc-virtual-machine:/opt# cd explorer
* root@cc-virtual-machine:/opt/explorer# vim ./package.json
* 将"start": "http-server ./app -a localhost -p 8000 -c-1", 修改为"start":
"http-server ./app -a 192.168.172.201 -p 8000 -c-1",
<>下载bower工具

* root@cc-virtual-machine:/opt/explorer# npm install -g bower -y
* root@cc-virtual-machine:/opt/explorer# bower init
* root@cc-virtual-machine:/opt/explorer# bower install --allow-root
* root@cc-virtual-machine:/opt/explorer# bower install angular --save-dev
--allow-root
选择1，继续往下完成安装

<>启动区块链浏览器

<>启动以太坊节点

注意：需要增加参数： —rpccorsdomain ‘*’

* root@cc-virtual-machine:/opt# geth --datadir ./data/00/ --networkid 18 --
port28000 --rpc --rpcaddr "0.0.0.0" --rpcport 8545 --rpcapi 'db,net,eth,web3' --
rpccorsdomain'*' --nodiscover console
* INFO [05-26|16:44:32] Maximum peer count ETH=25 LES=0 total=25
* INFO [05-26|16:44:32] Starting peer-to-peer node instance=Geth/v1.8.8-
unstable-784aa839/linux-amd64/go1.10.2
* INFO [05-26|16:44:32] Allocated cache and file handles database=/opt/data/00
/geth/chaindata cache=768 handles=512
* INFO [05-26|16:44:32] Initialised chain configuration config="{ChainID: 18
Homestead: 0 DAO: <nil> DAOSupport: false EIP150: <nil> EIP155: 0 EIP158: 0
Byzantium: <nil> Constantinople: <nil> Engine: unknown}"
<>启动区块链浏览器后台程序

使用npm start启动

* root@cc-virtual-machine:/opt/explorer# npm start
*
* > [email protected] prestart /opt/explorer
* > npm install
*
* npm WARN lifecycle [email protected]~postinstall: cannot run in wd %s %
s(wd=%s) [email protected] bower install /opt/explorer
* npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules
/fsevents):
* npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for
[email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux",
"arch":"x64"})
*
* up to date in 5.969s
*
* > [email protected] start /opt/explorer
* > http-server ./app -a 192.168.172.201 -p 8000 -c-1
*
* Starting up http-server, serving ./app on port: 8000
* Hit CTRL-C to stop the server
<>在浏览器中查看

在浏览器搜索栏中输入 http://192.168.172.201:8000/，
<http://192.168.172.201:8000/%EF%BC%8C> 如下图所示

（注：目前客户端所在的主机需要翻墙才能下载googleapis（https://ajax.googleapis.com/ajax/libs）
<https://ajax.googleapis.com/ajax/libs%EF%BC%89> 在线网站中的依赖库，否则将不会显示区块信息。）

<>在浏览器中查看区块和交易

浏览器中将显示区块信息（从最新的区块493先列出）；同时可以看到区块486中有一个交易。如下图所示：

<>查看区块详情

点击上图区块数字486所在的超链接，可以查看区块详情。如下图所示：

<>查看交易详情

点击上图绿色箭头所示的交易HASH，可以查看交易详情。如下图所示：
（注：由于该交易只是确认智能合约的部署，所以所看到的转账的金额为0EtH）

总结
本浏览器代码只是在浏览器中简单展示区块链的区块和交易信息，仅仅提供参考。大家如果有需求，可以进一步修改完善区块链浏览器的功能以及布局设计。

版权声明：B链网原创，严禁修改。转载请注明作者和原文链接

作者：雨后的蚊子

原文链接: http://www.360bchain.com/article/156.html
<http://www.360bchain.com/article/151.html>

热门工具换一换