Lazy loaded image
构建一个基础NFT交易平台
Words 6335Read Time 16 min
2025-9-8
2025-9-11
type
status
date
slug
summary
tags
category
icon
password
😀
前言:
想象一下,蒙娜丽莎的真迹在卢浮宫里。全世界有无数人可以拍它的照片,制作它的海报,甚至电脑屏保也是它。这些复制品几乎一文不值,因为大家都知道它们不是“真品”。
那么,如何证明卢浮宫里的那幅就是“真品”呢?我们依靠的是一整套社会认可的认证体系:艺术史专家的鉴定、拍卖行的记录、卢浮宫本身的权威性等等。这份“真品”的价值就来自于这份独一无二的、被公认的所有权证明
NFT就是这个“数字世界”里的“所有权证明”。
 

🤔NFT到底是什么

  1. 字面意思NFT 的全称是 Non-Fungible Token(非同质化代币)。
      • “代币(Token)”: 可以理解为一张数字证书,一个数字凭证。
      • “非同质化(Non-Fungible)”: 这是关键。意思是独一无二、不可互换的。
  1. 一个对比让你秒懂
      • 同质化: 就像钱。你手里的100元和我手里的100元,价值完全相同,可以随意交换。比特币、以太坊这类加密货币也是同质化的。
      • 非同质化: 就像那幅《蒙娜丽莎》,或者一套房产、一张绝版球星卡。每一件都是独特的,价值也不同,不能直接1:1交换。NFT就是这种东西的数字版本。
  1. 它存在哪里?
    1. NFT的信息记录在区块链上(你可以把区块链想象成一个全球性的、去中心化的、无法篡改的公共账本)。这意味着:
      • 唯一性: 每个NFT都有独一无二的编号,无法复制。
      • 可追溯: 谁在什么时候创造了它,每次被谁买走,所有交易历史都公开透明,无法伪造。
      • 所有权清晰: 区块链上的记录明确显示了当前谁是它的合法所有者。
 

🔑NFT有什么作用?(价值与应用)

NFT的核心作用就是确权和标记所有权,从而为数字物品创造“稀缺性”和“唯一性”。基于此,它衍生出了很多应用:
  1. 数字艺术与收藏品
      • 这是最广为人知的应用。艺术家可以将自己的数字画作、音乐、视频、甚至一条推特铸造成NFT。
      • 买家: 买的不是那个可以无限复制的图片文件,而是这份“独一无二的所有权证明”。这类似于收藏原画。
      • 创作者: 可以在每次NFT转售时自动获得版税抽成(例如10%),这是传统艺术市场很难实现的。
  1. 游戏内物品
      • 传统游戏里,你花钱买的装备、皮肤实际上属于游戏公司,你只是“租用”。
      • 如果游戏物品是NFT,那它就真正属于你。你可以交易、出售,甚至未来带到其他兼容的游戏中使用,实现了资产的“玩家所有”。
  1. 身份认证与会员资格
      • 某个品牌或社群可以发行NFT作为会员卡。持有特定NFT的人才能进入专属的Discord频道、参加线下活动、获得限量商品等。它成了身份和归属感的象征。
  1. 实体资产数字化
      • 房子、车子、奢侈品等实物资产的所有权证明也可以用NFT来表示,让交易和验证变得更高效、透明。虽然这还处于早期阶段。
  1. 数字身份
      • 学历证书、驾照、医疗记录等都可以做成NFT,由个人完全掌控并在需要时选择性出示,无需通过第三方机构验证,保护隐私且防止造假。
       

🎆 目标页面

用户能够顺利的上传个人藏品于市场,买家与卖家能够正常对藏品进行售卖。
notion image
notion image

👜 环境安装

Yarn: npm install yarn -g
Chrome 应用商店中安装MetaMask

📝 智能合约

智能合约的编写

contracts文件夹下创建一个名为AshNFT.sol的文件
notion image

