6-5，web3浏览器链接区块链（react+区块链实战）

news2024/9/28 21:29:40

6-5，web3浏览器链接区块链（react+区块链实战）

  • 6-5 web3浏览器链接区块链（调用读写合约与metamask联动）

6-5 web3浏览器链接区块链（调用读写合约与metamask联动）

这里就是浏览器端和智能合约的交互

两个库

Web3
Truffle contract //truffle在链接前端合约简单包了一层，比较好用

来到react项目的根目录下（在第一章进行了创建），
在这里插入图片描述

这里重新创建一个react项目
https://blog.csdn.net/u012118993/article/details/87288516
react创建新项目 使用creat-react-app快速新建一个react项目

（1）npm install -g create-react-app 全局安装（安装到整体）

（2）create-react-app reactproject 新建并对react项目进行命名（注:项目名称不能有大写）

（3）cd reactproject 通过命令进入文件夹内部，准备运行项目

（4）npm start 运行项目

E:\truffle\woniu-pet-shop

在truffle目录下创建
在这里插入图片描述

在react的项目下安装下面的文件
安装web3（安装到文件夹下面）

npm install web3 --save

在这里插入图片描述

再安装truffle-contract

npm install truffle-contract --save

Demo完成

1.链接合约
2.执行一下合约内部函数
3.添加ant.design ui库支持
4.完成项目

在这里插入图片描述

注意新的
在这里插入图片描述

App.js中的内容
如下

import React from 'react'
import Web3 from 'web3'
import TruffleContract from 'truffle-contract'
import AdoptionJson from './truffle/build/contracts/Adoption.json'	//引入前面智能合约编译好得到的json文件





class App extends React.Component{
	constructor(props){
		super(props)
		this.web3 = null
		this.Adoption = null
		this.init()

		this.state = {
			//name:'woniu'
		}
	}

	init(){
		//如果网页中的web3不是undefined
		if(typeof window.web3 != 'undefined'){
		}
	}

	render(){
		return <button></button>//hello,{this.state.name}
	}
}

export default App

在这里插入图片描述

如果浏览器中装入了metamask插件

在浏览器中全局变量就有值
在这里插入图片描述

可以手动链接metamask，也可以自动连接
在这里插入图片描述

进行脚本启动，之前web3在浏览器控制台undefined是因为空网页，此时

在react项目自建的petshop中启动

Npm start

在浏览器打开
http://localhost:3000/

视频效果
在这里插入图片描述

视频安装新的包
在这里插入图片描述
在这里插入图片描述

自己的有报错，原因init函数没有保存

在这里插入图片描述

实际成功后如下效果
在这里插入图片描述

在这里插入图片描述

新加入

init(){
		//如果网页中的web3不是undefined
		if(typeof window.web3 != 'undefined'){
			this.web3Provider = window.web3.currentProvider;	//metamask内置了web3的实例，实际可以手动链接
		}else{
			alert('请按照metamask')
		}
	}

更改代码保存后，再次访问网络，无需关闭重新npm start

此时刷新一下
当然这时无弹窗，将metamask钱包删掉之后就有弹窗

这时使用chrome没有钱包的浏览器访问
在这里插入图片描述

有弹窗出现，但是有些乱码了

又加入代码

在这里插入图片描述

所有代码如下

import React from 'react'
import Web3 from 'web3'
import TruffleContract from 'truffle-contract'
import AdoptionJson from './truffle/build/contracts/Adoption.json'	//引入前面智能合约编译好得到的json文件

//1.链接合约
//2.执行一下合约内部函数
//3.添加ant.design ui库支持
//4.完成项目
class App extends React.Component{
	constructor(props){
		super(props)
		this.web3 = null
		this.Adoption = null
		this.init()

		this.state = {
			//name:'woniu'
		}
	}

