DApp开发实战：如何查询区块链与交易信息

在区块链技术中，不可篡改性 是核心理念之一，这使历史数据的查询变得尤为重要。能够获取并验证链上信息，是去中心化应用（DApp）开发中的关键环节。本文将介绍如何使用主流工具查询区块与交易数据，并实现与以太坊主网的连接。

项目规划与结构设计

页面布局规划

标题区域：说明本页功能与目标
网络选择区域：允许用户输入自定义以太坊网络节点地址
区块查询区域：分别使用 web3.js 和 ethers.js 提供多种区块查询方式
交易查询区域：提供基于交易哈希的查询功能，并列展示两种库的实现

项目文件结构

├── src
│   ├── app
│   ├── pages
│   │   ├── get_information.tsx    # 主要逻辑与布局
│   ├── style
│   │   ├── get_information.css    # 页面样式

最终页面将路由至 /get_information。

数据模型定义

为简化展示，我们提取了区块和交易的关键属性：

// 区块信息模型
class BlockInfo {
  BlockHeight: number     // 区块高度
  BlockHash: string       // 区块哈希值
  PreviousHash: string    // 前一区块哈希值
}

// 交易信息模型
class TransactionInfo {
  BlockHeight: number     // 交易所在区块高度
  Hash: string            // 交易哈希值
  From: string            // 发送方地址
  To: string              // 接收方地址
  Amount: string          // 交易金额
  Fee: string             // 交易手续费
}

使用 web3.js 获取链上数据

查询区块信息

以下是三个核心功能的代码示例：

// 获取最新区块高度
const getBlockHeightWeb3 = () => {
  const web3 = new Web3(nodeUrl);
  web3.eth.getBlockNumber()
    .then(blockNumber => {
      setLastBlockNumberWeb3(Number(blockNumber));
    })
    .catch(error => console.error('获取失败:', error));
}

// 根据区块高度查询区块
const getBlockByHeightWeb3 = (blockNumber) => {
  web3.eth.getBlock(blockNumber)
    .then(blockInfo => {
      if (blockInfo) {
        const blockData = new BlockInfo();
        blockData.BlockHeight = Number(blockInfo.number);
        blockData.BlockHash = blockInfo.hash;
        blockData.PreviousHash = blockInfo.parentHash;
        setBlockByHeightWeb3(blockData);
      }
    })
    .catch(error => alert('查询错误: '+ error));
}

// 根据区块哈希查询区块
const getBlockByHashWeb3 = (blockHash) => {
  web3.eth.getBlock(blockHash, true)
    .then(blockInfo => {
      // 数据处理逻辑同上
    })
    .catch(error => alert('查询错误: '+ error));
}

查询交易信息

// 通过交易哈希查询交易详情
const getTransactionWeb3 = (transactionHash) => {
  web3.eth.getTransaction(transactionHash)
    .then(transactionInfo => {
      if (transactionInfo) {
        const txData = new TransactionInfo();
        txData.From = transactionInfo.from;
        txData.To = transactionInfo.to;
        txData.Amount = formatEther(transactionInfo.value);
        txData.Fee = formatEther(transactionInfo.gasPrice);
        txData.BlockHeight = Number(transactionInfo.blockNumber);
        txData.Hash = transactionInfo.hash;
        setTransactionWeb3(txData);
      }
    })
    .catch(error => alert('交易查询失败: '+ error));
}

使用 ethers.js 获取链上数据

查询区块信息

// 获取最新区块高度
const getBlockHeightEthers = () => {
  const provider = new ethers.JsonRpcProvider(nodeUrl);
  provider.getBlockNumber()
    .then(blockNumber => setLastBlockNumberEthers(blockNumber))
    .catch(e => alert("error: "+e));
}

// 根据区块高度查询
const getBlockByHeightEthers = (blockNumber) => {
  provider.getBlock(blockNumber)
    .then(blockInfo => {
      if (blockInfo) {
        const blockData = new BlockInfo();
        blockData.BlockHeight = blockInfo.number;
        blockData.BlockHash = blockInfo.hash;
        blockData.PreviousHash = blockInfo.parentHash;
        setBlockByHeightEthers(blockData);
      }
    })
    .catch(error => alert('查询错误: '+ error));
}

查询交易信息

// 通过交易哈希查询交易
const getTransactionEthers = (transactionHash) => {
  provider.getTransaction(transactionHash)
    .then(transactionInfo => {
      if (transactionInfo) {
        const txData = new TransactionInfo();
        txData.From = transactionInfo.from;
        txData.To = transactionInfo.to;
        txData.Amount = formatEther(transactionInfo.value);
        txData.Fee = formatEther(transactionInfo.gasPrice);
        txData.BlockHeight = transactionInfo.blockNumber;
        txData.Hash = transactionInfo.hash;
        setTransactionEthers(txData);
      }
    })
    .catch(error => alert('交易查询失败: '+ error));
}

连接至以太坊主网

要连接以太坊主网，您可以使用节点服务提供商（如 Infura）或自己运行的完整节点。以下是使用 Infura 的基本流程：

访问 Infura 官网并注册账户
登录后创建新的 API KEY
选择 Web3 API 网络并命名为项目名称
在 Ethereum 部分选择 MAINNET 网络
复制生成的 HTTPS 端点URL

获取URL后，即可将其作为节点地址填入DApp中进行查询。

👉 获取专业节点服务并构建更稳定应用

数据验证与结果展示

通过以下步骤验证查询结果的正确性：

将获得的 Infura URL 填入输入框
点击查询最新区块高度，并与 Etherscan 上的数据对比
通过区块高度或哈希查询特定区块详情，比对区块哈希、父哈希等字段
使用交易哈希查询交易数据，验证地址、金额和手续费信息

所有通过 web3.js 和 ethers.js 获取的数据都应与区块链浏览器显示的信息完全一致。

提示：在开发测试阶段，可以使用 Ganache 创建本地模拟区块链网络，只需将 URL 设置为 http://127.0.0.1:7545（端口可能因配置而异）。

常见问题

1. 为什么需要查询区块链数据？

区块链数据公开透明且不可篡改，查询这些数据可以验证交易状态、跟踪资产流动和审计智能合约操作，是DApp的基础功能之一。

2. web3.js 与 ethers.js 有何主要区别？

web3.js 是以太坊原始库，功能全面但体积较大；ethers.js 更轻量且模块化，提供更简洁的API设计和更好的错误处理机制。

3. 如何选择适合自己的开发库？

对于新项目，建议使用 ethers.js，因其学习曲线平缓且文档友好。如需与现有 web3.js 项目兼容或需要特定功能，则可继续使用 web3.js。

4. 查询时遇到"cannot read property of null"错误怎么办？

这通常表示查询条件无匹配结果，请检查区块高度/哈希或交易哈希是否正确，并确认连接的节点已同步到最新区块。

5. 为什么需要Infura等节点服务？

直接运行完整节点需要大量存储资源和带宽，使用节点服务可以让开发者专注于DApp开发而不必维护底层基础设施。

6. 如何确保查询性能？

建议实施缓存策略减少重复查询，对频繁访问的数据进行本地存储，并考虑使用订阅功能监听新区块而非持续轮询。

结语

区块链数据的透明性和可验证性为去中心化应用开发奠定了坚实基础。通过本文介绍的方法，您可以轻松查询区块与交易信息，为开发更复杂的DApp功能做好准备。

掌握这些查询技能后，您将能够：使用 web3.js 和 ethers.js 高效获取链上数据、通过 Infura 连接以太坊主网，以及验证查询结果的准确性。

👉 探索更多区块链开发工具与资源