核心函数拆解

类别 1: 核心 ERC721 标准函数 (主要继承自 OpenZeppelin)

这些函数是 NFT 的基石,确保了合约符合 ERC721 标准,能与所有支持该标准的钱包、交易所和平台兼容。
  1. constructor (构造函数)
      • 作用:在合约部署时初始化 NFT 集合的基本信息。
      • 详解:它设置了 NFT 的名称 (NAME)、符号 (SYMBOL)、合约的初始所有者 (initialOwner) 以及该系列 NFT 的最大供应量 (maxSupply)。maxSupply 为 0 表示无限制。
  1. tokenURI(uint256 tokenId)
      • 作用获取特定 NFT 的元数据链接。这是最重要的函数之一。
      • 详解:它返回一个字符串(通常是 IPFS 哈希或一个 URL),指向存储该 NFT 元数据(如名称、描述、图像属性等)的 JSON 文件。用户通过这个链接看到 NFT 的真正内容。此函数重写了父合约的函数。
  1. transferFrom / safeTransferFrom
      • 作用转移 NFT 的所有权
      • 详解:这是 NFT 交易和转移的核心。safeTransferFrom 会检查接收地址是否为合约,如果是,则要求该合约能够接收 ERC721 代币,防止 NFT 被永久锁定在一个无法处理它的合约中。本合约重写了这些函数,在转移后自动更新内部记账映射_ownedTokens 等),这是对标准功能的增强。

类别 2: NFT 生命周期管理函数 (核心业务逻辑)

这些函数定义了用户如何与这些 NFT 交互,包括创建、销毁和交易。
  1. mint(address to, string memory ipfsHash)
      • 作用铸造(创建)一个新的 NFT
      • 详解:这是最重要的功能函数。它接收一个地址和一个 IPFS 哈希值,然后:
        • 检查供应量限制。
        • 生成一个唯一的 tokenId
        • 调用内部的 _mint 将 NFT 分配给 to 地址。
        • 调用 _setTokenURI 将 tokenId 与元数据链接(ipfsHash)绑定。
        • 记录创作者信息、初始化上架状态、更新持有人列表等。
        • 触发 NFTMinted 事件,通知全网。
  1. burn(uint256 tokenId)
      • 作用销毁一个已存在的 NFT
      • 详解:只有 NFT 所有者或合约所有者可以调用。它会将 NFT 从调用者地址中移除,并永久销毁它(总量 totalSupply 会减少)。同时清理所有相关数据(URI、价格、上架状态等),并触发 NFTBurned 事件。

类别 3: 市场交易函数 (核心业务逻辑)

这些函数实现了 NFT 市场的核心功能,允许用户买卖 NFT。
  1. listNFT(uint256 tokenId, uint256 price)
      • 作用将用户拥有的 NFT 上架到市场进行销售
      • 详解:所有者调用此函数,设置一个大于 0 的价格(单位:wei)。函数会将该 NFT 标记为“已上架” (_isListed[tokenId] = true) 并记录其售价 (_prices[tokenId] = price),然后触发 NFTListed 事件。
  1. buyNFT(uint256 tokenId)
      • 作用购买一个已上架的 NFT
      • 详解:这是最复杂的函数之一。买家调用此函数并附带足够的 ETH (msg.value)。
        • 检查:NFT 存在、已上架、买家不是卖家、付款足够。
        • 执行:调用内部的 _transfer 将 NFT 从卖家转移给买家。
        • 付款:将买家支付的 ETH 转给卖家 (payable(seller).transfer(price))。
        • 更新:将 NFT 下架、更新持有人映射、记录本次交易到历史 (_tradeRecords)。
        • 事件:触发 NFTSold 事件。

类别 4: 视图查询函数 (提供信息)

