基础前端使用web3 进行区块链项目开发

本文介绍了前端开发者如何使用web3.js与区块链节点通信,包括查询余额、构建合约并调用方法获取数据,以及区分合约方法的两种调用类型——查询与改变链上数据。还讲解了如何通过Metamask钱包进行交易操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

基础前端使用web3 进行区块链项目开发

这篇文章不会些区块链的机制算法等一切,只是对前端开发者,如何快速上手进行区块链项目开发做一个简单的引导。
阅读本文之前,需要了解一些简单的区块链知识,能回答以下四个问题就可以阅读本文了。
1、区块链是什么?
2、区块链节点是什么?
3、钱包是什么?
4、钱包如何使用?(普通用户层面的使用)
5、合约是什么?

传统开发的区别

传统项目与区块链项目的区别只有一点,数据通信对象不通,传统项目跟后端服务器通信,而区块链项目需要跟区块链的节点通信两者间的通信方式有所区别,其他地方都一样的,所以前端开发者进入区块链行业是比较容易的。

与节点通信

接下来我要介绍区块链项目如何与节点通信为了方便理解,我们需要提到一些传统的通信,作为对比,
1、链接节点
普通项目需要使用ajax来与服务器通信,通常是用axios来链接服务器

import axios from 'axios';

// 向给定ID的用户发起请求

axios.defaults.baseURL = 'http://127.0.0.1:3000/';

axios.get('/getBalance?address=0x02546eAcDe5BebACFB04b0351005c3d7d49E821D')
  .then( (res)=> {
   
    console.log(res);
  }) 

区块链项目需要使用web3.js来链接节点,

	安装		npm i web3

import Web3 from 'web3';

let web3 = await new Web3('https://bsc-dataseed1.ninicoin.io');
// 这个地址是随便找的,千万别往里面转钱
web3.eth.getBalance('0x02546eAcDe5BebACFB04b0351005c3d7d49E821D').then((res)=>{
    
    console.log(res);
})

这段代码链接了bsc链的一个节点,并查询了某个账户的原生币余额。
我们可以和axios做类比 先new了一个web3对象,需要指定一个节点地址,类似于axios指定baseURL。
然后调用eth下的getBalance查询原生币余额,类似axios指定路由,给定参数,然后得到返回值。
两者是不是很像呢?
有时间可以读读 web3.js的文档解锁跟多的web知识,但现在先跟我往下走。</

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值