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

在区块链开发中，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 处理和前端功能。