这些函数不改变链上状态,仅用于查询合约信息。
  1. tokensOfOwner(address owner)
      • 作用查询某个地址拥有的所有 NFT 的 ID。实现了枚举功能,使得可以轻松查看一个钱包里的所有 NFT。
  1. getTokenIPFSHash(uint256 tokenId)
      • 作用查询某个 NFT 对应的元数据哈希
  1. isListed / getPrice
      • 作用查询某个 NFT 是否在售以及其价格。市场前端会频繁调用这些函数来展示商品列表。
  1. getTradeRecords(uint256 tokenId)
      • 作用查询某个 NFT 的所有历史交易记录。提供了 NFT 的链上溯源能力,增加了透明度和价值证明。

类别 5: 内部辅助函数

这些函数被其他函数调用,用于维护合约内部数据的一致性。
  1. _addTokenToOwnerEnumeration / _removeTokenFromOwnerEnumeration
      • 作用在 NFT 被铸造、转移或销毁时,更新地址所持有 NFT 的列表
      • 详解:这是实现 tokensOfOwner 功能的关键。它维护了两个映射:_ownedTokens[owner](某个地址拥有的所有 tokenId 列表)和 _ownedTokensIndex[tokenId](某个 tokenId 在列表中的位置),以确保高效地增加和删除。
 

智能合约的编译、本地链启动与部署

在完成了相关的合约编写后,需要按照顺序对合约进行编译、部署
🤭与之前的项目大相径庭

📝 前端板块

开发框架与依赖

 

环境配置

在根目录下创建了.env.local文件用于统一管理合约地址,便于修改。
 

核心代码解析

WalletContext.tsx

因为在多个页面我们都会用钱包的状态管理,在根目录下创建文件contexts/WalletContext.tsx,通过在 RootLayout 的顶层包裹应用,使得所有子组件都可以访问到钱包相关的数据和方法,而无需通过 props 逐层传递。
 

create/page.tsx 【创建页面】

这段代码实现了一个 NFT 创建(铸造)页面。它的核心功能是提供一个用户界面(UI),让用户:
  1. 填写 NFT 的详细信息(名称、描述、分类、价格)。
  1. 上传 NFT 的图片文件
  1. 一键完成整个铸造和上架流程:将图片上传到去中心化存储(IPFS/Pinata)、生成元数据文件、将元数据上传到 IPFS、调用智能合约铸造 NFT、并最终将 NFT 上架到市场进行销售。
它是一个连接了前端界面、去中心化存储和区块链智能合约的完整功能模块。
这个函数是整个NFT创建流程的核心,主要步骤包括:
  1. 验证连接状态:检查钱包是否连接以及是否有provider和图片文件
  1. 上传图片到IPFS:使用 pinata.upload.file() 将图片上传到IPFS网络
  1. 创建元数据:构建NFT的元数据,包括名称、描述、图片链接等
  1. 上传元数据到IPFS:使用 pinata.upload.json() 将元数据上传到IPFS
  1. 铸造NFT:调用 mintNFT 函数在区块链上创建NFT
  1. 上架NFT:调用 listNFT 函数将NFT放到市场上出售
  1. 状态管理:在整个过程中更新UI状态和提示信息
 

nft[id]/page.tsx 【详情页面】

该页面的主要作用是管理页面的各种状态,包括NFT数据、加载状态、交易状态、模态框显示、上下架、交易nft等

🤗 总结归纳

notion image
 
NFT本质上是一项“所有权认证”技术,它解决了数字世界“复制粘贴”导致物品没有稀缺性和唯一性的问题。它就像是为数字世界里的任何独一无二的东西颁发了一张防伪、可追溯的“数字身份证”。
它的核心价值不在于“复制品”,而在于“正品”的所有权所带来的社群归属、文化认同、投资价值和未来效用。
 
本文章内容仅供学习参考,请仔细甄别,切勿用于任何商业行为。

📎 项目链接

 
上一篇
CEX中的核心板块[盘口、K线图]
下一篇
从零构建LaunchPad平台[二](Farming)