Frontend and Backend | 基于AIGC的区块链游戏

📄️ 技术栈简介

本项目前端的开发需要用到的技术栈包括 Next.js、Tailwindcss、Wagmi / Viem 和 RainbowKit，下面对这几个工具分别进行简单介绍。

功能设计

通过本小节的学习，你将能够使用 next.js 框架构建一个简单的前端。

作为一个去中心化应用（Decentralized APP，DAPP），最基本的功能当然是能连接到区块链网络并能够进行网络交互，本小节将教授如何使用 RainbowKit 连接到区块链网络。

在上一小节中，我们学习了如何通过 RainbowKit 连接到区块链网络，在本小节中，我们将继续利用 RainbowKit 编写签名登录。

着陆页（Landing Page）是用户登录一个网站之后看到的第一页，决定着用户对网站的第一印象，因此，我们要认真的编写这一页面。为了使页面更有趣味，我们会为主页添加动画效果，我们采用gsap库来实现动画效果。

在本小节中，我们将开始正式编写代码进行链上交互。

在本小节中，我们将完成宠物蛋铸造页面的编写。

个人主页应包含个人信息、拥有的iCat、egg和物品。我们会对这几个部分分别编写 components 然后引用进同一个页面。

在本小节中，我们会将上一小节中编写的个人主页的组件放进个人主页的页面中。

他人主页页面在加载过程中会根据 url 中的参数 nick_name 来获取用户的 profile，如果不存在的话则渲染NotFound组件。

个人信息在最开始被初始化为随机信息，如果想更改的话需要一个页面来设置。

iCat 详情页用于展示宠物猫的详细信息以及用户交互功能。

非常高兴你坚持学完了本教程，学完了本教程的你，已经是一名合格的 DAPP 开发人员啦！