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

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

论文阅读【时空+大模型】ST-LLM（MDM2024）

论文阅读【时空+大模型】ST-LLM（MDM2024）

论文阅读【时空大模型】ST-LLM&#xff08;MDM2024&#xff09; 论文链接&#xff1a;Spatial-Temporal Large Language Model for Traffic Prediction 代码仓库&#xff1a;https://github.com/ChenxiLiu-HNU/ST-LLM 发表于MDM2024&#xff08;Mobile Data Management&#xf…
阅读更多...
回归损失和分类损失

回归损失和分类损失

回归损失和分类损失是机器学习模型训练过程中常用的两类损失函数&#xff0c;分别适用于回归任务和分类任务。 回归损失函数 回归任务的目标是预测一个连续值&#xff0c;因此回归损失函数衡量预测值与真实值之间的差异。常见的回归损失函数有&#xff1a; 均方误差&#xff…
阅读更多...
srs直播内网拉流带宽飙升问题记录

srs直播内网拉流带宽飙升问题记录

问题背景 srs部署在云服务器上&#xff0c;32核cpu&#xff0c;64G内存&#xff0c;带宽300M. 客户端从srs拉流&#xff0c;发现外网客户端拉流&#xff0c;cpu和带宽都正常。然而内网客户端拉流&#xff0c;拉流人数超过5人以上&#xff0c;带宽就会迅速飙升。 排查 用srs…
阅读更多...
Pandas数学函数大揭秘：让数据处理变得如此简单高效，轻松玩转数据分析新纪元！

Pandas数学函数大揭秘：让数据处理变得如此简单高效，轻松玩转数据分析新纪元！

1.导包 # 导包 import numpy as np import pandas as pd2.聚合函数 df pd.DataFrame(datanp.random.randint(0,100,size(5,3))) df01203550281552376231419335895434679917 # 列非空元素的数量 df.count()0 5 1 5 2 5 dtype: int64# 行非空元素的数量 df.count(ax…
阅读更多...
小白的OS Copilot 产品测评

小白的OS Copilot 产品测评

背景 通过群友介绍才知OS Copilot 。不想错过任何优秀的AI产品。随着互联网的发展和时代的进步&#xff0c;要紧跟时代&#xff0c;了解市面上的优秀的AI科技产品。 OS Copilot 产品体验评测 1&#xff09;您的角色是什么&#xff1f;开发、运维、学生&#xff1f;如果使用O…
阅读更多...
7.11日学习打卡----初学Redis（六）

7.11日学习打卡----初学Redis（六）

7.11日学习打卡 目录&#xff1a; 7.11日学习打卡一. redis事务事务的概念与ACID特性Redis事务三大特性Redis事务执行的三个阶段Redis事务基本操作 二. redis集群主从复制主从复制环境搭建主从复制原理剖析 哨兵监控哨兵监控环境搭建哨兵工作原理剖析 故障转移Cluster模式Clust…
阅读更多...
MES系统是如何进行工艺管理的

MES系统是如何进行工艺管理的

1. MES系统工艺管理 工艺管理是MES制造执行系统中至关重要的功能模块之一&#xff0c;它涉及到产品从设计到生产的整个工艺流程的规划、执行和优化。以下是对MES系统中工艺管理模块的详细介绍&#xff1a; 1.1 工艺流程设计 工艺流程设计是MES系统工艺管理的核心部分&#xf…
阅读更多...
PCI PTS 硬件安全模块（HSM）模块化安全要求 v5.0

PCI PTS 硬件安全模块（HSM）模块化安全要求 v5.0

符合条件的 PCI SSC 利益相关者在 30 天的意见征询 (RFC) 期间审查 PCI PTS 硬件安全模块 (HSM) 模块化安全要求 v5.0 草案并提供反馈。 PCI PTS 硬件安全模块(HSM)模块化安全要求 v5.0图 从 7 月 8 日到 8 月 8 日&#xff0c;邀请符合条件的 PCI SSC 利益相关者在 30 天的意见…
阅读更多...
使用getopt处理参数

使用getopt处理参数

文章目录 使用getopt处理参数1. shift 命令1.1 删除一个参数1.2 删除多个参数1.3 多次执行 shift 参数1.4 参数解析示例1.5 优化处理1.6 问题处理 2. getopt 命令2.1 常用参数及示例2.2 脚本参数优化示例2.3 参数校验 3. 示例展示4. eval 命令4.1 示例示例 1示例 2示例 3示例 4…
阅读更多...
“论软件维护方法及其应用”写作框架，软考高级论文，系统架构设计师论文

“论软件维护方法及其应用”写作框架，软考高级论文，系统架构设计师论文

