g>前端层：用户交互界面（网页、移动端等），通过Web3.js或ethers.js等库与智能合约交互，读取数据或触发交易。

区块链层：以太坊主网或测试网（如Goerli、Sepolia），提供数据存储和交易结算的基础设施。

开发前的准备：环境搭建与工具链

开发环境配置

• 钱包插件：MetaMask（浏览器钱包），用于用户签名交易和管理私钥，是dApp与以太坊交互的“入口”。
• IDE与编译器：VS Code（主流代码编辑器）+ Solidity插件（语法高亮、错误检查）；Hardhat或Truffle（开发框架，简化编译、测试、部署流程）。
• 测试网接入：Goerli（原测试网，即将淘汰）或Sepolia（当前主流测试网），免费获取测试ETH（如通过Faucet网站），避免消耗主网真实资产。

必备工具库

• Web3交互库：ethers.js（轻量级、文档友好）或Web3.js（老牌库），用于前端调用智能合约方法、监听事件。
• 合约部署工具：Hardhat（推荐，内置本地测试网络、插件生态）或Truffle（配置简单，适合初学者）。

智能合约开发：用Solidity编写业务逻辑

智能合约是dApp的“大脑”，以Solidity语言编写（类似JavaScript），需遵循“确定性原则”（相同输入必产生相同输出）。

示例：一个简单的“投票dApp”合约

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.20;
contract Voting {
    mapping(string => uint256) public votes; // 候选人名称 -> 票数
    address public owner; // 合署部署者（管理员）
    bool public votingEnded = false; // 投票状态
    constructor() {
        owner = msg.sender; // 部署者自动成为管理员
    }
    // 添加候选人（仅管理员可调用）
    function addCandidate(string memory candidateName) public {
        require(msg.sender == owner, "Only owner can add candidates");
        require(bytes(candidateName).length > 0, "Invalid candidate name");
        votes[candidateName] = 0; // 初始化票数为0
    }
    // 投票（每人每候选人仅一票）
    function vote(string memory candidateName) public {
        require(!votingEnded, "Voting has ended");
        require(bytes(candidateName).length > 0, "Invalid candidate");
        require(votes[candidateName] > 0, "Candidate not exists"); // 假设候选人需预先添加
        votes[candidateName]++; // 票数+1
    }
    // 结束投票（仅管理员）
    function endVoting() public {
        require(msg.sender == owner, "Only owner can end voting");
        votingEnded = true;
    }
}

关键点解析：

• 权限控制：通过require(msg.sender == owner)限制管理员操作，防止恶意调用。
• 数据存储：mapping（键值对）和uint256（整数）是常用数据类型，存储在区块链上，永久且透明。
• 安全性：避免重入攻击（使用检查-效果-交互模式）、溢出漏洞（Solidity 0.8+内置溢出检查）。

合约部署：从本地到测试网

本地测试（Hardhat示例）

安装Hardhat：npm install hardhat --save-dev
初始化项目：npx hardhat init
编写部署脚本scripts/deploy.js：

async function main() {
  const Voting = await ethers.getContractFactory("Voting");
  const voting = await Voting.deploy();
  await voting.deployed();
  console.log("Voting contract deployed to:", voting.address);
}
main().catch((error) => {
  console.error(error);
  process.exitCode = 1;
});

运行部署：npx hardhat run scripts/deploy.js --network localhost
启动本地节点：npx hardhat node（默认端口8545，模拟以太坊网络）

测试网部署（以Sepolia为例）

• 配置测试网：在hardhat.config.js中添加Alchemy或Infura的RPC节点URL，并配置私钥（推荐使用.env文件存储，避免泄露）。
• 获取测试ETH：通过Sepolia Faucet（如sepoliafaucet.com）免费领取测试ETH。
• 部署到测试网：npx hardhat run scripts/deploy.js --network sepolia
  部署成功后，合约地址将永久记录在Sepolia区块链上，可通过Etherscan查看。

前端开发：让用户与dApp交互

前端是dApp的“门面”，需实现用户连接钱包、调用合约方法、展示数据等功能，以React+ethers.js为例：

安装依赖

npm install ethers react

核心代码示例

import { useState, useEffect } from 'react';
import { ethers } from 'ethers';
const VotingDApp = () => {
  const [contract, setContract] = useState(null);
  const [account, setAccount] = useState('');
  const [candidates, setCandidates] = useState({});
  const [votingStatus, setVotingStatus] = useState(false);
  // 初始化：连接钱包和合约
  useEffect(() => {
    const init = async () => {
      // 连接MetaMask
      if (window.ethereum) {
        const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
        setAccount(accounts[0]);
        // 创建Provider（连接测试网）
        const provider = new ethers.providers.Web3Provider(window.ethereum);
        const signer = provider.getSigner();
        // 实例化合约（替换为你的测试网地址）
        const votingContract = new ethers.Contract(
          "0xYourContractAddress",
          [
            "function votes(string) view returns (uint256)",
            "function votingEnded() view returns (bool)",
            "function addCandidate(string)",
            "function vote(string)",
            "function endVoting()"
          ],
          signer
        );
        setContract(votingContract);
        // 加载数据
        loadCandidates(votingContract);
        setVotingStatus(await votingContract.votingEnded());
      }
    };
    init();
  }, []);
  // 加载候选人票数
  const loadCandidates = async (votingContract) => {
    // 假设已知候选人列表（实际可从合约获取）
    const candidateList = ["Alice", "Bob"];
    const votes = {};
    for (const name of candidateList) {
      votes[name] = await votingContract.votes(name);
    }
    setCandidates(votes);
  };
  // 投票
  const handleVote = async (candidateName) => {
    if (contract && !votingStatus) {
      try {
        await contract.vote(candidateName);
        alert("投票成功！");
        loadCandidates(contract); // 刷新数据
      } catch (error) {
        console.error("投票失败:", error);
      }
    }
  };
  return (
    <div>
      <h1>去中心化投票系统</h1>
      <p>当前账户: {account}</p>
      <p>投票状态: {votingStatus ? "已结束" : "进行中"}</p>
      <ul>
        {Object.entries(candidates).map(([name, voteCount]) => (
          <li key={name}>
            {name}: {voteCount} 票
            {!votingStatus && <button onClick={() => handleVote(name)}>投票</button>}
          </li>
        ))}
      </ul>
    </div>
  );
};
export default VotingDApp;

关键功能：

• 钱包连接：通过`window

文章版权声明：本文由用户投稿上传，若侵权请提供版权资料并联系删除！