从零到一,构建一个去中心化投票应用—以太坊完整应用实例解析

合约编写示例（简化版）：

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
contract Voting {
    string public votingName;
    uint256 public votingStartTime;
    uint256 public votingEndTime;
    address public owner;
    mapping(address => bool) public hasVoted;
    mapping(string => uint256) public voteCounts;
    string[] public candidates;
    modifier onlyOwner() {
        require(msg.sender == owner, "Only owner can perform this action");
        _;
    }
    modifier votingActive() {
        require(block.timestamp >= votingStartTime && block.timestamp <= votingEndTime, "Voting is not active");
        _;
    }
    constructor(string memory _votingName, string[] memory _candidates, uint256 _startTime, uint256 _endTime) {
        votingName = _votingName;
        candidates = _candidates;
        votingStartTime = _startTime;
        votingEndTime = _endTime;
        owner = msg.sender;
    }
    function vote(string memory candidateName) public votingActive {
        require(!hasVoted[msg.sender], "You have already voted");
        bool candidateExists = false;
        for (uint i = 0; i < candidates.length; i++) {
            if (keccak256(bytes(candidates[i])) == keccak256(bytes(candidateName))) {
                candidateExists = true;
                break;
            }
        }
        require(candidateExists, "Candidate does not exist");
        hasVoted[msg.sender] = true;
        voteCounts[candidateName]++;
    }
    function addCandidate(string memory candidateName) public onlyOwner {
        candidates.push(candidateName);
    }
    function getVoteCount(string memory candidateName) public view returns (uint256) {
        return voteCounts[candidateName];
    }
    function getTotalVotes() public view returns (uint256) {
        uint total = 0;
        for (uint i = 0; i < candidates.length; i++) {
            total += voteCounts[candidates[i]];
        }
        return total;
    }
}

前端开发：用户交互界面

智能合约本身无法直接与用户交互,需要前端应用来调用合约函数并展示数据。

技术栈选择：

• HTML/CSS/JavaScript： 基础前端技术。
• Ethers.js： 一个流行的JavaScript库,用于与以太坊网络和智能合约进行交互。
• Web3.js： 另一个常用的库，功能类似，本文以Ethers.js为例。

前端主要功能：

• 连接MetaMask钱包。
• 显示投票信息（名称、时间、候选人列表）。
• 用户选择候选人并进行投票。
• 实时显示投票结果。
• 检查投票状态（是否已投票、投票是否有效）。

前端核心逻辑（伪代码/片段）：

• 连接钱包：

  let provider;
  let signer;
  let contract;
  async function connectWallet() {
      if (window.ethereum) {
          provider = new ethers.providers.Web3Provider(window.ethereum);
          await provider.send("eth_requestAccounts", []);
          signer = provider.getSigner();
          // 合约地址需要替换为实际部署后的地址
          contract = new ethers.Contract(CONTRACT_ADDRESS, VotingABI, signer);
          // 更新UI，显示钱包地址等
      } else {
          alert("Please install MetaMask!");
      }
  }

• 获取候选人列表并显示：

  async function displayCandidates() {
      const candidates = await contract.getCandidates(); // 假设合约有此函数或通过candidates数组长度遍历
      const candidateSelect = document.getElementById('candidateSelect');
      candidates.forEach(candidate => {
          const option = document.createElement('option');
          option.value = candidate;
          option.textContent = candidate;
          candidateSelect.appendChild(option);
      });
  }

• 投票功能：

  async function vote() {
      const candidateName = document.getElementById('candidateSelect').value;
      try {
          const tx = await contract.vote(candidateName);
          await tx.wait(); // 等待交易确认
          alert("Vote submitted successfully!");
          // 更新投票结果
          displayResults();
          // 检查并更新用户投票状态
      } catch (error) {
          console.error(error);
          alert("Vote failed: " + error.message);
      }
  }

• 显示投票结果：

  async function displayResults() {
      const candidates = await contract.getCandidates();
      const resultsDiv = document.getElementById('results');
      resultsDiv.innerHTML = '';
      for (const candidate of candidates) {
          const voteCount = await contract.getVoteCount(candidate);
          const resultItem = document.createElement('div');
          resultItem.textContent = `${candidate}: ${voteCount} votes`;
          resultsDiv.appendChild(resultItem);
      }
  }

部署与测试

部署智能合约：

• 测试网部署： 在以太坊测试网（如Ropsten, Goerli, Sepolia）上部署合约，避免消耗真实ETH,需要从测试网水龙头获取测试ETH。
• Remix部署： 在Remix IDE中编译合约后，选择"Deploy & Run Transactions"，选择环境（如"Injected Provider - MetaMask"），确保MetaMask连接到测试网，然后点击"Deploy"。
• 部署后记录合约地址。

前端应用部署：

• 将前端代码（HTML, CSS, JS文件）托管到静态网站托管服务，如：
  • GitHub Pages
  • Netlify
  • Vercel
• 在前端代码中，将合约地址替换为实际部署在测试网上的