在Web3浪潮下,去中心化应用(DApp)已成为区块链技术落地的核心场景,本文将以一个去中心化投票DApp为例,拆解以太坊DApp的开发全流程,涵盖智能合约、前端交互与用户操作,帮助开发者快速理解“以太坊+DApp+Web3”的技术融合逻辑。
以太坊DApp的典型架构分为三层:

使用Solidity编写Voting.sol合约,核心功能包括:
// SPDX-License-Identifier: MIT pragma solidity ^0.8.0; contract Voting { mapping(address => bool) public hasVoted; mapping(string => uint256) public voteCount; address public owner; constructor() { owner = msg.sender; } function addCandidate(string memory candidateName) public { require(msg.sender == owner, "Only owner can add candidates"); voteCount[candidateName] = 0; } function vote(string memory candidateName) public { require(!hasVoted[msg.sender], "Already voted"); require(voteCount[candidateName] > 0, "Invalid candidate"); hasVoted[msg.sender] = true; voteCount[candidateName]++; } }
以React为例,使用ethers.js库连接以太坊网络:
npm install ethers;ethers.providers.Web3Provider接入用户 Mask钱包;import { ethers } from 'ethers'; // 合约部署后的地址和ABI const contractAddress = "0x123..."; // 替换为实际部署地址 const contractABI = [...]; // 替换为合约生成的ABI // 初始化合约 const provider = new ethers.providers.Web3Provider(window.ethereum); const contract = new ethers.Contract(contractAddress, contractABI, provider.getSigner()); // 投票函数 async function vote(candidateName) { try { const tx = await contract.vote(candidateName); await tx.wait(); // 等待交易确认 alert("投票成功!"); } catch (error) { console.error("投票失败:", error); } }
Voting.sol,部署到以太坊测试网(如Ropsten)或主网;vote()函数, Mask弹出签名确认,交易上链后自动更新投票数据。与传统中心化应用相比,该DApp的去中心化特性体现在:
从智能合约编写到前端交互,以太坊DApp开发本质是“区块链逻辑”与“用户体验”的结合,随着Layer2扩容方案(如Arbitrum、Optimism)的成熟,DApp的 gas 成本和交易速度将得到进一步优化,推动更多场景落地(如DeFi、NFT、DAO等),对于开发者而言,掌握Solidity、Web3.js及前端框架,是进入Web3世界的必备技能,DApp有望重构互联网应用的价值分配模式,真正实现“用户拥有数据”的愿景。