EtherJs:前端与智能合约的交互初识

概述

我们在之前的一系列文章中，已经充分学习了简单的智能合约编写。在此文中，我们将介绍如何在前端通过ether.js和metamask与以太坊智能合约进行交互，实现一个简单的ERC-20 DApp，并最终实现项目自动化部署到IPFS和Cloudflare中，即CI/CD。

本文假设读者具有基础的Vue开发经验和智能合约开发经验。

本文将使用以下技术栈:

MetaMask
ethers.js
vue + vite
pnpm
bulma
foundry

为了减少发币时的gas消耗，本项目后端将使用著名的Beacon架构，如果读者从未了解过此架构，建议阅读本人博客中的Foundry教程：使用多种方式编写可升级的智能合约(下)

总体架构

本项目将使用vue作为前端开发工具，vite作为打包工具，使用pnpm作为包管理工具，同时使用Cloudflare Pages进行自动化部署。在前端中，我准备使用知名以太坊钱包MetaMask作为以太坊接口提供者。如果读者希望获得更好的体验，可以自行更换为infura、Cloudflare Ethereum Gateway等知名厂商的RPC接口。本文使用MetaMask的原因在于作者对于MetaMask较为熟悉，并进行过MetaMask登陆设计项目实战。为了方便进行简单的UI布局，本项目使用了bulma作为UI框架。bulma由纯CSS构建，简单易学且具有很好的跨平台性。

注意本文不会详细介绍UI布局等内容，目标仅仅是构建一个简单的跨平台DApp。如果读者对UI布局的实现感到迷惑，请自行查看bulma文档

由于本项目的目标是构建一个DApp，所以本文没有传统的后端服务器，仅仅存在智能合约作为后端。本文将使用Foundry作为智能合约的编写和测试框架，使用openzeppelin作为代码的代理合约主依赖，使用solmate作为ERC20逻辑合约的主要依赖。使用EIP-1967中的Beacon架构以优化部署时的gas消费，同时也方便开发者后期对平台内所有用户的合约进行升级。

当然，本项目作为一个用于学习的项目，所有的智能合约均架构在Goerli Testnet中，这也是为数不多的会在以太坊合并后继续运行的测试网络。

项目准备

如果读者之前没有使用过pnpm，可以通过以下命令安装:

1	npm install -g pnpm

使用以下命令初始化Vue + Vite项目:

pnpm create vite LearnEther --template vue
cd LearnEther
pnpm install
pnpm install ethers
pnpm install bulma

通过上述命令，我们初始化了一个使用bulma和ethers的前端Vue项目，我们只准备使用这两个包作为主体依赖。

前端准备

本节主要介绍前端的初始化准备，包括基础UI、连结以太坊网络等内容。

UI准备

本项目主要使用灵活性非常高且具有跨平台性的tiles。读者可以自行前往Bulma Title查看相关文档。