Web3区块链前端开发的那些事,2024学一下怎么使用Web3区块连开发吧

大家好,我是梦兽。一个Web全栈开发和Rust爱好者,如果想和我交流Web。关注梦兽编程公众号加入微信,一起探究前沿Web技术。

Web3 是互联网的未来,它带来了去中心化、透明和用户控制的新模式。学习Web3可以让你掌握前沿技术,参与搭建更加安全和公平的网络环境。通过区块链和智能合约,用户不再依赖中介,数据和资产的控制权完全在自己手中。Web3的应用领域广泛,包括去中心化金融(DeFi)、数字身份验证、NFT和去中心化应用(DApps)等。掌握这些技能不仅能提升你的技术水平,还能为你在这个快速发展的领域中创造更多职业机会。现在是学习Web3的最佳时机,抓住未来的无限可能。

今天我要给大家快速上手web3的工作流程。

Web3.js

Web3.js 是一个强大的 JavaScript 库,用于与以太坊区块链进行交互。我们将从安装开始,然后逐步构建一个简单的DApp(去中心化应用)来演示Web3.js的基本用法。

perl 复制代码
mkdir my-web3-app
cd my-web3-app
npm init -y
npm install web3

连接到以太坊网络

我们将使用 Infura 提供的免费节点服务。Infura 是一个提供以太坊和IPFS(星际文件系统)基础设施服务的平台。它为开发者提供了一个简单的API接口,帮助他们轻松地连接和使用以太坊区块链和IPFS网络[如Ropsten、Kovan、Rinkeby等],而无需运行自己的节点。 通过Infura,开发者可以进行各种以太坊相关的操作,例如发送交易、查询区块信息、与智能合约交互等。

首先,你需要在 Infura 注册一个账户并创建一个新的项目来获取你的API密钥。

ini 复制代码
const Web3 = require('web3');

// 使用Infura的Ropsten测试网络
const infuraUrl = 'https://ropsten.infura.io/v3/YOUR_INFURA_PROJECT_ID';
const web3 = new Web3(new Web3.providers.HttpProvider(infuraUrl));

web3.eth.net.isListening()
  .then(() => console.log('成功连接到以太坊网络'))
  .catch(e => console.log('连接失败:', e));

获取账户余额

javascript 复制代码
const address = 'YOUR_ETHEREUM_ADDRESS'; // 需替换为你自己的以太坊地址 Ropsten、Kovan、Rinkeby 这些节点的服务平台地址

web3.eth.getBalance(address, (err, wei) => {
  if (!err) {
    const balance = web3.utils.fromWei(wei, 'ether');
    console.log(`地址 ${address} 的余额为: ${balance} ETH`);
  } else {
    console.log('获取余额时出错:', err);
  }
});

部署和调用智能合约

什么是智能合约调用?

智能合约调用可以理解为与部署在区块链上的合约进行交互,通过调用其公开的方法来执行某些操作。这些操作可以是读取数据(无状态更改的查询)或修改数据(状态更改,如转账、更新记录等)。

在这一部分,我们将展示如何使用Web3.js来部署和调用智能合约。首先,我们需要一个简单的智能合约。我们将使用 Solidity 语言编写一个简单的存储合约。

创建一个名为 SimpleStorage.sol 的文件,并添加以下代码:

csharp 复制代码
// Solidity语言进群一起交流
pragma solidity ^0.5.0;

contract SimpleStorage {
    uint public storedData;

    function set(uint x) public {
        storedData = x;
    }

    function get() public view returns (uint) {
        return storedData;
    }
}

编译智能合约

npm install solc

编码编译文件代码

ini 复制代码
const solc = require('solc');
const fs = require('fs');

const source = fs.readFileSync('SimpleStorage.sol', 'utf8');
const input = {
  language: 'Solidity',
  sources: {
    'SimpleStorage.sol': {
      content: source,
    },
  },
  settings: {
    outputSelection: {
      '*': {
        '*': ['*'],
      },
    },
  },
};

const output = JSON.parse(solc.compile(JSON.stringify(input)));
const contract = output.contracts['SimpleStorage.sol'].SimpleStorage;

console.log('ABI:', contract.abi);
console.log('Bytecode:', contract.evm.bytecode.object);

部署智能合约

我们需要一个以太坊账户和一些ETH来支付部署费用。可以使用MetaMask生成账户并获取测试网络上的ETH。

ini 复制代码
const abi = contract.abi;
const bytecode = contract.evm.bytecode.object;

const deployContract = async () => {
  const accounts = await web3.eth.getAccounts();
  const result = await new web3.eth.Contract(abi)
    .deploy({ data: bytecode })
    .send({ from: accounts[0], gas: '1000000' });

  console.log('合约部署成功,地址:', result.options.address);
};

deployContract();

调用智能合约

最后,我们展示如何调用已经部署的智能合约。假设合约已经部署并且我们有合约地址:

javascript 复制代码
const contractAddress = 'YOUR_DEPLOYED_CONTRACT_ADDRESS'; // 需替换为实际的合约地址

const simpleStorage = new web3.eth.Contract(abi, contractAddress);

// 调用合约的get方法
simpleStorage.methods.get().call((err, result) => {
  if (!err) {
    console.log('合约存储的数据:', result);
  } else {
    console.log('调用合约时出错:', err);
  }
});

// 调用合约的set方法
const setData = async (value) => {
  const accounts = await web3.eth.getAccounts();
  await simpleStorage.methods.set(value).send({ from: accounts[0] });
  console.log(`成功设置存储数据为: ${value}`);
};

// 调用存储方法
setData(42);

以上代码展示了如何使用Web3.js连接到以太坊网络、获取账户余额、部署和调用智能合约。你可以根据需要进行调整和扩展。希望这对你有所帮助!

本文使用 markdown.com.cn 排版

相关推荐
懒大王爱吃狼37 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風5 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦6 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山7 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf9 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨9 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL9 小时前
npm入门教程1:npm简介
前端·npm·node.js