区块链电子证据存证系统前端实战：从哈希上链到校验部署

简介基于区块链的电子证据存证系统前端源码面向计算机相关专业学生、教师及开发者尤其适合毕业设计、课程设计与项目初期演示。系统依托区块链去中心化、不可篡改、公开透明的特性实现电子证据的上传、存证、查询与核验界面直观、操作简单。资源共78个文件、压缩包约5.13MB源码主体含37个JavaScript文件与17个Less样式文件并按pages页面、services服务、components组件、models模型、layouts布局等目录组织配合assets静态图片与ESLint、Prettier等工程化配置从目录与配置来看这是基于React生态Umi/Dva构建的典型前端工程整体结构规范、二次开发友好。目前已有60人学习。通过研读这份源码可理解区块链存证业务的前端实现思路熟悉现代Web应用的组件化开发、状态管理、接口联调与构建部署流程为独立完成毕业设计或区块链应用开发积累技术基础。1. 区块链电子证据存证系统的前端到底在做什么活拿到电子合同、订单截图或者一段聊天记录想证明它在某个时间点确实存在过且没被改动这就是电子证据存证。区块链电子证据存证系统的前端源码包指的是这个业务场景里用户能直接操作的界面部分——上传文件、计算哈希、调用链上合约、翻证据列表、做真伪校验。它背后靠的是区块链不可篡改的特性前端看着只是表单和表格实际上任何一步处理不当都会让存证在司法场景里失去效力。适合两类人一是做课程设计或毕业设计的学生需要跑通一条完整的存证链路二是企业内部做合规存证原型、需要快速验证方案的开发。先想清楚前端在这一套系统里的边界后面读源码和改代码才不会跑偏。2. 从zip到跑通存证前端的技术栈与目录怎么读2.1 为什么这类前端偏偏以zip包交付而不是在线Demo这类系统常见于课程设计、课题验收或者企业内部交付源码以zip压缩包形式流转是常态。前端要接入区块链选型通常有两类走法一类是直连链前端通过 web3.js 或 ethers.js 直接跟链上节点交互浏览器里配置钱包即可适合以太坊系或兼容EVM的链另一类是走后端转发前端只调后端API由后端完成链上读写适合 FISCO BCOS 等联盟链或者为了把私钥统一管在服务端。拿到zip先别急着解压看一眼里面的 package.json就知道这套前端是哪条路依赖里出现 web3、ethers、walletconnect 就是直连链出现大量 axios、api、request 这类请求库则多半走代理模式。这类项目偏爱 Vue 而不是 React主要原因是国内教学和课程设计里 Vue 的普及率更高生态组件上手快。另一个特征是前端代码普遍很薄因为存证系统的核心逻辑在合约和后端前端更多是“把用户的文件算成哈希、把哈希交出去、把链上结果展示出来”。读这种目录最忌讳一上来就挨个文件看先把关键目录定位住剩下的自然能串起来。2.2 目录结构读完一个前端包该看哪几个文件典型的存证前端目录长这样路径职责重点看什么src/views/页面组件存证提交页、证据列表页、证据详情页、校验页src/api/ 或 src/services/数据请求层哪些接口直连链、哪些走后端合约地址从哪来src/contract/ 或 src/abi/合约ABI与地址配置合约地址是不是写死、ABI是否完整src/utils/hash.js哈希计算工具用SHA256还是keccak256大文件是否分片.env.development / .env.production环境变量链节点RPC、合约地址、后端API地址vue.config.js 或 vite.config.js构建配置代理、路由模式、打包输出我一般会先打开 .env 系列文件把链的RPC地址和合约地址抄下来再打开 src/utils/hash.js确认它用的哈希算法最后看 src/views 里存证提交页的提交逻辑。这三个文件看完基本能判断这套前端能不能在本地跑起来。多数课程项目的配置文件是写死的chainId、合约地址、RPC 全部硬编码在代码里。如果要把这套系统改成自己的链环境第一件事就是把这些常量抽到环境变量里不然后面每换一次链就得翻源码。2.3 每个功能页面背后的链路先于代码建立心智模型存证前端的页面一般不会超过六个存证登记、证据列表、证据详情、证据校验、证书查看、系统说明。核心链路只有两条。一条是存证链路用户上传文件或输入文本前端在本地计算哈希然后把哈希和元数据通过用户的钱包账户提交到合约等待交易上链拿到交易哈希、区块号、区块时间展示给用户。另一条是验证链路用户重新上传文件前端重新计算哈希到链上查询这个哈希是否存在、对应的存证时间是什么时候比对结果告诉用户真伪。把这两条链路记清楚读代码时看到send()就知道这步在上链看到.call()就知道这只是读链不花费gas。很多前端新人在这个地方栽跟头分不清交易类调用和查询类调用结果把查询也写成交易弹出一堆钱包确认框。3. 把前端跑起来解压安装、链节点配置与构建发布的完整流程3.1 解压与依赖安装node版本和registry这两个暗坑zip解压看起来是最没技术含量的一步在这里翻车的概率反而最高。先把包解压到纯英文路径下路径里带中文或空格webpack打包时会报出Module not found这类莫名其妙的问题。解压工具建议用 7-Zip 或 Windows 自带资源管理器如果解压时提示需要密码或文件损坏先检查是不是伪加密——部分传输工具会给zip包加一层伪加密标志位实际没有加密内容换解压工具或修复标志位即可这属于文件层面的坑跟代码无关。# 假设包名是 evidence-frontend.zip unzip evidence-frontend.zip -d ./evidence-frontend cd evidence-frontend # 检查node版本Vue2时代的老工程建议14或16太新容易出问题 node -v # 使用国内镜像加速依赖安装 npm config set registry https://registry.npmmirror.com # 安装依赖 npm installunzip的-d参数指定解压目录避免把多个文件直接铺在当前目录下。node -v这步很关键存证系统如果是 Vue2 webpack4 的技术栈直接用 node18 以上版本安装node-sass或者webpack-dev-middleware会在编译阶段报错报错信息像乱码一样根本看不出是版本问题。把 Node 切回 16 再npm install问题往往当场消失。npm config set registry换的是npm镜像源课程项目往往依赖老版本的node-sass、fibers这类编译型依赖从国外源拉取会卡在node-gyp编译环节。换完镜像再安装这一步骤能省掉大量等待时间。装完后执行npm run serve或npm run dev看到本地服务起来才说明依赖环境过关。3.2 环境变量与链节点配置一个地址错了整条链不可见前端启动起来只是第一步真正决定能不能跑通业务的是环境变量。存证前端最少需要四个配置配置项示例作用VUE_APP_CHAIN_RPChttp://127.0.0.1:8545链节点RPC地址VUE_APP_CONTRACT_ADDRESS0x1234...abcd已部署存证合约的地址VUE_APP_CHAIN_ID1337链ID交易签名时校验VUE_APP_BACKEND_APIhttp://localhost:8080/api后端接口地址纯前端场景可忽略# .env.development 示例 VUE_APP_CHAIN_RPChttp://127.0.0.1:8545 VUE_APP_CONTRACT_ADDRESS0x9A3f...F41B VUE_APP_CHAIN_ID1337 VUE_APP_BACKEND_APIhttp://localhost:8080/apiRPC地址配错了现象是页面能打开、但所有涉及链数据的操作全部报错或一直转圈。合约地址配错了现象更隐蔽页面打开正常提交存证时钱包也弹出来了但交易在链上执行时调用了不存在的合约或者调到了一个已经销毁的合约上交易失败还要扣gas。验证方法很简单用 curl 直接调RPC接口看节点返回curl -X POST http://127.0.0.1:8545 -H Content-Type: application/json \ --data {jsonrpc:2.0,method:eth_blockNumber,params:[],id:1}返回{result:0x...}说明RPC通。如果返回连接拒绝或超时那是节点没起来或端口不对不是前端配置问题。链ID配错了钱包会直接拒绝签名或提示chainId不匹配这个错误倒是很明显。3.3 启动与构建dev和build到底该用哪个# 开发调试热更新改代码即时生效 npm run serve # 生产构建输出dist目录用于部署 npm run build开发阶段用npm run serve它启动的是 webpack-dev-server代码改动会热更新改页面样式和逻辑都方便。生产阶段用npm run build输出dist目录把 dist 丢到 nginx 或任意静态服务器上就行。部署时有一个老坑如果前端用了 Vue Router 的 history 模式nginx 必须把所有路由都指向 index.html否则用户刷新任何深层页面都会出现404。配置片段location / { try_files $uri $uri/ /index.html; }try_files的作用是找不到对应的静态文件时回退到入口页面。存证详情页这类带参数的路径刷新时最容易触发这个坑。如果你只在本机演示不部署到服务器用npm run serve就够了如果你要交付给其他环境一定要跑npm run build后再找一台服务验证一遍。4. 核心业务拆开看本地Hash、合约上链与证据列表的实现边界4.1 前端算Hash还是后端算这一步决定证据链路是否闭合存证的本质是把“原始数据的特征值”写到链上这个特征值就是哈希。问题在于这个哈希到底该由前端算还是后端算这里有一个认知误区好多人认为应该后端算因为后端更权威。实际上在区块链存证场景里公正性不来自计算哈希的一方而是来自链上记录和原始数据之间的对应关系。哈希在本地算有更实际的原因——文件从用户设备传到后端再计算中间经过网络传输一旦被网关、抓包工具改写存进去的哈希跟用户手里原文件的哈希就对不上。前端算完哈希再上链证据链条从用户设备本地一直延伸到链上中间没有缺口。所以常见的做法是前端负责计算哈希后端或合约只负责记录和存储元数据。下面是一个标准的前端本地哈希计算函数// src/utils/hash.js // 使用浏览器原生 crypto.subtle 计算文件SHA256不需要额外依赖 export async function calcFileHash(file) { // arrayBuffer() 一次性读入文件全部内容 const buffer await file.arrayBuffer(); // SHA-256 是存证场景最常用的哈希算法 const digest await crypto.subtle.digest(SHA-256, buffer); // 摘要转十六进制字符串转成小写方便与链上对比 return Array.from(new Uint8Array(digest)) .map((b) b.toString(16).padStart(2, 0)) .join(); }crypto.subtle.digest是浏览器内置的Web Crypto API不需要引第三方库性能比纯JS实现快一个量级。arrayBuffer()一次性读入文件对小文件没有问题但大文件会直接把浏览器内存吃满后面避坑章节会专门说这个。返回值是64位小写十六进制字符串这也是SHA256的标准长度。如果合约里固化的是keccak256那么这里要改写成web3.utils.sha3(buffer)因为两种算法虽然输出长度相同计算结果完全不同。4.2 调用合约上链send和call的边界gas和from谁签字哈希算完之后要把它作为参数调用合约写入链上状态。这一步是前端整个系统里最核心的一笔操作。// src/api/evidence.js import Web3 from web3; // ABI文件一般在源码包里附带没有就去链浏览器里拿 import contractABI from /contract/EvidenceContract.json; // 优先使用用户浏览器里注入的provider如MetaMask否则回退到本地RPC const web3 new Web3(Web3.givenProvider || process.env.VUE_APP_CHAIN_RPC); const contract new web3.eth.Contract( contractABI, process.env.VUE_APP_CONTRACT_ADDRESS ); // 提交存证把文件哈希和元数据写入链上 export async function submitEvidence(fileHash, meta) { // 请求用户钱包授权这一步会弹窗 const accounts await web3.eth.requestAccounts(); // send是写操作会消耗gas并等待上链 const tx await contract.methods .addEvidence(fileHash, JSON.stringify(meta), Date.now()) .send({ from: accounts[0], gas: 3000000, }); return tx; }这段代码里参数要重点说明requestAccounts()是让用户通过钱包授权地址拿到的是签名账户send()是写操作会真实产生交易必须在from指定签名账户gas给的是gas上限给太少交易会失败给太多主网上会浪费钱本地区块链随便设300万在测试环境通常够用。合约的addEvidence方法形参顺序要和源码包里的ABI以及合约源码严格对应这个环节错了交易会在链上revert错误信息还不一定直观。Date.now()传的是前端本地时间严格来说应该用区块时间后面避坑详述。4.3 证据列表与分页链上遍历的代价与应对存证上链之后前端要从链上把历史存证记录拉回来展示。这一步如果设计得不好代码写起来顺线上跑起来灾难。// 从链上按序号范围拉取证据列表逐条取出是一条很常见的实现 export async function fetchEvidencePage(page, pageSize) { // 先取总条数这是合约里提供的counter const total await contract.methods.getEvidenceCount().call(); const start Math.min(page * pageSize, total); const end Math.min(start pageSize, total); const list []; for (let i start; i end; i) { // 按索引取每条证据call是读操作不消耗gas const item await contract.methods.getEvidenceByIndex(i).call(); list.push({ id: item[0], hash: item[1], timestamp: item[2], meta: item[3], }); } return { total: Number(total), list }; }getEvidenceCount()和getEvidenceByIndex()都是.call()调用只读链上状态、不消耗gas但这里的边界在于每调一次就是一次网络往返分页从第0条开始遍历的话page越大、每次翻页成本越高且页面一多体验就崩。区块链本身不擅长这类聚合查询常见的解决办法是后端定时把链上事件同步到数据库前端查后端接口或者在前端维护一份本地缓存首次全量拉取后存进localStorage后续增量更新。这两种做法里后端索引更可靠但很多课程项目图省事直接链上遍历能跑通演示但距离“能上线”还有差距。5. 避坑清单存证前端最容易翻车的5处细节5.1 zip伪加密与中文路径导致的解压失败现象解压源码包时提示需要密码或者解压出来 npm run serve 报模块找不到。原因传输过程中被工具加过伪加密标志位实际文件并没有加密另一种情况是解压路径含中文webpack 对非ASCII路径处理不稳定。解决换用 7-Zip 或 Windows 资源管理器自带的解压功能重试伪加密文件用工具修复标志位后再解压解压后统一放到类似D:\evidence-frontend这样的纯英文路径下。这个坑常发生在源码包流转的第一步排查优先级最高。5.2 哈希算法不一致SHA256和keccak256的玄学错位现象存证流程走完页面提示成功但用校验功能重新比对时结果始终显示“未找到匹配证据”。原因前端计算哈希用crypto.subtle.digest(SHA-256)而链上合约固化的是keccak256两种算法算出来的摘要完全不一样。同一个文件SHA256 和 keccak256 结果长度都是64位但内容毫无关联链上永远查不到这条记录。解决去合约源码看它存储时调用的是哪个哈希算法然后前端工具函数对齐。合约里写的sha256(...)就保持SHA256合约里用的keccak256(...)前端改成web3.utils.sha3(...)。在合同类和存证类项目里这个错误属于排查成本最高的类型因为两个系统各自运行都正常只在链路交叉处暴露。验证方法是拿同一个文件分别用两种算法各算一次你会发现完全不同立刻定位。5.3 本地时间被当成存证时间现象证据详情页展示的存证时间跟实际区块时间差出几个小时到了正式场合公信力受损。原因前端提交存证时把Date.now()或本地格式化时间作为时间戳传给合约合约照单全收。本地时间是用户设备上的时间可以任意修改不具备存证意义。解决合约存证时间只取block.timestamp前端展示时再去把区块时间转成本地时区。如果合约已经把本地时间存上链了前端做不到自我纠正只能在上链前处理。定位方法是查交易详情里的block时间跟页面显示时间对比不一致就是这处问题。5.4 改了配置不生效环境变量缓存与跨域现象改了.env.development里的 API 地址刷新页面后请求还是打到旧地址联调时浏览器报 CORS 错误。原因webpack 在启动时读一次环境变量改完.env必须重启npm run serve热更新不会重新加载环境变量跨域则是后端接口没有开 CORS 头或者前端没有走代理。解决修改.env文件后终止 dev server 重新启动浏览器用 CtrlShiftR 强制刷新清掉缓存。跨域在vue.config.js里配置 devServer 代理// vue.config.js devServer: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }代理的作用是把前端请求先发到同源的 dev server再由 dev server 转发给后端浏览器侧不再有跨域问题。生产环境则由 nginx 配置同样的反向代理。5.5 私钥硬编码与gas设置失控现象源码里写死一个私钥所有交易都用这个账户发起gas 上限设成500万测试链上没感觉一上主网每笔交易都在烧钱。原因课程项目为了方便省掉钱包交互直接把私钥写在前端代码里。这在公网上等于把账户凭证送人私钥泄露后任何人只要拿到ABI就能冒充操作者提交数据。解决前端只做用户钱包签名私钥永远不进前端代码用 MetaMask 这类钱包注入的 provider 处理签名gas 用estimateGas()预估后再加上一定余量不要拍脑袋设置上限。私钥一旦在交易中被使用过就很难自证这条记录是你的本人操作在存证场景里这是致命的信任问题。所有硬编码私钥的前端上线前必须清掉这是底线问题。6. 从能跑到能用证据校验页与二次开发的3个技巧6.1 存证导出快照让校验页摆脱在线依赖存证系统跑顺之后最常见的进化需求是离线校验。业务方拿着原始文件希望在没有任何后台的情况下验真。实现思路是导出快照把存证ID、文件哈希、区块号、区块时间、交易哈希整理成一个JSON文件用户离线时重新算文件哈希拿哈希比对快照里的记录即可。这个功能改动很小在证据详情页加一个“导出存证信息”按钮就好。6.2 事件监听替代轮询存证列表实时更新的场景不要用定时器隔几秒去翻链改用合约事件监听// 订阅合约的EvidenceAdded事件新存证上链后自动收到通知 contract.events.EvidenceAdded({ fromBlock: latest }) .on(data, (event) { console.log(新存证上链, event.returnValues); // 更新页面列表 }) .on(error, console.error);事件监听的优点是实时性好不产生额外RPC轮询压力。课程项目里一般不会写但生产环境这个技巧会让页面响应质感完全不同。6.3 校验页的最小实现校验页只有三步选文件、算哈希、链上查。链上查询用call()在本地就能完成不需要钱包签名。把校验函数封装成独立模块不依赖任何存证页面将来嵌入其他系统时可以直接复用。我自己的习惯是每次提交存证就把交易哈希和区块号复制到本地文本里留底。别嫌手动操作原始这串信息是链上唯一能证明“我当时确实提交过”的后悔药。存证系统的前端难度不在UI而在时刻记住链上才是权威一切展示以链上数据为准。希望帮到你。本文还有配套的精品资源点击获取