简介一套用于计算机类毕业设计及课程作业的去中心化智能合约投票系统完整源码包面向有区块链或前端开发基础的学生解决从智能合约交互到投票业务落地的实践需求。压缩包共23个文件其中6个JavaScript文件承担合约调用与业务逻辑5个Vue组件构建前端页面4个JSON文件管理依赖与项目配置另有HTML入口、Less样式、Git忽略规则及PDF说明文档等整体约3.45MB体积虽小但工程化配置齐全便于导入开发环境快速定位修改。资源覆盖投票项目创建、候选人管理、投票执行与结果统计等核心环节整合了前端路由、状态管理以及智能合约交互构成去中心化应用的基础框架附带的PDF说明文档对项目目录结构和技术要点进行了梳理可辅助理解设计思路。标签中的人工智能也提示其可拓展为结合智能算法的投票分析场景适合作为毕业设计或课程设计的扩展方向。当前已有62人学习下载既是毕业设计选题的参考实现也是课程作业的完整模板尤其适合希望掌握Vue工程与去中心化应用联动开发的初学者。1. 智能合约投票系统的“去中心化”到底去掉了什么传统投票管理系统跑在服务器上后端接口、数据库、管理员账号任何一个环节被改票数都可能被悄悄篡改。而这个毕设源码包换了一套思路——候选人列表、选民资格、投票动作和最终计票全部落在智能合约里合约一旦部署业务规则就不可篡改前端 Vue 只是调用链上数据的一层界面。做演示时最反直觉的一点是关掉浏览器、停掉前端服务合约里的票数和事件依旧可用这就是去中心化投票系统与普通 CRUD 系统最本质的区别。适合正在做区块链方向毕业设计、课程作业或者第一次完整走通 DApp 开发链路的人读这份源码不仅能补 Solidity 基础还能把 Web3.js 调用、Vuex 状态管理、本地链调试串成一条线。2. 合约层投票状态机与权限控制智能合约投票系统能不能成立先看合约对“投票过程”的定义够不够严谨。多数课程设计容易把合约写成一个只有vote()方法的 demo谁都能投、能投无数次、结束后还能偷偷加票。一个合格的去中心化投票合约至少要解决三个问题投票生命周期怎么切分、谁有资格投票、如何防重复投票。2.1 三阶段状态机注册、投票、计票这里推荐用枚举管理生命周期而不是用bool votingOpen。bool只能表达开和关表达不了“注册阶段”“投票阶段”“结束阶段”之间的流转一旦业务要加“暂停投票”状态bool就得改数据结构。源码包里合约如果已经用枚举一般在constracts目录下能找到类似Phase { Register, Voting, Ended }的定义下面是一段常见的等价实现可以对照阅读// SPDX-License-Identifier: MIT pragma solidity ^0.8.0; contract Vote { enum Phase { Register, Voting, Ended } struct Candidate { uint id; string name; uint voteCount; } struct Voter { bool registered; bool hasVoted; uint vote; } address public owner; Phase public phase; Candidate[] public candidates; mapping(address Voter) public voters; event CandidateAdded(uint indexed id, string name); event Voted(address indexed voter, uint indexed candidateId); event PhaseChanged(Phase indexed newPhase); modifier onlyOwner() { require(msg.sender owner, only owner); _; } modifier inPhase(Phase p) { require(phase p, wrong phase); _; } constructor(string[] memory names) { owner msg.sender; for (uint i 0; i names.length; i) { candidates.push(Candidate(i, names[i], 0)); } phase Phase.Register; } function register(address voter) external onlyOwner inPhase(Phase.Register) { require(!voters[voter].registered, already registered); voters[voter] Voter(true, false, 0); } function vote(uint candidateId) external inPhase(Phase.Voting) { Voter storage v voters[msg.sender]; require(v.registered, not registered); require(!v.hasVoted, already voted); require(candidateId candidates.length, invalid candidate); v.hasVoted true; v.vote candidateId; candidates[candidateId].voteCount; emit Voted(msg.sender, candidateId); } function endVoting() external onlyOwner inPhase(Phase.Voting) { phase Phase.Ended; emit PhaseChanged(phase); } function winner() external view inPhase(Phase.Ended) returns (uint, string memory, uint) { uint best 0; for (uint i 1; i candidates.length; i) { if (candidates[i].voteCount candidates[best].voteCount) { best i; } } Candidate storage c candidates[best]; return (c.id, c.name, c.voteCount); } }先看几个关键参数mapping(address Voter) voters以地址为键把每个地址的注册状态、是否投票、投给谁绑定在一起查询复杂度是 O(1)比用数组存储后循环遍历更适合权限校验。Candidate[]是动态数组构造函数传入候选人名字ID 由数组下标自然生成前端渲染时直接遍历数组即可。registered和hasVoted拆成两个字段是为了区分“没资格投票”和“已经投过票”两种失败原因演示时前端能给出不同提示。下面的状态表可以直接拿来做答辩材料阶段可调用方法前置条件链上动作Registerregister(address)仅 owner 可调用当前阶段为 Register把地址标记为已注册选民Votingvote(uint)调用者已注册、未投过、候选人 ID 合法写入选票累加票数发出Voted事件Endedwinner()当前阶段为 Ended遍历候选人数组返回最高票者注意winner()是view函数不会消耗 gas也不产生区块记录它只是从链上读数据。如果要向评审证明“结果可信”关键是让评审看到Voted事件里的voter和candidateId映射关系而不是只看一个冠军名字。2.2 权限控制与防重复投票合约里大量使用modifier把公共逻辑抽出来onlyOwner保证只有部署合约的地址能注册选民和结束投票inPhase(Phase.Voting)保证投票动作只发生在正确阶段。这两个修饰器一旦组合使用就能避免“管理员偷偷在投票中加候选人”这类逻辑漏洞。vote()里的三个require是防作弊的关键。require(v.registered)拦截未注册地址require(!v.hasVoted)保证一个地址只能投一次require(candidateId candidates.length)防止传入超范围 ID 破坏数组边界。需要留意的是msg.sender是当前调用者地址不能信任前端传来的account参数否则任何人都可以冒充他人投票。常见误用是把voters[msg.sender]写成voters[voter]然后函数参数里接收一个_voter地址这等于把权限校验交给了不可信的调用方。2.3 事件定义前端与链上交互的契约合约里的event Voted(address indexed voter, uint indexed candidateId)不是可有可无的日志。前端需要监听Voted事件来刷新票数、判断交易是否被打包、甚至做实时图表indexed关键字让该参数可以被按条件过滤比如查某个选民投了谁。实战中建议在三个位置埋事件候选人添加成功后emit CandidateAdded(...)投票成功后emit Voted(...)阶段切换后emit PhaseChanged(...)。这样做有两个好处其一前端不用每次 polling 全链数据其二做课程设计答辩时getPastEvents(Voted, { fromBlock: 0 })可以直接导出一份不可篡改的投票流水比数据库表更有说服力。3. 前端层Vue 状态管理与合约交互源码包里的前端目录是标准 Vue 项目结构views放页面、components放组件、store放 Vuex、router管跳转、constracts放合约编译产物。不少人对“为什么要把 web3 和合约实例放进 Vuex”不理解实际原因是页面在路由间切换时如果每个页面都new Web3()、new Contract()会产生多个实例MetaMask 账户切换后很难做到全局同步。把连接状态收敛到 Vuex页面只从 store 取数据逻辑会清晰很多。3.1 初始化连接Web3 注入与账户监听在 DApp 场景下MetaMask 等钱包插件会向页面注入window.ethereum。初始化动作通常写在store/modules/web3.js里类似这样// src/store/modules/web3.js import Web3 from web3 import VoteArtifact from /constracts/Vote.json const state { web3: null, account: , chainId: 0, contract: null } const mutations { SET_WEB3(state, web3) { state.web3 web3 }, SET_ACCOUNT(state, account) { state.account account }, SET_CHAIN_ID(state, chainId) { state.chainId chainId }, SET_CONTRACT(state, contract) { state.contract contract } } const actions { async init({ commit }) { if (!window.ethereum) throw new Error(请先安装 MetaMask) const web3 new Web3(window.ethereum) const accounts await web3.eth.requestAccounts() const chainId await web3.eth.getChainId() const contract new web3.eth.Contract( VoteArtifact.abi, VoteArtifact.networks[chainId]?.address ) commit(SET_WEB3, web3) commit(SET_ACCOUNT, accounts[0]) commit(SET_CHAIN_ID, chainId) commit(SET_CONTRACT, contract) window.ethereum.on(accountsChanged, ([account]) { commit(SET_ACCOUNT, account || ) }) window.ethereum.on(chainChanged, () window.location.reload()) } } export default { state, mutations, actions }这里有个容易被忽略的细节VoteArtifact.networks[chainId]?.address是 truffle 部署后写入带网络的合约地址它要求本地链 chainId 与部署时一致。很多同学把地址硬编码到前端换一条链跑就白屏改用这种方式就省心了。requestAccounts()会触发 MetaMask 弹窗用户拒绝授权时返回的accounts是空数组记得在页面加载处 catch 并提示用户重新授权。accountsChanged和chainChanged这两个监听是演示时的刚需评审在 MetaMask 里切换账户后页面应该马上刷新成新账户的投票状态而不是手动刷新浏览器。3.2 组件里完成一轮投票页面调用合约写接口的标准姿势是在methods里使用send()方法并且明确指定from和gas。下面是候选人卡片组件的核心逻辑template div classcandidate-card h3{{ candidate.name }}/h3 p当前票数{{ candidate.voteCount }}/p button :disabled!account clickvote(candidate.id) 投给 {{ candidate.name }} /button /div /template script import { mapState } from vuex export default { name: CandidateCard, props: { candidate: { type: Object, required: true } }, computed: mapState([account]), methods: { async vote(id) { const { contract, account } this.$store.state try { const receipt await contract.methods.vote(id).send({ from: account, gas: 150000 }) this.$emit(voted, receipt) } catch (err) { // MetaMask 拒绝签名或链上 require 失败都会走到这里 console.error(投票失败, err.message) } } } } /scriptgas: 150000是给vote()预留的 gas 上限实际消耗通常在 6 万到 10 万 gas 之间。数值设太小会报out of gas设太大又会让用户支付不必要的费用在 Ganache 本地开发环境里这个值可以按合约复杂度调大比如300000。调用成功后receipt里有events.Voted.returnValues可以拿来刷新票数也可以直接调用getPastEvents重新同步列表。3.3 读接口与写接口的调用差异很多新手看到contract.methods.candidates(0).call()和contract.methods.vote(0).send()会混淆。二者差别要分清接口类型调用方式是否消耗 gas返回值典型用途读接口.call({ from: account })否立即返回结果查候选人、票数、当前阶段写接口.send({ from, gas })是交易收据 Promise注册、投票、结束投票call的返回值是普通 JavaScript 对象数值类型默认是字符串前端展示票数时最好用Number()转换但只适合票数在Number.MAX_SAFE_INTEGER以内的情况理论上选票数当然达不到那么大不过一旦涉及代币精度类字段就必须用ethers.utils.formatUnits或web3.utils.fromWei这类工具处理。写接口的send会开启一个异步流程先弹 MetaMask 签名确认再等待交易上链最后返回收据。演示时如果把await放在send前页面会一直转圈给人“卡死”的错觉可以在前端加一个submitting状态收到收据后再隐藏按钮 loading。4. 本地复现从源码包到跑通的完整命令拿到压缩包后不建议直接双击index.html因为这个项目需要编译和部署链上合约。完整链路是npm install装前端依赖启动一个本地区块链用 Truffle/Hardhat 部署合约最后让前端连接本地链跑起来。下面按顺序走一遍。4.1 依赖安装与项目结构解压后先在根目录执行依赖安装npm install如果 Node 版本过高导致依赖冲突比如node-sass编译失败可以改用npm install --legacy-peer-deps源码包里的主要目录结构如下智能合约投票系统/ ├── src/ │ ├── views/ # 页面投票页、结果页、管理员页 │ ├── components/ # 候选人卡片、状态提示等组件 │ ├── store/ # Vuex 状态管理 │ ├── router/ # 路由配置 │ ├── constracts/ # Solidity 源码和编译产物 │ └── main.js # 入口文件 ├── truffle-config.js # Truffle 网络配置 ├── vue.config.js # Vue 构建配置 └── package.jsonsrc/constracts这个目录名是源码包原样保留的命名虽然正确的英文是contracts但改目录名时需要同步改import路径否则运行时报模块找不到。vue.config.js里通常会配置devServer的端口和 proxy本地演示建议固定端口避免运行时被占用导致页面连不上。4.2 启动本地链并部署合约本地链推荐用 Ganache它提供图形界面和命令两种方式。命令行方式更轻量# 终端一启动本地链端口 8545 ganache-cli -p 8545启动后终端会打印 10 个账户地址和私钥记下第一个账户它就是后续合约部署者和 owner。另开终端部署合约# 终端二项目根目录下执行 truffle migrate --reset --network development--reset的作用是强制重新编译并部署避免旧迁移记录残留。部署成功后build/contracts/Vote.json里的networks字段会被写入当前 chainId 对应的合约地址前端靠这份 JSON 自动定位合约所以不要手动改地址。truffle-config.js里的development网络需要指向本地链// truffle-config.js 关键片段 module.exports { networks: { development: { host: 127.0.0.1, port: 8545, network_id: * } }, compilers: { solc: { version: 0.8.13 } } }network_id: *表示接受任意 chainId这是本地开发的常规配置。如果源码包用的是 Hardhat对应命令是npx hardhat node和npx hardhat run scripts/deploy.js --network localhost原理一致先把合约部署到本地链再把部署结果交给前端。4.3 MetaMask 连接本地 RPC前端跑起来之前先让 MetaMask 连上本地链。点击 MetaMask 顶部的网络切换选择“添加网络”填入以下参数配置项值网络名称Localhost 8545RPC URLhttp://127.0.0.1:8545链 ID1337货币符号ETH这里有一个高频踩坑点Ganache 默认链 ID 是1337Hardhat 默认是31337如果填错前端读取合约地址时networks[chainId]会得到undefined合约对象无法创建。添加网络后从 Ganache 终端复制一个账户私钥导入 MetaMask导入成功后确认账户余额不为 0。然后启动前端npm run serve浏览器访问http://localhost:8080MetaMask 会弹出连接授权请求点击确认后页面应显示当前账户地址和候选人列表。提示私钥相当于账户的最终控制权演示结束后不要截图私钥发到任何聊天工具本地开发可以随便用但养成不泄露私钥的习惯很重要。4.4 高频报错对照跑通之后建议把下面这份排查表保存下来答辩前按顺序自检一遍报错或现象原因处理办法Invalid number of parameters for undefinedABI 未更新或合约未编译重新truffle migrate --reset若前端热更新失效则重启npm run serveReturned error: invalid address前端拿到空合约地址检查 MetaMask 链 ID 与部署链 ID 是否一致查看Vote.jsonnetworks 字段Non-Error promise rejection capturedMetaMask 用户拒绝签名或 gas 不足在.catch中打印err.code确认账户有测试 ETH页面白屏且控制台没有报错Vue 版本与依赖不兼容查看package.json中 vue 与 vue-template-compiler 版本是否一致投票后票数不变读接口缓存或未重新拉取vote()成功后调用candidates(id).call()重新获取并覆盖本地状态还有一类问题在课程设计里很常见多个浏览器共用同一个 MetaMask 账户导致 A 投完票后 B 用同一地址再投交易被链上require拦截。演示多人投票前一定要准备至少两个账户并在不同浏览器里分别导入。5. 验证与演示技巧让评委看懂链上计票去中心化投票系统的答辩重点不是页面 UI 多好看而是证明“票是链上记的、过程可审计、结果可信”。下面三个演示技巧能直接提升项目说服力。5.1 用事件日志复盘一次投票在浏览器控制台执行下面代码即可打印全部投票流水// 假设 window.__voteContract 是从 store 里拿到的合约实例 const events await window.__voteContract.getPastEvents(Voted, { fromBlock: 0, toBlock: latest }) events.forEach(e { console.log( ${e.returnValues.voter} 投给了候选人 ${e.returnValues.candidateId} ) })fromBlock: 0表示从部署区块开始搜索toBlock: latest表示一直到当前高度。Voted事件里的voter是选民地址candidateId是候选人 ID。把这段输出截图放进答辩 PPT比任何流程图都直观。Ganache 终端里也会同步显示每笔交易详情包括消耗的 gas 和交易哈希可以对照前端操作逐笔验证。5.2 双浏览器双账户模拟多人投票推荐用浏览器无痕窗口或双浏览器方案Chrome 导入 Ganache 第一个账户Edge 导入第二个账户两个窗口都打开系统页面。先在管理员页面完成两个地址的注册再分别执行投票。这里有一个很实用的提效技巧如果源码包没有批量注册表单直接打开 Truffle Console 操作truffle console --network development// Truffle Console 环境里已注入合约抽象 const instance await Vote.deployed() await instance.register(0x账户A地址, { from: owner }) await instance.register(0x账户B地址, { from: owner })Vote.deployed()会自动读取 JSON 里的最新部署地址不需要手动传入。注册完成后两个浏览器各自投票最后在结果页对比票数并请评审观察 MetaMask 里transaction hash的不同。要注意投票前把系统切到Voting阶段很多项目遗漏了“阶段切换”这一步导致演示时一直停在注册阶段。5.3 演示前的边界检查清单场景预期行为自查位置同一账户重复投票第二笔交易 revertMetaMask 弹出失败提示合约hasVoted字段未注册账户点击投票交易被拦截页面提示未注册voters[addr].registered投票阶段调用注册接口revertwrong phase当前phase状态两个候选人平票winner()返回数组靠前的一个合约遍历逻辑必要时提前制造非平票演示中途切换 MetaMask 账户页面按钮禁用态跟随账户变化前端是否注册accountsChanged监听演示结束后直接把 Ganacheevm_snapshot或图形界面的快照功能恢复一遍再走一次注册到计票全流程能快速验证系统状态是否干净这是课程设计演示前最省时间的回归手段。本文还有配套的精品资源点击获取 
长河君 · 2026/9/14 2:59:53 · 阅读 1.2k 智能合约投票系统开发实战：从Solidity合约到Vue前端全流程解析
简介一套用于计算机类毕业设计及课程作业的去中心化智能合约投票系统完整源码包面向有区块链或前端开发基础的学生解决从智能合约交互到投票业务落地的实践需求。压缩包共23个文件其中6个JavaScript文件承担合约调用与业务逻辑5个Vue组件构建前端页面4个JSON文件管理依赖与项目配置另有HTML入口、Less样式、Git忽略规则及PDF说明文档等整体约3.45MB体积虽小但工程化配置齐全便于导入开发环境快速定位修改。资源覆盖投票项目创建、候选人管理、投票执行与结果统计等核心环节整合了前端路由、状态管理以及智能合约交互构成去中心化应用的基础框架附带的PDF说明文档对项目目录结构和技术要点进行了梳理可辅助理解设计思路。标签中的人工智能也提示其可拓展为结合智能算法的投票分析场景适合作为毕业设计或课程设计的扩展方向。当前已有62人学习下载既是毕业设计选题的参考实现也是课程作业的完整模板尤其适合希望掌握Vue工程与去中心化应用联动开发的初学者。1. 智能合约投票系统的“去中心化”到底去掉了什么传统投票管理系统跑在服务器上后端接口、数据库、管理员账号任何一个环节被改票数都可能被悄悄篡改。而这个毕设源码包换了一套思路——候选人列表、选民资格、投票动作和最终计票全部落在智能合约里合约一旦部署业务规则就不可篡改前端 Vue 只是调用链上数据的一层界面。做演示时最反直觉的一点是关掉浏览器、停掉前端服务合约里的票数和事件依旧可用这就是去中心化投票系统与普通 CRUD 系统最本质的区别。适合正在做区块链方向毕业设计、课程作业或者第一次完整走通 DApp 开发链路的人读这份源码不仅能补 Solidity 基础还能把 Web3.js 调用、Vuex 状态管理、本地链调试串成一条线。2. 合约层投票状态机与权限控制智能合约投票系统能不能成立先看合约对“投票过程”的定义够不够严谨。多数课程设计容易把合约写成一个只有vote()方法的 demo谁都能投、能投无数次、结束后还能偷偷加票。一个合格的去中心化投票合约至少要解决三个问题投票生命周期怎么切分、谁有资格投票、如何防重复投票。2.1 三阶段状态机注册、投票、计票这里推荐用枚举管理生命周期而不是用bool votingOpen。bool只能表达开和关表达不了“注册阶段”“投票阶段”“结束阶段”之间的流转一旦业务要加“暂停投票”状态bool就得改数据结构。源码包里合约如果已经用枚举一般在constracts目录下能找到类似Phase { Register, Voting, Ended }的定义下面是一段常见的等价实现可以对照阅读// SPDX-License-Identifier: MIT pragma solidity ^0.8.0; contract Vote { enum Phase { Register, Voting, Ended } struct Candidate { uint id; string name; uint voteCount; } struct Voter { bool registered; bool hasVoted; uint vote; } address public owner; Phase public phase; Candidate[] public candidates; mapping(address Voter) public voters; event CandidateAdded(uint indexed id, string name); event Voted(address indexed voter, uint indexed candidateId); event PhaseChanged(Phase indexed newPhase); modifier onlyOwner() { require(msg.sender owner, only owner); _; } modifier inPhase(Phase p) { require(phase p, wrong phase); _; } constructor(string[] memory names) { owner msg.sender; for (uint i 0; i names.length; i) { candidates.push(Candidate(i, names[i], 0)); } phase Phase.Register; } function register(address voter) external onlyOwner inPhase(Phase.Register) { require(!voters[voter].registered, already registered); voters[voter] Voter(true, false, 0); } function vote(uint candidateId) external inPhase(Phase.Voting) { Voter storage v voters[msg.sender]; require(v.registered, not registered); require(!v.hasVoted, already voted); require(candidateId candidates.length, invalid candidate); v.hasVoted true; v.vote candidateId; candidates[candidateId].voteCount; emit Voted(msg.sender, candidateId); } function endVoting() external onlyOwner inPhase(Phase.Voting) { phase Phase.Ended; emit PhaseChanged(phase); } function winner() external view inPhase(Phase.Ended) returns (uint, string memory, uint) { uint best 0; for (uint i 1; i candidates.length; i) { if (candidates[i].voteCount candidates[best].voteCount) { best i; } } Candidate storage c candidates[best]; return (c.id, c.name, c.voteCount); } }先看几个关键参数mapping(address Voter) voters以地址为键把每个地址的注册状态、是否投票、投给谁绑定在一起查询复杂度是 O(1)比用数组存储后循环遍历更适合权限校验。Candidate[]是动态数组构造函数传入候选人名字ID 由数组下标自然生成前端渲染时直接遍历数组即可。registered和hasVoted拆成两个字段是为了区分“没资格投票”和“已经投过票”两种失败原因演示时前端能给出不同提示。下面的状态表可以直接拿来做答辩材料阶段可调用方法前置条件链上动作Registerregister(address)仅 owner 可调用当前阶段为 Register把地址标记为已注册选民Votingvote(uint)调用者已注册、未投过、候选人 ID 合法写入选票累加票数发出Voted事件Endedwinner()当前阶段为 Ended遍历候选人数组返回最高票者注意winner()是view函数不会消耗 gas也不产生区块记录它只是从链上读数据。如果要向评审证明“结果可信”关键是让评审看到Voted事件里的voter和candidateId映射关系而不是只看一个冠军名字。2.2 权限控制与防重复投票合约里大量使用modifier把公共逻辑抽出来onlyOwner保证只有部署合约的地址能注册选民和结束投票inPhase(Phase.Voting)保证投票动作只发生在正确阶段。这两个修饰器一旦组合使用就能避免“管理员偷偷在投票中加候选人”这类逻辑漏洞。vote()里的三个require是防作弊的关键。require(v.registered)拦截未注册地址require(!v.hasVoted)保证一个地址只能投一次require(candidateId candidates.length)防止传入超范围 ID 破坏数组边界。需要留意的是msg.sender是当前调用者地址不能信任前端传来的account参数否则任何人都可以冒充他人投票。常见误用是把voters[msg.sender]写成voters[voter]然后函数参数里接收一个_voter地址这等于把权限校验交给了不可信的调用方。2.3 事件定义前端与链上交互的契约合约里的event Voted(address indexed voter, uint indexed candidateId)不是可有可无的日志。前端需要监听Voted事件来刷新票数、判断交易是否被打包、甚至做实时图表indexed关键字让该参数可以被按条件过滤比如查某个选民投了谁。实战中建议在三个位置埋事件候选人添加成功后emit CandidateAdded(...)投票成功后emit Voted(...)阶段切换后emit PhaseChanged(...)。这样做有两个好处其一前端不用每次 polling 全链数据其二做课程设计答辩时getPastEvents(Voted, { fromBlock: 0 })可以直接导出一份不可篡改的投票流水比数据库表更有说服力。3. 前端层Vue 状态管理与合约交互源码包里的前端目录是标准 Vue 项目结构views放页面、components放组件、store放 Vuex、router管跳转、constracts放合约编译产物。不少人对“为什么要把 web3 和合约实例放进 Vuex”不理解实际原因是页面在路由间切换时如果每个页面都new Web3()、new Contract()会产生多个实例MetaMask 账户切换后很难做到全局同步。把连接状态收敛到 Vuex页面只从 store 取数据逻辑会清晰很多。3.1 初始化连接Web3 注入与账户监听在 DApp 场景下MetaMask 等钱包插件会向页面注入window.ethereum。初始化动作通常写在store/modules/web3.js里类似这样// src/store/modules/web3.js import Web3 from web3 import VoteArtifact from /constracts/Vote.json const state { web3: null, account: , chainId: 0, contract: null } const mutations { SET_WEB3(state, web3) { state.web3 web3 }, SET_ACCOUNT(state, account) { state.account account }, SET_CHAIN_ID(state, chainId) { state.chainId chainId }, SET_CONTRACT(state, contract) { state.contract contract } } const actions { async init({ commit }) { if (!window.ethereum) throw new Error(请先安装 MetaMask) const web3 new Web3(window.ethereum) const accounts await web3.eth.requestAccounts() const chainId await web3.eth.getChainId() const contract new web3.eth.Contract( VoteArtifact.abi, VoteArtifact.networks[chainId]?.address ) commit(SET_WEB3, web3) commit(SET_ACCOUNT, accounts[0]) commit(SET_CHAIN_ID, chainId) commit(SET_CONTRACT, contract) window.ethereum.on(accountsChanged, ([account]) { commit(SET_ACCOUNT, account || ) }) window.ethereum.on(chainChanged, () window.location.reload()) } } export default { state, mutations, actions }这里有个容易被忽略的细节VoteArtifact.networks[chainId]?.address是 truffle 部署后写入带网络的合约地址它要求本地链 chainId 与部署时一致。很多同学把地址硬编码到前端换一条链跑就白屏改用这种方式就省心了。requestAccounts()会触发 MetaMask 弹窗用户拒绝授权时返回的accounts是空数组记得在页面加载处 catch 并提示用户重新授权。accountsChanged和chainChanged这两个监听是演示时的刚需评审在 MetaMask 里切换账户后页面应该马上刷新成新账户的投票状态而不是手动刷新浏览器。3.2 组件里完成一轮投票页面调用合约写接口的标准姿势是在methods里使用send()方法并且明确指定from和gas。下面是候选人卡片组件的核心逻辑template div classcandidate-card h3{{ candidate.name }}/h3 p当前票数{{ candidate.voteCount }}/p button :disabled!account clickvote(candidate.id) 投给 {{ candidate.name }} /button /div /template script import { mapState } from vuex export default { name: CandidateCard, props: { candidate: { type: Object, required: true } }, computed: mapState([account]), methods: { async vote(id) { const { contract, account } this.$store.state try { const receipt await contract.methods.vote(id).send({ from: account, gas: 150000 }) this.$emit(voted, receipt) } catch (err) { // MetaMask 拒绝签名或链上 require 失败都会走到这里 console.error(投票失败, err.message) } } } } /scriptgas: 150000是给vote()预留的 gas 上限实际消耗通常在 6 万到 10 万 gas 之间。数值设太小会报out of gas设太大又会让用户支付不必要的费用在 Ganache 本地开发环境里这个值可以按合约复杂度调大比如300000。调用成功后receipt里有events.Voted.returnValues可以拿来刷新票数也可以直接调用getPastEvents重新同步列表。3.3 读接口与写接口的调用差异很多新手看到contract.methods.candidates(0).call()和contract.methods.vote(0).send()会混淆。二者差别要分清接口类型调用方式是否消耗 gas返回值典型用途读接口.call({ from: account })否立即返回结果查候选人、票数、当前阶段写接口.send({ from, gas })是交易收据 Promise注册、投票、结束投票call的返回值是普通 JavaScript 对象数值类型默认是字符串前端展示票数时最好用Number()转换但只适合票数在Number.MAX_SAFE_INTEGER以内的情况理论上选票数当然达不到那么大不过一旦涉及代币精度类字段就必须用ethers.utils.formatUnits或web3.utils.fromWei这类工具处理。写接口的send会开启一个异步流程先弹 MetaMask 签名确认再等待交易上链最后返回收据。演示时如果把await放在send前页面会一直转圈给人“卡死”的错觉可以在前端加一个submitting状态收到收据后再隐藏按钮 loading。4. 本地复现从源码包到跑通的完整命令拿到压缩包后不建议直接双击index.html因为这个项目需要编译和部署链上合约。完整链路是npm install装前端依赖启动一个本地区块链用 Truffle/Hardhat 部署合约最后让前端连接本地链跑起来。下面按顺序走一遍。4.1 依赖安装与项目结构解压后先在根目录执行依赖安装npm install如果 Node 版本过高导致依赖冲突比如node-sass编译失败可以改用npm install --legacy-peer-deps源码包里的主要目录结构如下智能合约投票系统/ ├── src/ │ ├── views/ # 页面投票页、结果页、管理员页 │ ├── components/ # 候选人卡片、状态提示等组件 │ ├── store/ # Vuex 状态管理 │ ├── router/ # 路由配置 │ ├── constracts/ # Solidity 源码和编译产物 │ └── main.js # 入口文件 ├── truffle-config.js # Truffle 网络配置 ├── vue.config.js # Vue 构建配置 └── package.jsonsrc/constracts这个目录名是源码包原样保留的命名虽然正确的英文是contracts但改目录名时需要同步改import路径否则运行时报模块找不到。vue.config.js里通常会配置devServer的端口和 proxy本地演示建议固定端口避免运行时被占用导致页面连不上。4.2 启动本地链并部署合约本地链推荐用 Ganache它提供图形界面和命令两种方式。命令行方式更轻量# 终端一启动本地链端口 8545 ganache-cli -p 8545启动后终端会打印 10 个账户地址和私钥记下第一个账户它就是后续合约部署者和 owner。另开终端部署合约# 终端二项目根目录下执行 truffle migrate --reset --network development--reset的作用是强制重新编译并部署避免旧迁移记录残留。部署成功后build/contracts/Vote.json里的networks字段会被写入当前 chainId 对应的合约地址前端靠这份 JSON 自动定位合约所以不要手动改地址。truffle-config.js里的development网络需要指向本地链// truffle-config.js 关键片段 module.exports { networks: { development: { host: 127.0.0.1, port: 8545, network_id: * } }, compilers: { solc: { version: 0.8.13 } } }network_id: *表示接受任意 chainId这是本地开发的常规配置。如果源码包用的是 Hardhat对应命令是npx hardhat node和npx hardhat run scripts/deploy.js --network localhost原理一致先把合约部署到本地链再把部署结果交给前端。4.3 MetaMask 连接本地 RPC前端跑起来之前先让 MetaMask 连上本地链。点击 MetaMask 顶部的网络切换选择“添加网络”填入以下参数配置项值网络名称Localhost 8545RPC URLhttp://127.0.0.1:8545链 ID1337货币符号ETH这里有一个高频踩坑点Ganache 默认链 ID 是1337Hardhat 默认是31337如果填错前端读取合约地址时networks[chainId]会得到undefined合约对象无法创建。添加网络后从 Ganache 终端复制一个账户私钥导入 MetaMask导入成功后确认账户余额不为 0。然后启动前端npm run serve浏览器访问http://localhost:8080MetaMask 会弹出连接授权请求点击确认后页面应显示当前账户地址和候选人列表。提示私钥相当于账户的最终控制权演示结束后不要截图私钥发到任何聊天工具本地开发可以随便用但养成不泄露私钥的习惯很重要。4.4 高频报错对照跑通之后建议把下面这份排查表保存下来答辩前按顺序自检一遍报错或现象原因处理办法Invalid number of parameters for undefinedABI 未更新或合约未编译重新truffle migrate --reset若前端热更新失效则重启npm run serveReturned error: invalid address前端拿到空合约地址检查 MetaMask 链 ID 与部署链 ID 是否一致查看Vote.jsonnetworks 字段Non-Error promise rejection capturedMetaMask 用户拒绝签名或 gas 不足在.catch中打印err.code确认账户有测试 ETH页面白屏且控制台没有报错Vue 版本与依赖不兼容查看package.json中 vue 与 vue-template-compiler 版本是否一致投票后票数不变读接口缓存或未重新拉取vote()成功后调用candidates(id).call()重新获取并覆盖本地状态还有一类问题在课程设计里很常见多个浏览器共用同一个 MetaMask 账户导致 A 投完票后 B 用同一地址再投交易被链上require拦截。演示多人投票前一定要准备至少两个账户并在不同浏览器里分别导入。5. 验证与演示技巧让评委看懂链上计票去中心化投票系统的答辩重点不是页面 UI 多好看而是证明“票是链上记的、过程可审计、结果可信”。下面三个演示技巧能直接提升项目说服力。5.1 用事件日志复盘一次投票在浏览器控制台执行下面代码即可打印全部投票流水// 假设 window.__voteContract 是从 store 里拿到的合约实例 const events await window.__voteContract.getPastEvents(Voted, { fromBlock: 0, toBlock: latest }) events.forEach(e { console.log( ${e.returnValues.voter} 投给了候选人 ${e.returnValues.candidateId} ) })fromBlock: 0表示从部署区块开始搜索toBlock: latest表示一直到当前高度。Voted事件里的voter是选民地址candidateId是候选人 ID。把这段输出截图放进答辩 PPT比任何流程图都直观。Ganache 终端里也会同步显示每笔交易详情包括消耗的 gas 和交易哈希可以对照前端操作逐笔验证。5.2 双浏览器双账户模拟多人投票推荐用浏览器无痕窗口或双浏览器方案Chrome 导入 Ganache 第一个账户Edge 导入第二个账户两个窗口都打开系统页面。先在管理员页面完成两个地址的注册再分别执行投票。这里有一个很实用的提效技巧如果源码包没有批量注册表单直接打开 Truffle Console 操作truffle console --network development// Truffle Console 环境里已注入合约抽象 const instance await Vote.deployed() await instance.register(0x账户A地址, { from: owner }) await instance.register(0x账户B地址, { from: owner })Vote.deployed()会自动读取 JSON 里的最新部署地址不需要手动传入。注册完成后两个浏览器各自投票最后在结果页对比票数并请评审观察 MetaMask 里transaction hash的不同。要注意投票前把系统切到Voting阶段很多项目遗漏了“阶段切换”这一步导致演示时一直停在注册阶段。5.3 演示前的边界检查清单场景预期行为自查位置同一账户重复投票第二笔交易 revertMetaMask 弹出失败提示合约hasVoted字段未注册账户点击投票交易被拦截页面提示未注册voters[addr].registered投票阶段调用注册接口revertwrong phase当前phase状态两个候选人平票winner()返回数组靠前的一个合约遍历逻辑必要时提前制造非平票演示中途切换 MetaMask 账户页面按钮禁用态跟随账户变化前端是否注册accountsChanged监听演示结束后直接把 Ganacheevm_snapshot或图形界面的快照功能恢复一遍再走一次注册到计票全流程能快速验证系统状态是否干净这是课程设计演示前最省时间的回归手段。本文还有配套的精品资源点击获取