	init(){
		//如果网页中的web3不是undefined
		if(typeof window.web3 != 'undefined'){
			this.web3Provider = window.web3.currentProvider;	//metamask内置了web3的实例，实际可以手动链接
		}else{
			alert('please install metamask')
		}
		
		this.web3 = new Web3(this.web3Provider)		//将我们的this.web3Provider装载进来
		this.initAdoption()

	}

	initAdoption(){
		this.Adoption = TruffleContract(AdoptionJson)	//使用TruffleContract传入编译后的合约，然后创建实例，可以调用合约内部函数
		this.Adoption.setProvider(this.web3Provider)	//设置来源，链接合约
		return this.markAdopted()
	}
	
	//部署，这个是异步的，使用this.Adoption.deployed().then()也可以，这里用
	//this.markAdopted(){
		//部署链接一下
	//	const adoptionInstance = this.Adoption.deployed().then()	

	//}

	async markAdopted(){
		//部署链接一下
		//await同步方式获取异步数据
		const adoptionInstance = await this.Adoption.deployed()	//部署，这个是异步的，使用this.Adoption.deployed().then()也可以，这里用
		//调用合约内部函数getAdopters
		const adopters = await adoptionInstance.getAdopters.call()
		console.log(adopters)
	}

	render(){
		return <button></button>//hello,{this.state.name}
	}
}

export default App

刷新界面如下
在这里插入图片描述

获取到合约的address了
在这里插入图片描述

使用上方的变量可以获取本地的地址及metamask的默认账号地址了
在这里插入图片描述

https://blog.csdn.net/weixin_41937552/article/details/106990561?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-1&spm=1001.2101.3001.4242

这里无法获得metamask的地址的原因如上
https://blog.csdn.net/weixin_39421014/article/details/103323245

可以先把metamask的隐私权限关闭
https://www.freesion.com/article/8518937500/
隐私模式的设置与兼容JS代码
在这里插入图片描述

https://blog.csdn.net/JackieDYH/article/details/115380677?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242
获取账户信息

经过代码的修改后在初始化的函数部分修改，

可以使用metamask链接网站了，并且能够打印出当前的metamask地址
在这里插入图片描述

接下来进行点击事件的代码更改
在这里插入图片描述

此处点击领养会弹出框用来支付的，因为要调用写入函数，写到链上的，此处的领养不用转钱但需要父手续费

本地成功调用需要写入区块链的函数（当点击按钮时如下）
在这里插入图片描述

最终成功运行的所有的代码如下：

import React from 'react'
import Web3 from 'web3'
import TruffleContract from 'truffle-contract'
import AdoptionJson from './truffle/build/contracts/Adoption.json'	//引入前面智能合约编译好得到的json文件

//1.链接合约
//2.执行一下合约内部函数
//3.添加ant.design ui库支持
//4.完成项目
class App extends React.Component{
	constructor(props){
		super(props)
		this.web3 = null
		this.Adoption = null
		this.init()

		this.state = {
			//name:'woniu'
		}
	}

	async init(){
		//如果网页中的web3不是undefined
		//if(typeof window.web3 != 'undefined'){
		//	this.web3Provider = window.web3.currentProvider;	//metamask内置了web3的实例，实际可以手动链接
		//}else{
		//	alert('please install metamask')
		//}
		
		//this.web3 = new Web3(this.web3Provider)		//将我们的this.web3Provider装载进来
		//this.initAdoption()
		
		/* 新版的方式 */
	  //var web3Provider;
	  if (window.ethereum) {
		this.web3Provider = window.ethereum;
		try {
		  // 请求用户授权
		  await window.ethereum.enable();
		} catch (error) {
		  // 用户不授权时
		  console.error("User denied account access")
		}
	  } else if (window.web3) {   // 老版 MetaMask Legacy dapp browsers...
		this.web3Provider = window.web3.currentProvider;
	  } else {
		this.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
	  }
	  this.web3 = new Web3(this.web3Provider);//web3js就是你需要的web3实例
	  

	  this.web3.eth.getAccounts(function (error, result) {
		if (!error)
		  console.log(result)//授权成功后result能正常获取到账号了
		  //this.account = result
	  });
	  //this.account =result
	  //this.account =account
	  this.initAdoption()
	}

