目 录CONTENT

文章目录

web3.0入门项目

懿曲折扇情
2025-11-16 / 0 评论 / 2 点赞 / 11 阅读 / 4,028 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2025-11-16,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
广告 广告

🚀 完整区块链系统 - 从零到上链

一个完整的区块链系统演示项目,包含智能合约、NFT、市场等功能,模拟以太坊公链的核心功能。让您从零开始体验 Web3 的魅力!

Solidity
Hardhat
OpenZeppelin
License

📋 目录

🎯 项目简介

这是一个完整的区块链系统演示项目,旨在帮助开发者和初学者:

  1. 理解区块链基础:通过实际代码学习智能合约开发
  2. 体验 Web3 功能:从代币到 NFT,再到市场交易
  3. 学习部署流程:从本地测试到测试网,再到主网
  4. 感受数据上链:真实体验区块链的不可篡改特性

核心组件

  • ERC20 代币合约:标准代币功能,支持购买、转账、销毁
  • ERC721 NFT 合约:NFT 铸造、转账、元数据管理
  • NFT 市场合约:NFT 买卖、拍卖功能
  • 前端 DApp:Web3 交互界面

✨ 功能特性

💰 ERC20 代币 (MyToken)

  • ✅ 标准 ERC20 功能(转账、余额查询)
  • ✅ 代币购买(使用 ETH 购买代币)
  • ✅ 代币铸造(Owner 权限)
  • ✅ 代币销毁(Burn)
  • ✅ 暂停/恢复功能
  • ✅ 最大供应量限制
  • ✅ 价格管理

🎨 ERC721 NFT (MyNFT)

  • ✅ 标准 ERC721 功能
  • ✅ NFT 铸造(公共和免费)
  • ✅ 批量铸造
  • ✅ 元数据 URI 管理
  • ✅ NFT 枚举
  • ✅ 每地址持有量限制
  • ✅ 最大供应量控制

🏪 NFT 市场 (NFTMarketplace)

  • ✅ NFT 上架销售
  • ✅ NFT 购买
  • ✅ NFT 拍卖
  • ✅ 市场手续费管理
  • ✅ 取消上架
  • ✅ 出价和竞拍

🌐 前端 DApp

  • ✅ MetaMask 钱包连接
  • ✅ 余额查询
  • ✅ 代币购买界面
  • ✅ NFT 铸造界面
  • ✅ 交易状态显示
  • ✅ 响应式设计

📁 项目结构

blockchain/
├── contracts/              # 智能合约
│   ├── MyToken.sol        # ERC20 代币合约
│   ├── MyNFT.sol          # ERC721 NFT 合约
│   └── NFTMarketplace.sol # NFT 市场合约
├── scripts/               # 部署脚本
│   └── deploy.js          # 主部署脚本
├── test/                  # 测试文件
│   ├── MyToken.test.js
│   ├── MyNFT.test.js
│   └── NFTMarketplace.test.js
├── frontend/              # 前端应用
│   ├── pages/            # Next.js 页面
│   ├── styles/           # 样式文件
│   └── package.json
├── deployments/          # 部署信息(自动生成)
├── hardhat.config.js     # Hardhat 配置
├── package.json          # 项目依赖
└── README.md            # 本文档

🚀 快速开始

环境要求

  • Node.js 16+
  • npm 或 yarn
  • MetaMask 浏览器扩展(用于前端交互)

安装步骤

1. 克隆项目

cd /Users/sh01728ml/code/blockchain

2. 安装依赖

npm install

3. 配置环境变量

复制 .env.example 并创建 .env 文件:

cp .env.example .env

编辑 .env 文件,填入您的配置:

# 私钥(用于部署合约)
# 注意:不要将真实私钥提交到 Git!
PRIVATE_KEY=your_private_key_here

# RPC 节点(可选,有默认值)
SEPOLIA_RPC_URL=https://rpc.sepolia.org
ETHERSCAN_API_KEY=your_etherscan_api_key

4. 编译合约

npm run compile

5. 运行测试

npm test

6. 一键启动开发环境(推荐)✨

