关于web3的介绍大家可以自己搜索相关的文章去了解，本文主要是记录作为一个小白，从0开始学习，到开发完成一个简易的仿opensea网站的历程。

由于这次项目使用的是以太坊的链，所以部分相关资料链接都是以太坊相关的网址，同时前端与区块链交互使用的是metamask插件，所以前端js调用智能合约时使用的是Ethers.js

1:web3开发与以往的网站开发有什么区别

作为一名网站开发人员，我们熟知的开发内容分为2个主要部分：由逻辑处理，数据读写构成的后端，与数据展示，操作交互构成的前端。如果接触过前后端分离开发，我们能简单的认为，后端将逻辑处理与数据读写封装起来，只提供给前端对应的接口。

web3与以往的这种模式相比，多了一个智能合约的部分，智能合约也可以进行逻辑处理与数据读写，但是数据读写的目标由我们自己的服务器换成了在区块链上。

2:关于web3的一些常识

以太坊账户的介绍

https://ethereum.org/zh/developers/docs/accounts/

想要与区块链进行交互，首先我们要有自己的账户，使用metamask我们可以轻松申请到一个免费账户，账户的钱包地址，密钥，助记词需要保存好。

手续费

https://ethereum.org/zh/developers/docs/gas/

上面的有提到，世界上所有人的账号使用的都是同一条区块链，所以区块链为了保证稳定性，每一次用户与区块链交互时都会收取一笔手续费。这笔手续费你愿意提供的越高，就会有更多的矿工愿意帮你更快将你这次的操作更内容提交到链上。

正式链与测试链

https://ethereum.org/zh/developers/docs/networks/

在开发中我们可能会经常试错来调试或者频繁的测试，每一次与区块链的交互都会触发手续费的消耗，钱包内的钱目前除了转赠之外，或者靠当矿工的奖励一点一点积攒。使用测试链可以使用官方提供的水龙头领取测试链的钱来进行各类开发的支持或测试的支持。

goerli水龙头地址

https://goerlifaucet.com/

3:智能合约开发

智能合约介绍

https://ethereum.org/zh/developers/docs/smart-contracts/

智能合约由我们编写好的逻辑处理，数据读写功能组成，发布到链上后，如果调用的合约方法涉及到数据写入或变更，则此次调用需要用户支付手续费，如果只是读取合约已存的数据，则不会触发手续费支付。合约常用的功能有eth转赠，token构筑，转移等。

学习开发智能合约

本次项目开发智能合约时选择使用的语言是solidity

solidity文档地址

https://learnblockchain.cn/docs/solidity/

简单的单文件合约可以直接粘贴到REMIX上检查是否有错误及发布与测试

https://remix.ethereum.org/#optimize=false&runs=200&evmVersion=null&version=soljson-v0.8.7+commit.e28d00a7.js

本次项目的智能合约涉及到token构筑，转移，以及复杂的eth转赠金额计算，所以在了解如何使用solidity开发后，选择使用openzeppelin框架进行开发，使用框架的好处就是框架帮我们封装了很多要用到的功能，使开发更便捷。

openzeppelin文档地址

https://docs.openzeppelin.com/contracts/4.x/

下面为搭建一个智能合约框架的操作步骤：

新建一个项目文件夹

npm init -y

npm install --save-dev hardhat

npx hardhat

-Create a JavaScript project

npm install --save-dev @nomicfoundation/hardhat-toolbox

npm install --save-dev @openzeppelin/contracts

npm install --save-dev @openzeppelin/contracts-upgradeable

npm install --save-dev @openzeppelin/hardhat-upgrades

npm install --save-dev @nomiclabs/hardhat-ethers

npm install --save-dev @nomiclabs/hardhat-etherscan

npm install --save-dev chai

npm install --save-dev @openzeppelin/test-helpers

Vi hardhat.config.js

require("@nomiclabs/hardhat-ethers");

require("@openzeppelin/hardhat-upgrades");

require("@nomiclabs/hardhat-etherscan");

之后我们就可以在contracts目录下创建自己的合约文件了，例如：Demo.sol，需要使用框架封装的类时使用import引用就可以了。

编译

完成合约文件的编写后，执行npx hardhat compile进行编译，此编译过程会检查代码的基础错误，成功后在scripts目录下创建该合约对应的Demo.deploy.js，该文件可参考框架搭建时自动生成的deploy.js，替换const CONTRACT = await hre.ethers.getContractFactory("Demo");

部署

在部署前，我们还需要编辑hardhat.config.js

networks里主要设置我们要发的区块链的网络，如图我是要部署到goerli测试链上，accounts里填写你要发布合约的钱包私钥，因为部署合约要收取手续费，请确保该钱包有足够的余额。url是通过alchemy注册账号来获取的，复制HTTPS内的KEY粘贴到url里。

https://www.alchemy.com/?a=goerli_faucet

接下来的etherscan apiKey goerli，可以在以太坊交易所注册账户创建一个免费的专属KEY

由于网络问题可能会导致发布失败，所以我在此文件的后面加上了代理配置，可以根据自己代理端口进行修改。

npx hardhat run scripts/Demo.deploy.js --network goerli

运行该指令即可将智能合约发布到链上，如果失败会有具体的报错信息，一般要么是网络问题，要么是钱包余额不够支付手续费。成功后会返回该合约在链上的地址信息。

4:合约调用

ethers.js文档

https://learnblockchain.cn/ethers_v5/

加载ethers.js组件

合约发布后，我们可以通过合约的地址去交易所查看详细内容，例如交易记录，token交易记录，合约源代码（需对此合约认证开发者）等。

在前端js调用过程中，我们主要要使用到合约的地址与ABI，建议将此写到前端页面上，方便直接使用。以下内容为常用的一些ethers.js的方法。

获取当前以太币转美元的汇率（ethApiKey为上面自己注册的以太坊交易所KEY）

触发当前metamask登陆的用户授权网站连接，同意即可获得登陆者相关信息，常用于第三方登陆。

获取指定钱包地址的余额

当前用户调取智能合约的某个方法，不涉及金额的发送。（nftContractAddress为合约地址，nftContractAbi为合约的ABI，listingId为此实例合约必要接收的参数）

当前用户调取智能合约的某个方法，并包含金额的发送。（value: ethers.utils.parseEther(price.toString())此为要发送的eth的金额数，catch内的res.error.code ==='-32000'为当前用户的金额不足支付金额及手续费时的返回状态）

本次智能合约的个人开发总结个人认为还不够细致，因为有些问题没法记录在此处，毕竟项目场景不一样，遇到的问题也不可能一致。我只能将大致的流程与一些需要注意的点写下来，实际在开发中作为小白在sol文件的编写会遇到更多的疑问，智能依靠各类搜索引擎来完善自身的代码，但一定要清楚自己的功能逻辑，确保合约没有明显的漏洞。