第十二章 | Solidity 智能合约前后端集成实战

📚 第十二章 | Solidity 智能合约前后端集成实战

——链上合约 × 前端钱包 × 用户交互，打造完整 DApp！

这章我们正式进入 DApp 全栈开发领域！

• 用 Ethers.js + React/Vue 完成前端和合约交互
• 完整的「前端发起交易 → 钱包签名 → 链上执行 → 返回结果」流程
• 小白也能学会的详细教程，结合最佳实践，让你写出的前端既能跑、还能上线！

✅ 本章导读

写完智能合约，测试、部署都 OK，那接下来怎么办？
当然是做 DApp！
DApp = 智能合约（链上）+ 前端应用（链下）
用户通过网页或 App，操作链上资产、签名授权、发起交易——这些，都需要我们用 Ethers.js（或 Web3.js） 来对接合约。

✅ 本章你将掌握

1. DApp 前后端集成基础
2. 钱包集成（MetaMask）
3. Ethers.js 核心用法
4. 连接合约，读取数据、发送交易
5. React/Vue 前端项目实战
6. 常见钱包授权 / 签名交互流程
7. 完整 DApp 项目结构
8. 用户体验优化技巧

1️⃣ DApp 前后端集成基础知识

📌 以太坊区块链 = 后端服务器
Ethers.js = 前端调用接口的 SDK

2️⃣ 准备工作

• 已部署合约地址
• 已部署合约 ABI 文件
• 确认已安装 Node.js v16.x 以上
• 浏览器装了 MetaMask 插件

3️⃣ 钱包接入（MetaMask）

✅ 安装 MetaMask

MetaMask 官网
支持主流浏览器（Chrome、Brave、Firefox）

✅ 钱包基本功能

• 登录身份
• 管理私钥
• 代签交易
• 签名授权
• 网络切换（主网/测试网）

✅ 判断用户是否安装 MetaMask

if (typeof window.ethereum !== 'undefined') {
  console.log('MetaMask 已安装');
} else {
  console.log('请安装 MetaMask');
}

4️⃣ Ethers.js 入门与环境搭建

✅ 安装 Ethers.js

npm install ethers

✅ 创建 Provider

连接链上节点（默认使用钱包节点）

import { ethers } from 'ethers';

const provider = new ethers.providers.Web3Provider(window.ethereum);

✅ 获取用户地址（登录）

const accounts = await provider.send('eth_requestAccounts', []);
const userAddress = accounts[0];

✅ 获取签名器 Signer（发起交易）

const signer = provider.getSigner();

5️⃣ 连接合约，链上读写操作

✅ 准备 ABI 和 合约地址

const contractAddress = '0xAbC123...'; // 部署的合约地址
const contractABI = [ /* 你的 ABI 内容 */ ];

✅ 创建合约实例

const contract = new ethers.Contract(contractAddress, contractABI, signer);

✅ 读取合约数据（call）

const name = await contract.name();
console.log('Token 名称:', name);

✅ 发送交易（write）

const tx = await contract.transfer('0xReceiverAddress', ethers.utils.parseEther('1.0'));
await tx.wait();
console.log('转账成功！');

6️⃣ React/Vue 前端项目结构

这里我们以 React 为例，Vue 原理一致。

✅ 快速搭建项目

npx create-react-app my-dapp
cd my-dapp
npm install ethers

✅ 项目结构示例

src/
├─ components/
│  ├─ ConnectWallet.js   // 钱包连接
│  ├─ TokenInfo.js       // 显示代币信息
│  └─ TransferToken.js   // 转账表单
├─ App.js
└─ utils/
   └─ contract.js        // 合约实例化

7️⃣ 核心功能代码实现

✅ ConnectWallet.js

import React, { useState } from 'react';
import { ethers } from 'ethers';

export default function ConnectWallet({ setAccount }) {
  const connectWallet = async () => {
    if (!window.ethereum) {
      alert('请先安装 MetaMask！');
      return;
    }
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const accounts = await provider.send('eth_requestAccounts', []);
    setAccount(accounts[0]);
  };

  return (
    <button onClick={connectWallet}>连接钱包</button>
  );
}

✅ TransferToken.js

import React, { useState } from 'react';
import { ethers } from 'ethers';
import { contractAddress, contractABI } from '../utils/contract';

export default function TransferToken() {
  const [to, setTo] = useState('');
  const [amount, setAmount] = useState('');

  const sendToken = async () => {
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const signer = provider.getSigner();
    const contract = new ethers.Contract(contractAddress, contractABI, signer);

    const tx = await contract.transfer(to, ethers.utils.parseEther(amount));
    await tx.wait();
    alert('转账成功！');
  };

  return (
    <div>
      <input type="text" placeholder="接收地址" onChange={e => setTo(e.target.value)} />
      <input type="text" placeholder="数量" onChange={e => setAmount(e.target.value)} />
      <button onClick={sendToken}>转账</button>
    </div>
  );
}

8️⃣ 钱包签名 & 授权交互（高级）

✅ 签名消息（用于登录认证）

const signer = provider.getSigner();
const message = "登录验证";
const signature = await signer.signMessage(message);
console.log('签名:', signature);

✅ EIP-712 结构化签名（高级）

• 用于链下签名，链上验证
• 常用于授权、链下协议签名

🚀 推荐用 eth_signTypedData，更安全，防止钓鱼

9️⃣ 用户体验优化技巧

✅ 切换网络（自动提示）

try {
  await window.ethereum.request({
    method: 'wallet_switchEthereumChain',
    params: [{ chainId: '0x5' }], // Goerli
  });
} catch (switchError) {
  console.error(switchError);
}

🔟 完整 DApp 项目实战

👉 小型 NFT 市场 / 代币空投 / DAO 投票系统都可基于这个流程开发

• 钱包登录
• 合约数据读取
• 发起链上交易
• 实时状态监听
• Dune Analytics 集成展示链上数据

✅ 小结

这一章，我们全面掌握了 DApp 的开发流程：
✔️ 钱包登录 + 钱包签名
✔️ Ethers.js 合约交互
✔️ 读取数据 / 发起交易
✔️ React 项目实战
✔️ 用户体验优化
✔️ 结构化签名和授权

🎯 课后挑战

1. 做一个 NFT 交易前端

• 显示 NFT 列表
• 用户挂单 / 取消挂单
• 完成交易

1. DAO 投票前端

• 发起提案
• 投票并查看状态

1. 集成 Gas 费用优化（EIP-1559）
2. 上线 vercel / netlify 公网预览
3. Dune 看板同步展示数据

✅ 下一章预告｜第十三章

👉 Hardhat + Foundry 测试与自动化部署实战
🚀 单元测试、覆盖率
🚀 自动化部署、CI/CD
🚀 安全测试、审计流程集成
🚀 真正做到代码即基础设施（IaC）