在區塊鏈開發中，DApp（去中心化應用）的開發往往涉及到多個層次：前端、合約和后端。今天我們將演示如何將?Vue 前端、Hardhat 合約?和?Node.js 后端?放在一個項目中，來打造一個完整的區塊鏈應用。
1. 項目結構
我們的目標是創建一個?Monorepo 項目，將所有代碼放在同一個倉庫里。這樣有助于我們統一管理依賴、版本，并能方便地實現前后端協作。
項目的結構如下：
my-dapp-project/
│
├── contracts/ # Hardhat 合約代碼
│ ├── MyContract.sol
│ ├── hardhat.config.js
│ └── ...
│
├── scripts/ # Hardhat 部署與交互腳本
│ ├── deploy.js
│ └── ...
│
├── test/ # Hardhat 測試代碼
│
├── frontend/ # Vue 前端
│ ├── src/
│ ├── public/
│ ├── package.json
│ └── vite.config.js
│
├── backend/ # 后端服務（Node.js / Express / NestJS 等）
│ ├── src/
│ ├── package.json
│ └── server.js
│
├── shared/ # （可選）前后端共享代碼/類型
│ └── contract-types/
│
├── package.json # 根目錄 package.json（可用來管理全部子項目依賴）
├── README.md
└── .gitignore
2. 環境搭建
首先，我們需要初始化項目的根目錄并安裝相關依賴。
2.1 初始化根目錄
mkdir my-dapp-project
cd my-dapp-project
npm init -y
2.2 安裝 Hardhat
npm install --save-dev hardhat
npx hardhat init
2.3 創建 Vue 前端
我們將在?frontend/?文件夾中創建 Vue 項目。使用 Vue CLI 來創建前端應用：
cd frontend
npm init vue@latest
npm install
2.4 創建 Node.js 后端
在?backend/?文件夾中，我們將創建一個簡單的 Node.js 服務來處理后端邏輯：
cd backend
npm init -y
npm install express ethers
在?backend/src/server.js?中，我們會創建一個簡單的 Express 服務來監聽和處理合約事件。
3. 編寫合約
我們將創建一個簡單的智能合約?MyContract.sol，它包含一個簡單的存取款功能。
3.1 創建?contracts/MyContract.sol
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;contract MyContract {uint256 public balance;function deposit(uint256 amount) public {balance += amount;}function withdraw(uint256 amount) public {require(amount <= balance, "Insufficient funds");balance -= amount;}
}
3.2 部署合約
在?scripts/deploy.js?文件中，我們編寫部署腳本：
const hre = require("hardhat");async function main() {const [deployer] = await hre.ethers.getSigners();console.log("Deploying contracts with the account:", deployer.address);const MyContract = await hre.ethers.getContractFactory("MyContract");const contract = await MyContract.deploy();console.log("MyContract deployed to:", contract.address);
}main().catch((error) => {console.error(error);process.exitCode = 1;
});
部署合約后，我們將得到合約地址，并將其傳遞給前端和后端。
4. 后端與智能合約交互
在后端，我們將使用?ethers.js?連接到區塊鏈，并提供一些 API 來讓前端調用智能合約。
4.1 創建后端?server.js
const express = require('express');
const { ethers } = require('ethers');
const app = express();
const port = 3000;// 連接到以太坊節點
const provider = new ethers.JsonRpcProvider('http://localhost:8545');// 智能合約 ABI 和地址
const abi = ["function deposit(uint256 amount) public","function balance() public view returns (uint256)"
];
const contractAddress = 'YOUR_CONTRACT_ADDRESS_HERE';// 創建合約實例
const contract = new ethers.Contract(contractAddress, abi, provider);app.get('/balance', async (req, res) => {const balance = await contract.balance();res.json({ balance: balance.toString() });
});app.post('/deposit', express.json(), async (req, res) => {const { amount } = req.body;const signer = provider.getSigner();const contractWithSigner = contract.connect(signer);await contractWithSigner.deposit(amount);res.json({ message: 'Deposit successful' });
});app.listen(port, () => {console.log(`Server running at http://localhost:${port}`);
});
在這個簡單的 Node.js 后端中，我們提供了?/balance?和?/deposit?API，用于查詢余額和執行存款操作。
5. 前端與后端交互
在前端，我們將使用?ethers.js?連接到智能合約，并調用合約方法。同時，我們也會通過 API 與后端進行交互。
5.1 安裝?ethers.js
cd frontend
npm install ethers
5.2 Vue 前端調用合約
在 Vue 中，我們可以通過?ethers.js?調用智能合約。以下是一個簡單的 Vue 組件示例，展示如何與智能合約交互：
<template><div><h1>Balance: {{ balance }}</h1><button @click="deposit">Deposit 10</button></div>
</template><script>
import { ethers } from 'ethers';export default {data() {return {balance: 0,contract: null,};},async mounted() {const provider = new ethers.JsonRpcProvider('http://localhost:8545');const abi = ["function deposit(uint256 amount) public","function balance() public view returns (uint256)"];const contractAddress = 'YOUR_CONTRACT_ADDRESS_HERE';this.contract = new ethers.Contract(contractAddress, abi, provider);this.updateBalance();},methods: {async updateBalance() {this.balance = await this.contract.balance();},async deposit() {const signer = this.contract.provider.getSigner();const contractWithSigner = this.contract.connect(signer);await contractWithSigner.deposit(10);this.updateBalance();}}
};
</script>
6. 啟動項目
// 1. 啟動本地鏈：
npx hardhat run scripts/deploy.js --network localhost// 2. 部署合約：
npx hardhat run scripts/deploy.js --network localhost// 3. 啟動后端服務
cd backend
node src/server.js// 4. 啟動前端服務：
cd frontend
npm run dev總結
通過將?Vue 前端、Hardhat 合約?和?Node.js 后端?放在同一個項目中，我們可以方便地管理所有代碼和依賴，創建一個完整的去中心化應用（DApp）。在這個示例中，前端與后端通過智能合約交互，后端提供了一些 API 來簡化與合約的通信。
這個結構不僅適用于簡單的 DApp 項目，也可以擴展到更復雜的應用，支持更多的區塊鏈交互、API 處理和前端功能。
