DApp开发实战：手把手教你查询区块与交易信息

区块链公开性的魅力

去中心化世界一切皆可追溯。得益于区块链的不可篡改特性，任何人都能复盘整条链的历史。这也是开发者构建去中心化应用（DApp）时，最常被调用的能力之一：实时查询区块高度、区块哈希、交易金额、手续费、发币地址等数据。
以下项目要点一次读懂：

整体技术栈：前端 React + TypeScript，中间层 web3.js / ethers.js，数据源 Infura 以太坊主网。
关键词聚焦：DApp开发、区块高度查询、交易信息获取、web3.js教程、ethers.js教程、Infura节点、以太坊浏览器核对、去中心化应用实战。

项目规划：可视化区块浏览器雏形

1.1 页面布局

区域	作用	所用技术
标题	告诉用户“我能在本页干什么”	纯文本
网络输入框	玩家自定义 RPC Endpoint（官方/自建/测试网）	React Ref
区块查询区	左侧 web3.js、右侧 ethers.js 并列展示结果，方便比对	PromiseAll
交易查询区	同上	PromiseAll

为了让主角聚焦于“数据获取”而非“UI 炫酷”，样式统一放在独立的 CSS，逻辑文件只关心函数调用。

1.2 项目目录

src
 ├─ app
 │   ├─ pages
 │   │   └─ get_information.tsx   # 组件、状态、函数
 │   └─ style
 │       └─ get_information.css   # 视觉层

访问路径：/get_information

1.3 精简数据模型

区块信息

class BlockInfo {
  BlockHeight:number   // 区块高度
  BlockHash:string     // 本区块哈希
  PreviousHash:string  // 前一区块哈希
}

交易信息

class TransactionInfo {
  BlockHeight:number  // 所在区块高度
  Hash:string         // 交易哈希
  From:string         // 发送方
  To:string           // 接收方
  Amount:string       // 金额（单位：ETH）
  Fee:string          // 手续费（单位：ETH）
}

只做关键字段展示，避免整个区块或交易对象一股脑塞满屏幕。

使用 web3.js 获取链上数据

2.1 前置：安装与引入

npm i web3

import Web3 from 'web3';
import { formatEther } from 'web3-utils';

2.2 核心函数

目标	一行总结实现方式	代码解析
查询最新高度	直接拿 `blockNumber`	`web3.eth.getBlockNumber()`
根据高度查询区块	路径：`getBlock(height)`	`web3.eth.getBlock(blockNumber)`
根据哈希查询区块	同上，传入哈希即可	`web3.eth.getBlock(blockHash, true)`
根据哈希查询交易	拿交易对象返回主体信息	`web3.eth.getTransaction(txHash)`

示例：获取最新区块高度

const url = urlRef.current?.value || '';
const web3 = new Web3(url);

web3.eth.getBlockNumber()
  .then(blockNumber => setLastBlockNumber(Number(blockNumber)))
  .catch(console.error);

2.3 错误处理常用模板

.catch(err => alert('读取链上信息失败：' + err.message));

使用 ethers.js 获取链上数据

关键词：ethers.js教程，简洁的链上交互利器。

3.1 安装与引入

npm i ethers

import { ethers } from 'ethers';
import { formatEther } from 'ethers';

3.2 核心函数

ethers 的 API 样式与 web3 类似，但使用 provider.getBlockNumber()、provider.getBlock() 与 provider.getTransaction()，类型与命名更直观：

const provider = new ethers.JsonRpcProvider(url);
await provider.getBlock(height);
await provider.getTransaction(txHash);

对比口诀：web3=实例.方法 vs ethers=provider.方法；变量命名更语义化。

连接真正的以太坊主网 Infura

4.1 注册专属 RPC Endpoint

打开 Infura 中文官网
注册 / 登录后点击 Create New API Key
产品类型选 Web3 API，名字随意
选择 Ethereum Mainnet，复制节点 URL，形如：

https://mainnet.infura.io/v3/YOUR_PROJECT_ID

将链接粘贴到我们页面的「网络输入框」即可完成主网连接。无需自建节点、一键即用。

👉 想要30秒一键获取专属RPC端点？跟着步骤做

4.2 主网验证小技巧

打开 以太坊浏览器（etherscan.io）→ Blocks → 最新区块高度
回到我们的 DApp 点击「查最新高度」
两次数字对上即连接成功

最终效果：四步验证数据正确性

步骤	动作	对比验证工具	成功率
①	填入 Infura RPC URL	—	简单位置输入
②	获取最新区块高度	etherscan.io Blocks	✔
③	输入高度或哈希查看区块详情	etherscan.io Block Page	✔
④	拿交易哈希查交易信息	etherscan.io Tx Page	✔

若用 Ganache 做本地调试，可将 URL 改成 http://127.0.0.1:7545，测试交易更容易复现。

FAQ 从开发者角度

Q1：web3.js 与 ethers.js 该选哪个？
A：

web3.js 生态庞大、老项目多，API 偏向 “一次全量返回”，学习资料密集。
ethers.js 体积更小、Provider/Signer 概念清晰，更适合新项目与 TypeScript。
一句话总结：新项目首选 ethers，老项目维护用 web3。

Q2：为什么有时区块哈希返回 null？
A：多半发生在硬分叉前的废弃分叉区块或轻节点未存储完整历史。换完整节点或耐心等待即可。

Q3：Infura 每天调用次数有限制吗？
A：免费账户每天 100k 次请求，常规演示或个人项目足够；商用请升级套餐。

Q4：如何衡量一笔交易的“真实”手续费？
A：公式：gasUsed * gasPrice = Fee。获取交易回执(receipt)得到 gasUsed 再乘当前 gasPrice 即可。

Q5：主网测试太烧钱，有没有替代方案？
A：

本地：Ganache CLI 一键起 10 个账户。
在线：Goerli、Sepolia 测试网免费领水；使用方式与主网完全一致。

拓展阅读：交易也自己发起

数据查询已玩转，下一篇将进入真正激动人心的环节——链上交易签名与广播。届时我们将用 ethers.js 构造一笔转账，并用 MetaMask 完成最终确认。

👉 提前锁定下一篇，抢先体验链上第一笔亲手发出的交易

现在你已经：

用 web3.js 和 ethers.js 都能查区块与交易
熟记 Infura 注册与使用要点
学会把查询结果与 以太坊浏览器 交叉验证

区块链的公开性 就是你的超级数据库，去寻找下一个奇思妙想吧！