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

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

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

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

用 Ethers.js + React/Vue 完成前端和合约交互

完整的「前端发起交易 → 钱包签名 → 链上执行 → 返回结果」流程

小白也能学会的详细教程，结合最佳实践，让你写出的前端既能跑、还能上线！

✅ 本章导读

写完智能合约，测试、部署都 OK，那接下来怎么办？

当然是做 DApp！
DApp = 智能合约（链上）+ 前端应用（链下）

用户通过网页或 App，操作链上资产、签名授权、发起交易------这些，都需要我们用 Ethers.js（或 Web3.js）来对接合约。

✅ 本章你将掌握

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

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

组件	说明
智能合约	部署到以太坊（或其他链）
钱包（MetaMask）	用户登录、发起交易
前端（React/Vue）	展示数据、发起链上交互
Ethers.js	前端与链上通信的 JS 库

📌 以太坊区块链 = 后端服务器

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️⃣ 用户体验优化技巧

技巧	说明
自动识别链	判断用户是否在正确网络
余额实时刷新	监听区块 or Event，实时更新
错误处理提示	捕获错误，用户友好展示
Loading / ProgressBar	交易确认前显示等待状态
Gas 费用优化	使用 EIP-1559 估算 Gas
多钱包兼容	支持 WalletConnect、Coinbase Wallet

✅ 切换网络（自动提示）

复制代码

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 项目实战

✔️ 用户体验优化

✔️ 结构化签名和授权

🎯 课后挑战

做一个 NFT 交易前端

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

DAO 投票前端

发起提案
投票并查看状态

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

✅ 下一章预告｜第十三章

👉 Hardhat + Foundry 测试与自动化部署实战

🚀 单元测试、覆盖率

🚀 自动化部署、CI/CD

🚀 安全测试、审计流程集成

🚀 真正做到代码即基础设施（IaC）

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

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

✅ 本章导读

✅ 本章你将掌握

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

2️⃣ 准备工作

3️⃣ 钱包接入（MetaMask）

✅ 安装 MetaMask

✅ 钱包基本功能

✅ 判断用户是否安装 MetaMask

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

✅ 安装 Ethers.js

✅ 创建 Provider

✅ 获取用户地址（登录）

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

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

✅ 准备 ABI 和 合约地址

✅ 创建合约实例

✅ 读取合约数据（call）

✅ 发送交易（write）

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

✅ 快速搭建项目

✅ 项目结构示例

7️⃣ 核心功能代码实现

✅ ConnectWallet.js

✅ TransferToken.js

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

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

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

9️⃣ 用户体验优化技巧

✅ 切换网络（自动提示）

🔟 完整 DApp 项目实战

✅ 小结

🎯 课后挑战

✅ 下一章预告｜第十三章

✅ 准备 ABI 和合约地址