论文真题 软件维护是指在软件交付使用后&#xff0c;直至软件被淘汰的整个时间范围内&#xff0c;为了改正错误或满足 新的需求而修改软件的活动。在软件系统运行过程中&#xff0c;软件需要维护的原因是多种多样的&#xff0c; 根据维护的原因不同&#xff0c;可以将软件维护…
阅读更多...
新火种AI|微软和苹果放弃OpenAI董事会观察员席位

新火种AI|微软和苹果放弃OpenAI董事会观察员席位

作者&#xff1a;一号 编辑&#xff1a;美美 微软苹果双双不做OpenAI“观察员”&#xff0c;OpenAI能更自由吗&#xff1f; 7月10消息&#xff0c;微软当地时间周一宣布将放弃在OpenAI董事会的观察员席位&#xff0c;他们称&#xff0c;OpenAI在过去八个月中取得了“重大进展…
阅读更多...
天润融通引领客服革新，AI大模型助力品牌服务升级

天润融通引领客服革新，AI大模型助力品牌服务升级

AI时代&#xff0c;消费零售品牌的客户服务应该怎么做&#xff1f; 如今消费者的关注点已经越来越复杂&#xff0c;一条毛巾&#xff0c;关注点就可以包括&#xff1a; 是否婴幼儿可用&#xff0c;是否儿童成人可用&#xff1b;是否可以直接接触皮肤&#xff1b;是否无甲醛、…
阅读更多...
初学SpringMVC之接收请求参数及数据回显

初学SpringMVC之接收请求参数及数据回显

pom.xml 文件导入 lombok 的依赖 <dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.34</version></dependency> Controller 表示这是一个控制器 RequestParam 表示从前端接收…
阅读更多...
14 - matlab m_map地学绘图工具基础函数 - 一些数据转换函数（一）

14 - matlab m_map地学绘图工具基础函数 - 一些数据转换函数（一）

14 - matlab m_map地学绘图工具基础函数 - 一些数据转换函数&#xff08;一&#xff09; 0. 引言1. 关于m_ll2xy和m_xy2ll2. 关于m_lldist3. 关于m_xydist4 关于m_fdist5 关于m_idist6. 总结 0. 引言 通过前面篇节已经将m_map绘图工具中大多绘图有关的函数进行过介绍&#xff0…
阅读更多...
axios使用sm2加密数据后请求参数多了双引号解决方法

axios使用sm2加密数据后请求参数多了双引号解决方法

axios使用sm2加密数据后请求参数多了双引号解决 背景问题描述解决过程 背景 因项目安全要求&#xff0c;需对传给后端的入参加密&#xff0c;将请求参数加密后再传给后端 前期将axios降低到1.6.7后解决了问题&#xff0c;但最近axios有漏洞&#xff0c;安全要求对版本升级&…
阅读更多...
three完全开源扩展案例02-跳动的音乐

three完全开源扩展案例02-跳动的音乐

更多案例尽在https://threelab.cn/ 演示地址 import * as THREE from "three"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";let mediaElement; let analyser; let scene; let camera; let renderer; let controls; …
阅读更多...
应力 (Stress) 是指单位面积上所承受的力

应力 (Stress) 是指单位面积上所承受的力

应力 (Stress) 是指单位面积上所承受的力 flyfish 轴向力 轴向力 (Axial Force) 是指沿着物体的纵轴施加的力。对于一根杆或柱子&#xff0c;轴向力可以是拉力或压力&#xff0c;具体取决于力的方向。 拉力 (Tensile Force)&#xff1a;使物体拉长的力。 压力 (Compressive…
阅读更多...
上班摸鱼吗？一文详解代码生成神器-Velocity

上班摸鱼吗？一文详解代码生成神器-Velocity

引言 “我不是在教你学坏，而是教你如何提高生产效率。” ----------- 牛顿 人类社会能够一直进步发展出现在的文明世界，最大的一个原因就是这个世界上懒人居多，懒人为了偷懒就需要提高生产效率，效率提高节省下来的时间才能创造出艺术、娱乐以及更高效率的科学技术。程序员…
阅读更多...
机器学习（五） -- 监督学习（7） --SVM2

机器学习（五） -- 监督学习（7） --SVM2

系列文章目录及链接 上篇&#xff1a;机器学习&#xff08;五&#xff09; -- 监督学习&#xff08;7&#xff09; --SVM1 下篇&#xff1a; 前言 tips&#xff1a;标题前有“***”的内容为补充内容&#xff0c;是给好奇心重的宝宝看的&#xff0c;可自行跳过。文章内容被“文…
阅读更多...
kubernetes集群如何更改所有节点IP

kubernetes集群如何更改所有节点IP

kubernetes集群如何更改所有节点IP 情景描述更换IP前的准备工作更换IP后的工作--master更换IP后的工作--node节点重新部署之前那些服务 情景描述 我有三台服务器&#xff0c;想要将其组成了一个kubernetes集群&#xff0c;在部署之前&#xff0c;我就对其进行了固定IP的操作&a…
阅读更多...
最新文章

Copyright @ 2022~2023