Men6d656e/06_buy_me_a_cofe-by_my_self

## 📌 项目简介 一个完整的 Web3 dApp，允许任何人向合约所有者发送小费（ETH）并附上一段简短的留言。项目采用现代的 **Neo-Brutalist** UI 和经过高度优化的 Solidity 智能合约构建。该项目注重易用性、清晰的逻辑分离以及专业的构建自动化。 ## 🏗️ 架构概述 项目在结构上分为后端（智能合约）和前端（UI）。 1. **智能合约 (`src/`, `test/`, `script/`)**: - 使用 **Foundry** 构建和测试。 - `BuyMeACoffee.sol`: 包含用于接收付款、在链上存储留言以及允许所有者提取资金的核心逻辑。 - 脚本负责将地址自动同步至前端。 2. **前端 (`frontend/`)**: - 原生 JavaScript + `ethers.js` v6，通过 MetaMask 直接与区块链交互。 - 基于 TailwindCSS 的 Neo-brutalist 样式设计。 ## ⚙️ 前置条件 要在本地计算机上运行此项目，您需要： - 已安装 [Foundry](https://getfoundry.sh/) (Forge, Anvil, Cast)。 - [Node.js](https://nodejs.org/en/) 和 `npm`（用于使用 `serve` 运行前端本地服务器）。 - [Python 3](https://www.python.org/)（用于提供前端服务的替代方案）。 - 一个浏览器钱包，例如 **MetaMask**。 ## 🚀 如何在本地运行（新手指南） 按照以下步骤部署您的本地测试网并连接您的前端！ ### 1. 启动本地区块链 我们使用 `anvil` 来运行一个快速的本地 Ethereum 节点。打开一个新的终端并运行： ``` make anvil ``` *（保持此终端运行。它会提供 10 个测试账户，每个账户均预置了 10,000 ETH。）* ### 2. 部署智能合约 在另一个单独的终端中，将智能合约部署到您的本地 Anvil 节点： ``` make deploy-anvil ``` **神奇之处：** 此脚本会自动将新生成的合约地址直接同步到 `frontend/constants/contractAddress.js` 中，并复制 ABI，让您的前端能够准确知道在哪里进行查找！ ### 3. 启动前端应用 您可以使用 Node.js 或 Python 来提供前端服务。运行以下命令中的**任意一个**： ``` # 使用 Node.js（通过 'serve' npm package） make serve-node # 或者使用 Python 3 make serve-python ``` 应用程序将可以通过 `http://localhost:3000` (Node) 或 `http://localhost:8000` (Python) 访问。 ### 4. 连接您的钱包 - 打开 MetaMask，点击网络下拉菜单，然后选择 **Localhost 8545**。 - 导入由您的 `anvil` 终端（在第 1 步中）提供的其中一个私钥。这非常关键，因为您的常规账户中没有任何本地 ETH！ - 在 dApp 上点击 **"Connect Wallet"**。 - 如果您导入了账户 #0（部署者账户），您将看到 **Admin Zone** 出现，允许您提取所有作为小费收到的资金。 ## 🛠️ Makefile 命令速查表 本项目利用 `Makefile` 将复杂的命令简化为单个关键词： - `make build`: 编译 Solidity 合约。 - `make test`: 在 Foundry 中原生运行自动化测试套件。 - `make anvil`: 启动本地 Ethereum 测试网。 - `make deploy-anvil`: 将合约部署到 Anvil 并同步地址/ABI。 - `make deploy-sepolia`: 部署到 Sepolia 测试网（需要 `SEPOLIA_RPC_URL` 和 `PRIVATE_KEY` 环境变量）。 - `make serve-node`: 通过 npm `serve` 在 `localhost:3000` 上启动前端。 - `make serve-python`: 通过 Python 的 HTTP server 在 `localhost:8000` 上启动前端。 ## 🐛 常见错误排查 - **`could not decode result data (BAD_DATA)`**: 这意味着您的前端正在查看一个没有任何代码的合约地址。您是否重启了 `anvil`？如果是，您必须在 `anvil` 运行时再次运行 `make deploy-anvil` 重新部署。 - **`insufficient funds for gas * price + value`**: 您正在使用的 MetaMask 账户在本地网络上的 ETH 数量为 0。请确保您导入了由 `make anvil` 命令生成的账户之一。 - **RPC Error / 钱包无法连接**: 确保 MetaMask 设置为 `Localhost 8545`，并且您的 `anvil` 节点当前正在终端中运行。

标签：Foundry, Solidity, Web3, 区块链, 去中心化应用, 数据可视化, 智能合约, 自定义脚本