	initAdoption(){
		this.Adoption = TruffleContract(AdoptionJson)	//使用TruffleContract传入编译后的合约，然后创建实例，可以调用合约内部函数
		this.Adoption.setProvider(this.web3Provider)	//设置来源，链接合约
		return this.markAdopted()
	}
	
	//部署，这个是异步的，使用this.Adoption.deployed().then()也可以，这里用
	//this.markAdopted(){
		//部署链接一下
	//	const adoptionInstance = this.Adoption.deployed().then()	

	//}

	async markAdopted(){
		//部署链接一下
		//await同步方式获取异步数据
		const adoptionInstance = await this.Adoption.deployed()	//部署，这个是异步的，使用this.Adoption.deployed().then()也可以，这里用
		//调用合约内部函数getAdopters
		const adopters = await adoptionInstance.getAdopters.call()
		console.log(adopters)
	}
	
	async adopt(petId){
		//const account = window.web3.eth.defaultAccount		//获取metamask中默认的账户
		// 授权获取账户
	    const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
        const myAccount = accounts[0];	//获取当前metamask的地址

		const adoptionInstance = await this.Adoption.deployed()		//再次进行部署
		await adoptionInstance.adopt(petId,{from:myAccount})	//调用adopt只传递唯一一个参数，以及来源之前获取的地址，进行写入函数
		this.markAdopted()
	}

	render(){
		//onclick点击事件，调用领养函数
		return <button onClick={()=>this.adopt(2)}>领养第二个</button>//hello,{this.state.name}
	}
}

export default App

已经成功执行所有的函数，读取写入函数

此代码还有一些缺陷，若交易失败会报错，页面也会报错，
点击拒绝，或者直接退出时
在这里插入图片描述

在这里插入图片描述

接下来就是美化ui

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1919596.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

语言模型演进：从NLP到LLM的跨越之旅

语言模型演进：从NLP到LLM的跨越之旅

在人工智能的浩瀚宇宙中&#xff0c;自然语言处理&#xff08;NLP&#xff09;一直是一个充满挑战和机遇的领域。随着技术的发展&#xff0c;我们见证了从传统规则到统计机器学习&#xff0c;再到深度学习和预训练模型的演进。如今&#xff0c;我们站在了大型语言模型&#xff…
阅读更多...
【最经典的79个】软件测试面试题（内含答案）提前备战“金九银十”

【最经典的79个】软件测试面试题（内含答案）提前备战“金九银十”

001.软件的生命周期(prdctrm) 计划阶段(planning)-〉需求分析(requirement)-〉设计阶段(design)-〉编码(coding)->测试(testing)->运行与维护(running maintrnacne) 测试用例 用例编号 测试项目 测试标题 重要级别 预置条件 输入数据 执行步骤 预期结果 0002.问&…
阅读更多...
ctfshow-web入门-文件上传（web166、web167）（web168-web170）免杀绕过

ctfshow-web入门-文件上传（web166、web167）（web168-web170）免杀绕过

目录 1、web166 2、web167 3、web168 4、web169 5、web170 1、web166 查看源码&#xff0c;前端只让传 zip 上传 zip 成功后可以进行下载 随便搞一个压缩包&#xff0c;使用记事本编辑&#xff0c;在其内容里插入一句话木马&#xff1a; 上传该压缩包&#xff0c;上传成功…
阅读更多...
LLM独角兽们就要活不下去了！C.AI被资本抛弃，核心员工跑路；Perplexity陷入传统媒体口水战；微软发明的新型收购方式靠谱么？| ShowMeAI日报

LLM独角兽们就要活不下去了！C.AI被资本抛弃，核心员工跑路；Perplexity陷入传统媒体口水战；微软发明的新型收购方式靠谱么？| ShowMeAI日报

