以太坊DApp实例入门,从概念到简单实践

智能合约代码示例（Solidity）

以下是一个极简的投票合约示例：

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
contract SimpleVoting {
    // 候选项名称数组
    string[] public candidates;
    // 记录每个候选人的得票数，候选人名字作为key
    mapping(string => uint256) public votes;
    // 记录每个地址是否已投票
    mapping(address => bool) public hasVoted;
    // 构造函数，初始化候选人
    constructor(string[] memory _candidates) {
        candidates = _candidates;
        for (uint i = 0; i < _candidates.length; i++) {
            votes[_candidates[i]] = 0;
        }
    }
    // 投票函数
    function vote(string memory candidateName) public {
        // 检查投票者是否已投票
        require(!hasVoted[msg.sender], "You have already voted.");
        // 检查候选人是否存在
        require(votes[candidateName] != 0 || candidates.length > 0, "Invalid candidate.");
        // 增加候选人票数
        votes[candidateName]++;
        // 标记投票者已投票
        hasVoted[msg.sender] = true;
    }
    // 获取候选人列表
    function getCandidates() public view returns (string[] memory) {
        return candidates;
    }
}

合约说明：

• candidates：存储所有候选人的名字。
• votes：一个映射，记录每个候选人的得票数。
• hasVoted：一个映射，记录每个地址是否已经投过票，防止重复投票。
• constructor：合约部署时初始化候选人列表。
• vote(string memory candidateName)：核心投票函数，只有未投票的用户才能调用，成功投票后更新票数并标记。
• getCandidates()：获取候选人列表的函数。

前端交互（简化版Ethers.js示例）

假设我们有一个简单的HTML页面,其中包含候选人选择框和投票按钮，以及显示结果的区域，使用Ethers.js与合约交互的伪代码如下：

// 引入Ethers.js
const ethers = require("ethers");
// 1. 连接以太坊网络（例如MetaMask）
let provider;
if (window.ethereum) {
    provider = new ethers.providers.Web3Provider(window.ethereum);
    await provider.send("eth_requestAccounts", []); // 请求用户授权
} else {
    console.error("MetaMask is not installed!");
}
// 2. 获取签名者（用户账户）
const signer = provider.getSigner();
// 3. 合约地址和ABI（从编译合约获取）
const contractAddress = "DEPLOYED_CONTRACT_ADDRESS"; // 部署后替换为实际地址
const contractABI = [ /* 这里放置合约的ABI */ ];
// 4. 实例化合约
const votingContract = new ethers.Contract(contractAddress, contractABI, signer);
// 5. 获取候选人列表并显示
async function displayCandidates() {
    const candidates = await votingContract.getCandidates();
    // 前端渲染候选人列表...
}
// 6. 投票功能
async function voteForCandidate(candidateName) {
    try {
        const tx = await votingContract.vote(candidateName);
        await tx.wait(); // 等待交易确认
        alert("投票成功！");
        // 更新显示票数
    } catch (error) {
        console.error("投票失败:", error);
        alert("投票失败: " + error.message);
    }
}
// 页面加载时显示候选人
window.onload = displayCandidates;

前端说明：

• 通过MetaMask等钱包连接到以太坊网络,获取用户账户和Provider。
• 使用合约地址和ABI（Application Binary Interface，合约接口说明）创建合约实例。
• 调用合约的getCandidates()方法获取候选人并展示。
• 当用户点击投票按钮时,调用合约的vote()方法，并等待交易上链确认。

部署与运行

1. 编译合约：使用Truffle、Hardhat或在线Solidity编译器（如Remix IDE）编译Solidity代码，生成ABI和字节码。
2. 部署合约：
   • 本地测试：使用Ganache创建本地以太坊节点，使用Truffle或Hardhat部署合约到本地网络。
   • 测试网/主网：使用Infura、Alchemy等节点服务商提供的RPC地址，配合MetaMask将网络切换到Ropsten、Goerli（测试网）或主网，然后使用部署脚本（如Truffle migrations）或Remix IDE部署合约。
3. 部署前端：将前端代码部署到Nginx、Vercel、Netlify等静态网站托管服务。
4. 交互：用户通过浏览器访问前端网站，连接MetaMask，与已部署的智能合约进行交互。

实例总结与展望

通过这个“简易投票DApp”实例，我们可以清晰地看到以太坊DApp的运作模式：

• 智能合约是DApp的“大脑”，负责核心逻辑和状态存储。
• 前端是DApp的“脸面”，提供用户友好的交互界面。
• Web3连接库是连接前端与区块链的“桥梁”。

这只是一个非常基础的实例,真实的DApp通常会考虑更多复杂因素，如用户身份认证（如ENS域名）、更复杂的通证经济模型、去中心化存储（如IPFS用于存储前端或大型数据）、Gas费优化、安全性审计等。

以太坊DApp的世界充满了无限可能,从DeFi（去中心化金融）、NFT（非同质化代币）到GameFi（游戏金融）、DAO（去中心化自治组织），DApp正在重塑我们对互联网应用的理解，希望这个简单的实例能为你打开一扇通往以太坊DApp开发世界的大门，激励你探索和学习更多相关知识，构建属于自己的去中心化应用。