实现一个简单的比特币：Part 4 - 一个简单的 Demo

Posted on | In

为了更好的调试我们这个简单的比特币系统，我决定创建一个可视化的网站用来演示。本系列代码：https://github.com/ParadeTo/bc/tree/master/bitcoin。

快速启动

启动后端

1
2
3
cd bitcoin
pnpm run server
# 服务运行在 http://localhost:3001

启动前端

1
2
3
cd bitcoin/frontend
pnpm run dev
# 界面运行在 http://localhost:3000

打开浏览器访问 http://localhost:3000，开始体验！

功能页面详解

导航概览

进入系统后，左侧导航栏清晰地列出了所有功能入口：

导航项 做什么用
区块链 查看链上所有区块和统计数据
钱包 创建钱包、查看余额和资产明细
创建交易 发起一笔转账
挖矿 挖出新区块，打包待处理的交易
UTXO 从底层视角看”钱”是怎么存的
Merkle 验证某笔交易是否真的在某个区块里

区块链浏览器

这是整个系统的”总览台”。你可以看到：

  • 统计卡片：区块总数、UTXO 数量、当前挖矿难度、最新区块高度
  • 区块列表：每个区块的基本信息（高度、时间、哈希、交易数量等）
  • 点击任意区块，可以进入详情页查看完整内容

区块详情

点击某个区块后，你会看到：

  • 区块头信息：高度、时间戳、哈希值、前一个区块的哈希、难度、Nonce
  • 区块内的所有交易：包括 Coinbase 交易（矿工奖励）和普通转账交易

钱包管理

在这里你可以：

  • 创建新钱包：一键生成，系统会为你创建地址、公钥、私钥
  • 查看所有钱包：列表展示每个钱包的地址和当前余额
  • 查看钱包详情：完整的地址、公钥，私钥（可隐藏/显示），支持一键复制
  • 查看 UTXO 明细：这个钱包的”钱”具体来自哪些交易

创建交易

转账操作非常直观：

  1. 选择发送方：从你的钱包列表中选择，界面会显示可用余额
  2. 填写接收方：输入对方地址，或者快速选择系统中的其他钱包
  3. 输入金额：支持精确输入，也可以快速选择 25%/50%/75%/全部余额
  4. 确认创建：点击后交易会进入”待处理池”，等待矿工打包

注意：交易创建后并不会立即生效！它需要被矿工挖矿打包进区块才算真正确认。

挖矿面板

  1. 选择矿工：指定哪个钱包来接收区块奖励（50 BTC）
  2. 查看难度：当前难度和下一个区块的预期难度
  3. 查看待处理交易：所有等待被打包的交易都在这里
  4. 选择要打包的交易：可以勾选特定交易，也可以全选
  5. 开始挖矿：点击后系统会执行工作量证明，找到合适的 Nonce
  6. 查看结果：挖矿成功后显示区块哈希、尝试次数、耗时等详情

UTXO 浏览器

比特币没有”账户余额”的概念，只有”未花费的交易输出”（UTXO）。这个页面让你直观看到：

  • 全局 UTXO 列表：系统中所有可以被花费的”钱”
  • 每条 UTXO 的信息：来自哪笔交易、输出索引、金额、属于谁
  • 按地址筛选：只看某个钱包的 UTXO

当你转账或挖矿后，回来刷新这个页面，就能看到 UTXO 是如何被消费和创建的。

Merkle 验证器

Merkle 树是比特币用来高效验证交易的数据结构。这个页面让你体验验证过程：

  1. 选择一个区块
  2. 选择区块中的某笔交易
  3. 发起验证：系统会生成 Merkle 证明并验证
  4. 查看结果：验证成功/失败，以及完整的 Merkle 路径

总结

本篇作为系列收官，通过构建一个可视化的 Web 演示系统，将前三章实现的密码学组件、UTXO 模型、交易逻辑及挖矿共识直观地呈现出来。从区块链浏览器到 Merkle 验证器，从钱包管理到模拟挖矿，该 Demo 完整展示了比特币去中心化账本的运行全貌，帮助开发者从底层到应用层透彻理解各个核心组件是如何协同工作的。