&#x1f440;日报&周刊合集 | &#x1f3a1;ShowMeAI官网 | &#x1f9e1; 点赞关注评论拜托啦&#xff01; 1. 亚马逊「招聘式收购」Adept AI&#xff0c;始作俑者微软正在被联邦「反垄断」调查 Adept AI 官网 → https://www.adept.ai Adept AI 成立于2022年4月&#xf…
阅读更多...
分享一个 .NET 通过监听器拦截 EF 消息写日志的详细例子

分享一个 .NET 通过监听器拦截 EF 消息写日志的详细例子

前言 EF 开发效率确实很高也很便捷&#xff0c;但当它发生错误时&#xff0c;也挺让人头疼的&#xff0c;为什么&#xff1f;因为 EF 就像是一个黑盒子&#xff0c;一切全被封装起来&#xff0c;出错的时候很难定位原因&#xff0c;如果能够知道并打印 EF 生成的 SQL 语句&…
阅读更多...
历年HW已公开漏洞合集！（目前漏洞库更新至84个，Goby持续更新...）

历年HW已公开漏洞合集！（目前漏洞库更新至84个，Goby持续更新...）

截至2024年7月11日&#xff0c;Goby红队版已扩充以下历年HW已公开漏洞库&#xff0c;本次更新84个&#xff1a; &#xff08;后续将持续更新…) 华天动力OA 华天动力 OA getHtmlContent 文件读取漏洞华天动力OA办公系统 /OAapp/bfapp/buffalo/TemplateService 文件读取漏洞华…
阅读更多...
中国各省养老机构数据明细（更新至2024年）

中国各省养老机构数据明细（更新至2024年）

中国养老机构是指为老年人提供集中居住、生活照顾、健康管理、文化娱乐等综合性服务的设施。这些机构包括养老院、福利院、老年公寓等多种形态&#xff0c;既有公立也有民办&#xff0c;遍布城市与农村。 一、数据介绍 数据名称&#xff1a;中国养老机构数据明细 数据范围&am…
阅读更多...
【C++】使用C++实现基于Socket的通信

【C++】使用C++实现基于Socket的通信

在本文中&#xff0c;我们将详细讨论如何使用C实现基于Socket的通信&#xff0c;并设计一个TLV&#xff08;Type-Length-Value&#xff09;协议用于数据交互。TLV协议因其灵活性和可扩展性&#xff0c;在多种通信协议中被广泛使用&#xff0c;特别是在需要动态定义数据结构的场…
阅读更多...
软件架构之嵌入式系统设计

软件架构之嵌入式系统设计

软件架构之嵌入式系统设计 第 12 章&#xff1a;嵌入式系统设计12.1 嵌入式系统概论12.2 嵌入式系统的组成12.2.1 硬件架构12.2.2 软件架构 12.3 嵌入式开发平台与调试环境12.3.1 嵌入式系统软件开发平台12.3.2 嵌入式开发调试 第 12 章&#xff1a;嵌入式系统设计 随着计算机…
阅读更多...
# Redis 入门到精通（一）数据类型（3）

# Redis 入门到精通（一）数据类型（3）

Redis 入门到精通&#xff08;一&#xff09;数据类型&#xff08;3&#xff09; 一、redis 数据类型–set 类型介绍与基本操作 1、set 类型 新的存储需求: 存储大量的数据&#xff0c;在查询方面提供更高的效率。需要的存储结构: 能够保存大量的数据&#xff0c;高效的内部…
阅读更多...
MybatisPlus 核心功能

MybatisPlus 核心功能

MybatisPlus 核心功能 文章目录 MybatisPlus 核心功能1. 条件构造器1.1 QueryWrapper1.2 LambdaQueryWrapper&#xff08;推荐&#xff09;1.3 UpdateWrapper1.4 LambdaUpdateWrapper 2. 自定义SQL3. Service接口 1. 条件构造器 当涉及到查询或修改语句时&#xff0c;MybatisP…
阅读更多...
【C++】C++商店销售管理系统（源码+论文）【独一无二】

