Launchpad教程之前端框架和结构搭建

1 这篇文章你会学到
2 你需要了解以下相关技术
3 Launchpad前端架构选型
4 Launchpad整体架构搭建
5 连接区块链钱包

Unicrypt和Pinksale是两个出名的Launchpad平台，在平台上你可以Mint自己的token，还有crypto中需要用的一些工具，这些平台也都有提供。接下来，我会从零开始写前端和Solidit合约教大家，如何搭建一个自己的Launchpad平台，主要参考Pinksale的界面和相关功能。

这篇文章你会学到

Launchpad前端架构选型
Launchpad整体架构搭建
怎样连接区块链钱包

你需要了解以下相关技术

Launchpad前端架构选型

前端框架我直接选用的是vue2，因为我比较熟悉，如果你对其他如React或Vue3感兴趣，在看过我的教程后你可以自己重构成自己的想要的框架。

因为我们教程主要仿的是Pinksale，分析它的整体页面结构如下：

可以看到总共分为三块

上方header–连接钱包和显示当前链功能
左边aside–菜单功能选型
中间content–主要功能页面

结构功能基本类似于一些admin管理框架，我选用了vue-prev-admin来作为我们的前端基本脚手架。

Launchpad整体架构搭建

下面是脚手架基本目录结构

api：因为我们后面是和合约交互，所以不需要用到
assets：用来放图片，js，css等一些资源
components：放置组件
i18n:我做了多语言配置
layout：全局布局组件
router:路由菜单等相关配置
store：放置一些全局参数，如用户钱包地址，用户余额等
theme：全局的一些css配置
utils：一些功能js，合约的abi等
views：编写页面

根据pinksale整体的页面结构，在相关vue页面中将主要元素加上，编写页面就不详细写了，到时候自己看相关代码就清楚了，这是我仿照写出的页面如下：

连接区块链钱包

Launchpad属于Dapp，Dapp最重要的一步就是连接区块链钱包，网上有很多教程，不过我还是带大家走一遍。

先熟悉下相关api:

1.判断浏览器是否支持钱包连接

export function isMetaMaskProvider() {
  return Boolean(window.ethereum)
}

2.连接钱包

await window.ethereum.enable()
let provider = new ethers.providers.Web3Provider(
              window.ethereum,
              'any'
            )

3.获取钱包地址相关信息

 let signer = provider.getSigner()
 web3.userAddress = await signer.getAddress() //获取用户钱包地址
 let balance = await provider.getBalance(web3.userAddress)//获取钱包eth余额
 web3.userBalance = ethers.utils.formatEther(balance)
 web3.network = await provider.getNetwork() //获取连接钱包区块信息

4.监听（metamask建议钱包切换或网络切换时，都刷新页面）

export function listeningMetaMaskChange() {
  // 钱包地址切换事件
  window.ethereum.on('accountsChanged', _ => window.location.reload())
 //区块链网络更改事件
  window.ethereum.on('chainChanged', _ => window.location.reload())
}

以上就是我们连接钱包和切换钱包时，需要用到的几个重要函数和代码，安装好钱包，点击右上角Connect连接效果如下：