最简单的方式 - 一个命令搞定:

npm run dev

这个命令会自动:

  • ✅ 编译合约(如果需要)
  • ✅ 启动本地 Hardhat 节点
  • ✅ 等待节点就绪
  • ✅ 部署所有合约
  • ✅ 更新前端环境变量

同时启动前端:

npm run dev:full

6.1 分步启动(可选)

如果你想分步操作:

# 终端 1: 启动节点
npm run node

# 终端 2: 部署合约
npm run deploy:local

📦 部署流程

流程图

本地测试网主网开始安装依赖配置环境变量编译智能合约选择网络启动本地节点配置测试网 RPC配置主网 RPC部署合约验证合约更新前端配置启动前端应用连接钱包开始使用

详细步骤

步骤 1: 本地部署(开发测试)

# 1. 启动本地 Hardhat 节点
npm run node

# 2. 在另一个终端部署合约
npm run deploy:local

# 3. 记录部署的合约地址
# 合约地址会显示在终端,并保存到 deployments/localhost.json

步骤 2: 测试网部署(Sepolia)

# 1. 确保 .env 文件配置了 PRIVATE_KEY 和 SEPOLIA_RPC_URL
# 2. 确保账户有足够的测试 ETH(从 faucet 获取)

# 3. 部署到 Sepolia 测试网
npm run deploy:testnet

# 4. 等待区块确认后,合约会自动验证

步骤 3: 主网部署(谨慎!)

# ⚠️ 警告:主网部署需要真实 ETH,请谨慎操作!

# 1. 确保 .env 文件配置了主网 RPC
# 2. 确保账户有足够的 ETH(用于 gas 费)

# 3. 部署到主网
npm run deploy:mainnet

部署后操作

  1. 保存合约地址:部署脚本会自动保存到 deployments/{network}.json
  2. 更新前端配置:在 frontend/.env.local 中配置合约地址
  3. 验证合约:在 Etherscan 上验证合约代码(测试网和主网)

📖 使用指南

智能合约交互

1. 购买代币

// 使用 ethers.js
const tokenContract = new ethers.Contract(
  TOKEN_ADDRESS,
  TOKEN_ABI,
  signer
);

// 购买代币(需要发送 ETH)
const tx = await tokenContract.buyTokens({ 
  value: ethers.parseEther("0.001") 
});
await tx.wait();

2. 铸造 NFT

const nftContract = new ethers.Contract(
  NFT_ADDRESS,
  NFT_ABI,
  signer
);

// 铸造 NFT(需要支付 mintPrice)
const price = await nftContract.mintPrice();
const tx = await nftContract.mint("ipfs://QmYourHash", { 
  value: price 
});
await tx.wait();

3. 上架 NFT 到市场

const marketplace = new ethers.Contract(
  MARKETPLACE_ADDRESS,
  MARKETPLACE_ABI,
  signer
);

// 1. 先授权市场合约
await nftContract.approve(MARKETPLACE_ADDRESS, tokenId);

// 2. 上架 NFT
const price = ethers.parseEther("0.1");
await marketplace.listNFT(tokenId, price);

4. 购买 NFT

// 购买上架的 NFT
await marketplace.buyNFT(tokenId, { 
  value: listingPrice 
});

前端使用

1. 安装前端依赖

cd frontend
npm install

2. 配置合约地址

创建 frontend/.env.local

NEXT_PUBLIC_TOKEN_ADDRESS=0x...
NEXT_PUBLIC_NFT_ADDRESS=0x...
NEXT_PUBLIC_MARKETPLACE_ADDRESS=0x...

3. 启动前端

npm run dev

访问 http://localhost:3000

4. 连接钱包

  1. 点击"连接 MetaMask 钱包"
  2. 在 MetaMask 中确认连接
  3. 切换到正确的网络(本地/测试网)

🔧 智能合约说明

MyToken.sol (ERC20)

功能

  • 标准 ERC20 代币实现
  • 使用 ETH 购买代币
  • Owner 可以铸造新代币
  • 用户可以销毁自己的代币
  • 支持暂停/恢复功能

