从0到1实现一个Dapp全栈项目FairTicket✨（4）Next前端开发

type

status

date

slug

summary

项目初始化

创建一个前端项目fair-ticket-be-tutorial。我们需要先引入对应的依赖。

运行 pnpm run dev 或者 npm run dev 运行项目（取决于你用的包管理工具），并访问默认的 http://localhost:3000 即可看到 Nextjs 的默认页面。

wallet相关配置

前往 wagmi官网了解更多。

新建文件 wallet.config.ts 在项目根路径下。

创建 src/components/WalletProvider.tsx 文件，写入以下代码，创建一个WalletProvider客户端组件，供后续layout使用。

图片设置

我们会使用 Picsum 这个网站来作为我们的随机的项目图片。在根目录下的 next.config.ts 的文件中，新增图片站相关信息。这个配置允许我们可以访问指定的远程主机的图片。

连接钱包

如果你还没有安装 Metamask 钱包插件，那么请先安装，这里不过多赘述。

我们接下来使用钱包连接到我们本地的 anvil 网络。

先创建一个自定义网络。

并且使用私钥导入 5 个钱包作为测试账号。

这5个钱包就是我们本地 anvil 启动的时候，控制台显示的前 5 个账号。

我们将 anvil-0 账号作为项目创建者，anvil-1～ anvil-4 作项目的为参与者。

创建好钱包后，你就可以通过我们页面上的连接钱包按钮进行连接了。🎉

主页

我们在这先把代码都贴出来，随后我们给出预览图。

src/app/layout.tsx

这个文件存放根布局。可以看到，我们在这里引入了WalletProvider 和Navbar 组件。其中Navbar 组件我们还没创建。

现在，我们创建在src/components/目录下创建 Navbar.tsx 文件。设置一个置顶的导航栏，为了方便跳转，以及连接钱包。

src/app/page.tsx

page.tsx 是 src/app/layout.tsx 的main 区域的内容。因此，这里相当于我们的官网页面。

其实官网的页面主体没什么内容，只是样式，以及一个跳转按钮。基本上属于是粘贴过去就不用看了的文件。

完成之后，页面显示如下！🎉

Project相关页面

接下来，我们来编写Project 相关页面，其中包含了对后端的api调用。项目相关的内容很多，包含如下功能：

页面展示

创建项目

更改项目状态

参与项目

分为几个子组件，他们之间的关系如下：

ProjectList 组件，用于展示列表。列表下方有一个CreateProjectDialogForm 的按钮组件，会弹出一个表单，进行创建项目。

列表中的每个项是一个单独的ProjectCard 组件。

点击ProjectCard 组件，会进入到项目的详细页面。详细页面下方还有一个 ParticipateProjectDialogForm 的按钮组件，弹出一个表单，供用户参与该项目。

以上列出的基本就是功能列表了。我们将自顶向下地贴出每个页面的代码。注意代码对应的文件所在位置。

project 相关所有页面的文件树如下：

src/types/project.ts

定义项目的类型接口。

src/app/project/page.tsx

项目列表组件

src/app/project/components/CreateProjectFormDialog.tsx

创建项目组件 CreateProjectFormDialog 。生效位置是项目列表的下方。

src/app/project/components/ProjectList.tsx

项目列表组件 ProjectList。

src/app/project/components/ProjectCard.tsx

项目卡片组件。是项目列表的每个项。

src/app/project/[id]/page.tsx

项目详情页组件。

src/app/project/components/ProjectDetail.tsx

src/app/project/components/ParticipateFormDialog.tsx

用户参与项目的按钮组件。

src/app/project/components/ProjectActionDialog.tsx

项目拥有者

Participate相关页面

Participate相关页面就非常简单，功能只有一个，那就是查看自己参与过的项目，以及项目详情。

Participate相关文件树

src/types/participant.ts

src/app/participated/page.tsx

src/app/participated/components/ParticipationList.tsx

这个组件显示该钱包用户参与过的项目列表，以卡片列表展示

src/app/participated/components/ParticipateCard.tsx

src/app/participated/[id]/page.tsx

点击参与信息列表卡片，带上id，跳转到这个页面。