基于 HTML 的 FundMe 项目开发【区块链前端开发】_区块链前端代码

作者：花生_TL007 | 2024-04-18 08:55:40

踩

区块链前端代码

文章目录

1 概述
2 项目结构和组件分析
3 项目的交互流程
- 3.1 运行 Foundry-FundMe 项目
- 3.2 运行 HTML-FundMe 项目
4 参考资料

1 概述

1.1 项目目的

HTML-FundMe 项目的目的是构建一个基于 FundMe 合约的筹款应用，允许用户通过智能合约向特定目的捐款，并由合约所有者提取资金。它展示了如何使用 HTML、JavaScript 和 ethers.js 与智能合约进行交互。

1.2 技术栈和工具

项目使用了 HTML 和 JavaScript 来构建前端界面，通过 ethers.js 与 Ethereum 区块链上的智能合约进行交互。此外，使用了 VSCode Live Server 插件来在本地环境下运行和调试项目。

1.3 主要成就和挑战

项目成功实现了合约交互的基本功能，包括连接钱包、捐款、查看总资金和提取资金等。在开发过程中，遇到了一些关于异步编程、交易监听和错误处理的挑战，通过研究文档和实践得到了解决。

1.4 本文目标

本总结旨在回顾项目的整个开发过程，总结所学习的技能和经验，并记录在开发过程中遇到的问题和解决方案。作为个人学习的记录，我希望通过这个过程加深对 Web3 开发的理解，并为将来的项目提供参考。

接下来，我们将展示该项目的实现过程和交互方式。

2 项目结构和组件分析

了解项目的结构，有助于我们站在更高的维度观察整个项目。为了获得项目结构，可以输入以下 tree 命令：

tree -I 'images|README.md'
1

从而获得项目的核心结构：

.
├── constants.js
├── ethers-5.7.esm.min.js
├── index.html
└── index.js

0 directories, 4 files
1
2
3
4
5
6
7

项目的核心文件有4个，可以分成以下三类：

结构文件：index.html, 它定义了项目的基本结构和界面。
依赖和配置文件：它包含了外部库（ethers-5.7.esm.min.js）和项目的常量配置（constants.js）。
逻辑文件：index.js，它定义了合约交互的逻辑实现。

我们将按照项目的结构顺序，介绍项目实现过程，并在之后介绍项目的交互过程。

2.1 结构文件分析

项目的结构文件 index.html，通过一系列的按钮和脚本的导入，构成了前端网页的结构。

它的核心代码如下：

<body>
	<button id="connectButton">连接钱包</button>
	<div id="contractInteractions" style="display: none;">
		<label for="ethAmount">决定捐助的 ETH 金额：</label>
		<input id="ethAmount" placeholder="0.1" />
		<button type="button" id="fundButton">捐助资金</button>
		<button id=1
2
3
4
5
6

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】