主要函数

  • buyTokens(): 使用 ETH 购买代币
  • mint(address, amount): 铸造代币(仅 Owner)
  • burn(amount): 销毁代币
  • pause() / unpause(): 暂停/恢复(仅 Owner)

MyNFT.sol (ERC721)

功能

  • 标准 ERC721 NFT 实现
  • 公共铸造(需要支付费用)
  • Owner 免费铸造
  • 批量铸造
  • 元数据 URI 管理

主要函数

  • mint(tokenURI): 公共铸造(需支付 mintPrice)
  • freeMint(to, tokenURI): 免费铸造(仅 Owner)
  • batchMint(to, tokenURI, amount): 批量铸造(仅 Owner)

NFTMarketplace.sol

功能

  • NFT 上架销售
  • NFT 购买
  • NFT 拍卖
  • 市场手续费管理

主要函数

  • listNFT(tokenId, price): 上架 NFT
  • buyNFT(tokenId): 购买 NFT
  • cancelListing(tokenId): 取消上架
  • createAuction(tokenId, startingPrice, duration): 创建拍卖
  • placeBid(tokenId): 出价
  • endAuction(tokenId): 结束拍卖

🧪 测试

运行所有测试

npm test

运行特定测试

# 测试代币合约
npx hardhat test test/MyToken.test.js

# 测试 NFT 合约
npx hardhat test test/MyNFT.test.js

# 测试市场合约
npx hardhat test test/NFTMarketplace.test.js

测试覆盖率

npx hardhat coverage

📊 流程图详解

完整系统架构

数据层区块链层前端层用户层代币数据NFT 数据市场数据本地节点/测试网/主网MyToken 合约MyNFT 合约NFTMarketplace 合约React DAppethers.jsMetaMask 钱包用户

代币购买流程

用户前端 DAppMetaMaskMyToken 合约区块链点击"购买代币"请求交易签名显示交易详情确认交易发送 buyTokens() 交易写入区块链返回交易哈希交易确认更新状态显示购买成功用户前端 DAppMetaMaskMyToken 合约区块链

NFT 铸造流程

用户前端MyNFT 合约IPFS 存储区块链输入 NFT 元数据上传元数据返回 IPFS Hash调用 mint(hash)写入区块链返回 Token ID铸造成功显示 NFT用户前端MyNFT 合约IPFS 存储区块链

NFT 市场交易流程

卖家市场合约NFT 合约买家区块链approve(市场地址, tokenId)授权记录listNFT(tokenId, price)transferFrom(卖家, 市场, tokenId)NFT 转移到市场buyNFT(tokenId) + ETHtransferFrom(市场, 买家, tokenId)NFT 转移给买家支付 ETH (扣除手续费)记录交易卖家市场合约NFT 合约买家区块链

❓ 常见问题

Q: 如何获取测试 ETH?

A:

Q: 部署失败怎么办?

A: 检查以下几点:

  1. 账户是否有足够的 ETH(用于 gas 费)
  2. 网络配置是否正确
  3. 私钥是否正确配置
  4. RPC 节点是否可用

Q: 如何查看合约代码?

A:

  1. 本地部署:查看 artifacts/contracts/ 目录
  2. 测试网/主网:在 Etherscan 上查看(需要先验证合约)

Q: 前端无法连接钱包?

A:

  1. 确保安装了 MetaMask 扩展
  2. 确保 MetaMask 连接到正确的网络
  3. 检查浏览器控制台是否有错误

Q: 如何验证合约?

A:

npx hardhat verify --network sepolia <CONTRACT_ADDRESS> <CONSTRUCTOR_ARGS>

Q: Gas 费用太高怎么办?

A:

  1. 使用测试网(Sepolia/Goerli)进行测试
  2. 在 gas 价格较低时部署
  3. 优化合约代码减少 gas 消耗

🎓 学习资源

📝 许可证

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request!

📞 支持

如有问题,请创建 Issue 或联系维护团队。


Happy Coding! 🚀 让我们一起探索 Web3 的世界!

2

评论区