当前位置：首页 > news >正文

如何将 Vue 前端、Hardhat 合约和 Node.js 后端集成到一个项目中

news 2025/8/11 12:56:44

在区块链开发中，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