Condivisione della tecnologia

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

6-5 Il browser web3 si collega alla blockchain (chiamando il contratto di lettura-scrittura per collegarsi con metamask)

Ecco l’interazione tra il browser e lo smart contract

Due biblioteche

Web3
Truffle contract //truffle racchiude semplicemente il contratto front-end nel collegamento, il che è più facile da usare.

Venireprogetto di reazionenella directory root (creata nel Capitolo 1),

Ricrea un progetto di reazione qui
Italiano: https://blog.csdn.net/u012118993/article/details/87288516
reactCrea un nuovo progetto Utilizza creat-react-app per creare rapidamente un progetto react

（1）npm install -g create-react-app Installazione globale (installazione completa)

（2）create-react-app reactproject Crea un nuovo progetto react e assegnagli un nome (nota: il nome del progetto non può avere lettere maiuscole)

（3）cd reactproject Entra nella cartella tramite il comando e preparati a eseguire il progetto

（4）npm start Esegui il progetto

E:trufflewoniu-pet-shop
1

Creato nella directory del tartufo

Installa i seguenti file nel progetto react
Installa web3 (installa nella cartella seguente)

npm install web3 --save
1

Quindi installa il contratto tartufo

npm install truffle-contract --save
1

Dimostrazione completata

1. Contratto di collegamento
2. Eseguire la funzione interna del contratto
3. Aggiungi il supporto della libreria dell'interfaccia utente ant.design
4. Completa il progetto

nota nuova

Contenuti in App.js
come segue

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

Se il plug-in metamask è installato nel browser

Le variabili globali hanno valori nel browser

Metamask può essere collegato manualmente o automaticamente

Avvia lo script. In precedenza web3 non era definito nella console del browser perché in questo momento era una pagina web vuota

Inizia nel negozio di animali costruito dal progetto React

Npm start
1

Apri nel browser
http://localhost:3000/

effetti video

Video per installare nuovi pacchetti

Ho ricevuto un errore perché la funzione init non è stata salvata.

L'effetto reale dopo il successo è il seguente:

appena aderito

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

Dopo aver salvato il codice modificato, accedere nuovamente alla rete senza chiudere e riavviare npm

Aggiornalo ora
Naturalmente, al momento non è presente alcuna finestra pop-up. Dopo aver eliminato il portafoglio metamask, verrà visualizzata una finestra pop-up.

Al momento, utilizza il browser Chrome senza portafoglio per accedere

Viene visualizzata una finestra popup, ma alcuni caratteri sono confusi.

Aggiungi di nuovo il codice

Tutti i codici sono i seguenti

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

Aggiorna l'interfaccia come segue

Ottenuto l'indirizzo del contratto

Utilizza le variabili sopra per ottenere l'indirizzo locale e l'indirizzo dell'account predefinito di metamask.

Italiano: 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

Il motivo per cui l'indirizzo della metamask non può essere ottenuto qui è il seguente
Italiano: https://blog.csdn.net/weixin_39421014/article/details/103323245

Puoi prima disattivare le autorizzazioni sulla privacy di metamask
Italiano: https://www.freesion.com/article/8518937500/
Impostazioni della modalità privacy e codice JS compatibile

Italiano: https://blog.csdn.net/JackieDYH/article/details/115380677?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242
Ottieni informazioni sull'account

Dopo aver modificato il codice, modificare la parte della funzione di inizializzazione.

È possibile utilizzare la metamask per collegarsi al sito Web e stampare l'indirizzo della metamask corrente.

Successivamente, apporta le modifiche al codice per l'evento clic

Facendo clic su adozione qui verrà visualizzata una casella per il pagamento, poiché la funzione di scrittura deve essere chiamata e scritta alla catena. Non è necessario trasferire denaro per l'adozione qui, ma è richiesta una commissione di gestione da parte del genitore.

Richiama con successo la funzione che deve essere scritta localmente sulla blockchain (come segue quando si fa clic sul pulsante)

Tutto il codice che alla fine è stato eseguito correttamente è il seguente:

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

Tutte le funzioni sono state eseguite con successo, comprese le funzioni di lettura e scrittura.

Questo codice presenta ancora alcuni difetti Se la transazione fallisce, verrà segnalato un errore e anche la pagina segnalerà un errore.
Quando fai clic su Rifiuta o esci direttamente

Il prossimo passo è abbellire l'interfaccia utente