【C++】C++商店销售管理系统（源码+论文）【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…
阅读更多...
【C++】C++-机房收费管理系统（源码+注释）【独一无二】

【C++】C++-机房收费管理系统（源码+注释）【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…
阅读更多...
【深度学习入门篇 ④ 】Pytorch实现手写数字识别

【深度学习入门篇 ④ 】Pytorch实现手写数字识别

【&#x1f34a;易编橙&#xff1a;一个帮助编程小伙伴少走弯路的终身成长社群&#x1f34a;】 大家好&#xff0c;我是小森( &#xfe61;ˆoˆ&#xfe61; ) &#xff01; 易编橙终身成长社群创始团队嘉宾&#xff0c;橙似锦计划领衔成员、阿里云专家博主、腾讯云内容共创官…
阅读更多...
项目中日志采集实践：技术、工具与最佳实践

项目中日志采集实践：技术、工具与最佳实践

✨✨谢谢大家捧场&#xff0c;祝屏幕前的小伙伴们每天都有好运相伴左右&#xff0c;一定要天天开心哦&#xff01;✨✨ &#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; 目录 引言 一. 选择合适的日志框架 二. 配置日志框架 三. 使用…
阅读更多...
既要“性价比”，又要“品价比”，零跑何以成为新能源“卷王”？

既要“性价比”，又要“品价比”，零跑何以成为新能源“卷王”？

从前&#xff0c;“汽车界小米”“品价比”是围绕在零跑汽车周围的关键词。而在零跑C16上市发布会上&#xff0c;零跑汽车创始人朱江明又提出了“车圈优衣库”的概念&#xff0c;“我希望零跑在汽车行业的定位&#xff0c;就像优衣库在服装行业一样&#xff0c;追求品价比&…
阅读更多...
看番工具 -- oneAnime v1.2.5绿色版

看番工具 -- oneAnime v1.2.5绿色版

软件简介 OneAnime是一款专为动漫爱好者设计的应用程序&#xff0c;它提供了一个庞大的动漫资源库&#xff0c;用户可以在这里找到各种类型的动漫&#xff0c;包括热门的、经典的、新番的等等。OneAnime的界面设计简洁明了&#xff0c;操作方便&#xff0c;用户可以轻松地搜索…
阅读更多...
智能小车——初步想法

智能小车——初步想法

需要参考轮趣的智能小车自己搭建一台智能机器人&#xff0c;这里从底层控制开始逐步搭建。 控制模式 之后要自行搭建智能小车&#xff0c;所以将轮趣的底盘代码进行学习&#xff0c;根据开发手册先大致过一遍需要的内容。 有做很多个控制方法&#xff0c;包括了手柄、串口、…
阅读更多...
选择TPM管理咨询公司时需要考虑哪些因素？

选择TPM管理咨询公司时需要考虑哪些因素？

在选择TPM&#xff08;全面生产维护&#xff09;管理咨询公司时&#xff0c;企业通常需要经过深思熟虑的过程&#xff0c;以确保所选择的咨询公司能够真正帮助企业实现生产效率和设备可靠性的提升。以下是在选择TPM管理咨询公司时需要考虑的关键因素&#xff1a; 一、行业经验和…
阅读更多...
【Linux】Windows平台使用gdb调试FFmpeg源码

【Linux】Windows平台使用gdb调试FFmpeg源码

FFmpeg是一个跨平台的多媒体库&#xff0c;有时需要在别的平台上进行开发和调试&#xff0c;记录一下在linux环境下使用gdb来调试FFmpeg源码的基本方式 1.可执行文件 在windows平台使用linux环境来调试FFmpeg源码&#xff0c;需要编译生成一个后缀有_g的exe文件&#xff0c;参…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023