Technologieaustausch

6-5, Web3-Browser-Links zur Blockchain (Blockchain-Praxis reagieren)

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

6-5，web3Browser-Link zur Blockchain (React+Blockchain-Praxis)

6-5 Der Web3-Browser stellt eine Verbindung zur Blockchain her (ruft den Lese-/Schreibvertrag auf, um eine Verknüpfung mit der Metamaske herzustellen).

Hier ist die Interaktion zwischen dem Browser und dem Smart Contract

Zwei Bibliotheken

Web3
Truffle-Vertrag //truffle verpackt einfach den Front-End-Vertrag in den Link, was einfacher zu verwenden ist.

kommenReaktionsprojektim Stammverzeichnis (erstellt in Kapitel 1),
Fügen Sie hier eine Bildbeschreibung ein

Erstellen Sie hier ein Reaktionsprojekt neu
https://blog.csdn.net/u012118993/article/details/87288516
reagierenErstellen Sie ein neues ProjektVerwenden Sie creat-react-app, um schnell ein Reaktionsprojekt zu erstellen

（1）npm install -g create-react-app Globale Installation (insgesamt installieren)

（2）create-react-app reactproject Erstellen Sie ein neues Reaktionsprojekt und benennen Sie es (Hinweis: Der Projektname darf keine Großbuchstaben enthalten).

（3）cd reactproject Geben Sie den Ordner über den Befehl ein und bereiten Sie die Ausführung des Projekts vor

（4）npm start Führen Sie das Projekt aus

E:trufflewoniu-pet-shop

  • 1

Erstellt im Trüffelverzeichnis
Fügen Sie hier eine Bildbeschreibung ein

Installieren Sie die folgenden Dateien unter dem React-Projekt
Web3 installieren (im folgenden Ordner installieren)

npm install web3 --save

  • 1

Fügen Sie hier eine Bildbeschreibung ein

Dann installieren Sie truffle-contract

npm install truffle-contract --save

  • 1

Demo abgeschlossen

1. Linkvertrag
2. Führen Sie die interne Funktion des Vertrags aus
3. Fügen Sie die Unterstützung für die ant.design-UI-Bibliothek hinzu
4. Schließen Sie das Projekt ab

Fügen Sie hier eine Bildbeschreibung ein

Hinweis neu
Fügen Sie hier eine Bildbeschreibung ein

Inhalte in App.js
wie folgt

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

Fügen Sie hier eine Bildbeschreibung ein

Wenn das Metamask-Plugin im Browser installiert ist

Globale Variablen haben Werte im Browser
Fügen Sie hier eine Bildbeschreibung ein

Metamask kann manuell oder automatisch verknüpft werden
Fügen Sie hier eine Bildbeschreibung ein

Zuvor war web3 in der Browserkonsole nicht definiert, da es sich zu diesem Zeitpunkt um eine leere Webseite handelte

Beginnen Sie in der vom React-Projekt erstellten Petshop

Npm start

  • 1

Im Browser öffnen
http://localhost:3000/

Videoeffekte
Fügen Sie hier eine Bildbeschreibung ein

Video zur Installation neuer Pakete
Fügen Sie hier eine Bildbeschreibung ein
Fügen Sie hier eine Bildbeschreibung ein

Ich habe eine Fehlermeldung erhalten, weil die Init-Funktion nicht gespeichert wurde.

Fügen Sie hier eine Bildbeschreibung ein

Der tatsächliche Effekt nach Erfolg ist wie folgt:
Fügen Sie hier eine Bildbeschreibung ein

Fügen Sie hier eine Bildbeschreibung ein

neu beigetreten

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

Nachdem Sie den geänderten Code gespeichert haben, greifen Sie erneut auf das Netzwerk zu, ohne es zu schließen, und starten Sie erneut NPM

Aktualisieren Sie es jetzt
Natürlich gibt es derzeit kein Popup-Fenster. Nach dem Löschen der Metamask-Brieftasche wird ein Popup-Fenster angezeigt.

Verwenden Sie zu diesem Zeitpunkt den Chrome-Browser ohne Wallet, um darauf zuzugreifen
Fügen Sie hier eine Bildbeschreibung ein

Es erscheint ein Popup-Fenster, aber einige Zeichen sind verstümmelt

Code erneut hinzufügen

Fügen Sie hier eine Bildbeschreibung ein

Alle Codes lauten wie folgt

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62

Aktualisieren Sie die Schnittstelle wie folgt
Fügen Sie hier eine Bildbeschreibung ein

Die Adresse des Vertrags erhalten
Fügen Sie hier eine Bildbeschreibung ein

Verwenden Sie die oben genannten Variablen, um die lokale Adresse und die Standardkontoadresse der Metamaske abzurufen.
Fügen Sie hier eine Bildbeschreibung ein

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

Der Grund, warum die Adresse der Metamaske hier nicht abgerufen werden kann, ist wie oben beschrieben
https://blog.csdn.net/weixin_39421014/article/details/103323245

Sie können zunächst die Datenschutzberechtigungen von Metamask deaktivieren.
https://www.freesion.com/article/8518937500/
Einstellungen für den Datenschutzmodus und kompatibler JS-Code
Fügen Sie hier eine Bildbeschreibung ein

https://blog.csdn.net/JackieDYH/article/details/115380677?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242
Kontoinformationen abrufen

Ändern Sie nach dem Ändern des Codes den Initialisierungsfunktionsteil.

Mit Metamask können Sie auf die Website verlinken und die aktuelle Metamask-Adresse ausdrucken.
Fügen Sie hier eine Bildbeschreibung ein

Nehmen Sie als Nächstes die Codeänderungen für das Klickereignis vor
Fügen Sie hier eine Bildbeschreibung ein

Wenn Sie hier auf Adoption klicken, wird ein Zahlungsfeld angezeigt, da die Schreibfunktion aufgerufen und in die Kette geschrieben werden muss. Hier muss kein Geld für die Adoption überwiesen werden, es ist jedoch eine Bearbeitungsgebühr für die Eltern erforderlich.

Rufen Sie die Funktion, die lokal in die Blockchain geschrieben werden muss, erfolgreich auf (wie folgt, wenn Sie auf die Schaltfläche klicken).
Fügen Sie hier eine Bildbeschreibung ein

Der gesamte Code, der schließlich erfolgreich ausgeführt wurde, lautet wie folgt:

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101

Alle Funktionen wurden erfolgreich ausgeführt, einschließlich Lese- und Schreibfunktionen.

Dieser Code weist noch einige Mängel auf. Wenn die Transaktion fehlschlägt, wird ein Fehler gemeldet, und die Seite meldet ebenfalls einen Fehler.
Wenn Sie auf „Ablehnen“ oder „Direkt Beenden“ klicken
Fügen Sie hier eine Bildbeschreibung ein

Fügen Sie hier eine Bildbeschreibung ein

Der nächste Schritt besteht darin, die Benutzeroberfläche zu verschönern

Persönliches Profil

Er widmet sich seit mehr als 30 Jahren der Technologieforschung und beherrscht verschiedene Sprachen wie Java, Linux, Javascript, PHP, CSS usw. Er hat viele Beiträge im Open-Source-Bereich geleistet, Entwicklerdokumentationsstation, um einige Themen in der Technologieentwicklung als zukünftige Referenz zu teilen

meine Kontaktdaten

Post