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 = nullthis.Adoption = nullthis.init()this.state = {//name:'woniu'}}init(){//如果网页中的web3不是undefinedif(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不是undefinedif(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 = nullthis.Adoption = nullthis.init()this.state = {//name:'woniu'}}init(){//如果网页中的web3不是undefinedif(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()也可以,这里用//调用合约内部函数getAdoptersconst 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 = nullthis.Adoption = nullthis.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 =accountthis.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()也可以,这里用//调用合约内部函数getAdoptersconst 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.mzph.cn/pingmian/45121.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

高职Web全栈式开发实训室解决方案

一、专业背景 随着网络普及和发展&#xff0c;网站作为一种很强大的工具和平台愈来愈融入了人们的生活&#xff0c;而与用户关系最密切的前端技术也逐渐获得应有的重视。咱们能够看到前端重构的行业发展潜力巨大&#xff0c;各大知名的网络公司对前端人才的求饥若渴。近年来HT…

DID差分模型案例集(传统DID、队列DID、渐近DID、空间DID、PSM-DID)

双重差分&#xff08;DID&#xff09;模型是一种广泛应用于经济学、社会学等领域的统计方法&#xff0c;主要用于评估政策或事件的因果效应。以下是DID模型几个重要变体的简要介绍&#xff1a; 1、传统DID&#xff08;Traditional DID&#xff09;&#xff1a;这是DID模型的基…

【Qt 从基础】创建一个 Qt 项目后,自动生成的代码和文件分析

文章目录 1. Sources 目录下&#xff0c;main.cpp 文件的分析&#x1f427;2. Headers 目录下&#xff0c;widget.h 文件的分析&#x1f427;3. Sources 目录下&#xff0c;widget.cpp 文件的分析&#x1f427;4. Forms 目录下&#xff0c;widget.ui 文件的分析&#x1f427;5.…

Perl词法作用域:自定义编程环境的构建术

&#x1f3ad; Perl词法作用域&#xff1a;自定义编程环境的构建术 在Perl编程中&#xff0c;词法作用域&#xff08;lexical scoping&#xff09;是一种控制变量可见性的方式&#xff0c;它允许变量在特定的作用域内可见&#xff0c;从而避免变量名的冲突。Perl提供了灵活的机…

目标检测基本标注工具-labelImg安装与使用

&#x1f349;一、安装 1.1 打开conda创建虚拟环境&#x1f388; conda create -n labelImg python3.8 -y 1.2 激活labelImg虚拟环境&#x1f388; activate labelImg1.3 安装labelImg&#x1f388; pip install -i https://pypi.tuna.tsinghua.edu.cn/simple lab…

Protobuf: 大数据开发中的高效数据传输利器

作为一名大数据开发者&#xff0c;我经常需要处理海量的数据传输和存储。在这个过程中&#xff0c;选择一个高效、可靠的数据序列化工具至关重要。今天&#xff0c;我想和大家分享一下我在项目中使用 Protobuf 的经历。 目录 故事背景Protobuf 简介优点&#xff1a; 实战案例示…

uView、ColorUI与Vant框架的深入分析与案例实践

摘要&#xff1a; 随着移动开发技术的不断发展&#xff0c;框架的选择对于项目的成功至关重要。本文将对uView、ColorUI和Vant这三个主流移动端框架进行深入分析&#xff0c;探讨它们的优缺点&#xff0c;并通过实际案例展示如何根据项目需求选择合适的框架。 一、引言 在移动…

ls命令学习记录1

ls 1.列出文件和文件夹 ls命令应该是人们使用次数最多的一个命令。毕竟&#xff0c;在处理和使用目录中的文件之前&#xff0c;必须先知道目录中有哪些文件。这就是ls命令发挥作用的地方&#xff0c;因为它能够列出目录中的文件和子目录。 说明 ls命令听起来可能很简单&…

【人工智能】-- 受限玻尔兹曼机

个人主页&#xff1a;欢迎来到 Papicatch的博客 课设专栏 &#xff1a;学生成绩管理系统 专业知识专栏&#xff1a; 专业知识 文章目录 &#x1f349;引言 &#x1f349;受限玻尔兹曼机 &#x1f348;RBM的结构 &#x1f34d;RBM的架构图 &#x1f34d;RBM的经典实现 &…

函数练习•二 进阶题

# 进阶题 # 1.封装函数&#xff0c;比较某两个数的大小&#xff0c;返回较大的一个 # 2.封装函数&#xff0c;判断某个数是否是素数&#xff0c;返回结果(True或False) # 3.封装函数&#xff0c;计算2-100之间素数的个数&#xff0c;返回结果 # 挑战题(选做) # 1,封装函数&am…

给事务如何加行锁,表锁

因为MVCC&#xff0c;所以锁都不会阻止读 在 MySQL 中&#xff0c;UPDATE 等语句会自动获取被更新行的行级写锁&#xff08;排他锁&#xff09; 给事务加锁&#xff0c;而不是给语句加锁 加行锁后&#xff0c;等事务提交或者回滚就会自动释放 加行读锁后保证读时候没人修改…

Python中对asyncio的实际使用

前言&#xff1a;一般涉及异步编程我都无脑用celery&#xff0c;但是最近在做一个项目&#xff0c;项目不大&#xff0c;也不涉及定时任务&#xff0c;所以就用了asyncio。 asyncio是python自带的模块&#xff0c;比celery轻量&#xff0c;使用起来也简单。以前学习过&#xf…

WINDOWS核心编程-----框架

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 例如&#xff1a;第一章 Python 机器学习入门之pandas的使用 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目…

论文阅读【时空+大模型】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…

ArrayList----源码分析

源码中的简介&#xff1a; List接口的可调整数组实现。实现所有可选列表操作&#xff0c;并允许所有元素&#xff0c;包括null。除了实现List接口之外&#xff0c;这个类还提供了一些方法来操作内部用于存储列表的数组的大小。(这个类大致相当于Vector&#xff0c;只是它是不同…

TC软件许可优化解决方案

TC功能说明 Teamcenter 软件是西门子面向全球范围开发的数字化全生命周期管理&#xff08;PLM&#xff09;系统&#xff0c;将人员、产品、流程、知识有机联系在一起&#xff0c;以帮助企业实现数字化协同、数字化赋能、 数字化转型&#xff0c;从而推动企业产品创新与效率提升…

Delphi 里防止程序多次运行

Delphi 里防止程序多次运行 在dpr里加入以下红色部分代码 program Main; uses Vcl.Forms, Windows, SysUtils, uMain in uMain.pas {MainForm}; {$R *.res} Var hMutex:HWND; Ret:Integer; begin Application.Initialize; Application.MainFormOnTaskbar : T…

Java链表LinkedList经典题目

一.LinkedList的方法 首先先看一下链表的方法&#xff1a; 方法解释boolean add(E e)尾插void add(int index, E element)将 e 插入到 index 位置boolean addAll(Collection c)尾插 c 中的元素E remove(int index)删除 index 位置元素boolean remove(Object o)删除遇到的第一…

【EIScopus稳检索-高录用】第五届大数据与社会科学国际学术会议(ICBDSS 2024)

大会官网&#xff1a;www.icbdss.org 大会时间&#xff1a;2024年8月16-18日 大会地点&#xff1a;中国-上海 接受/拒稿通知&#xff1a;投稿后1-2周内 收录检索&#xff1a;EI,Scopus *所有参会者现场均可获取参会证明&#xff0c;会议通知&#xff08;邀请函&#xff09;&…

2022 RoboCom省赛题目解析

题目解析&#xff1a;这就是一题很简单的模拟&#xff0c;直接上代码&#xff1b; #include<iostream> using namespace std; const int N 10010; int arr[N]; int main() {int n , m;cin >> n >> m;int sum 0;int res 0;for(int i 0; i < n;i ) cin…