Partage de technologie

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

6-5 Le navigateur Web3 est lié à la blockchain (appelant le contrat de lecture-écriture pour établir un lien avec le métamasque)

Voici l'interaction entre le navigateur et le contrat intelligent

Deux bibliothèques

Web3
Contrat Truffle //truffe enveloppe simplement le contrat frontal dans le lien, ce qui est plus facile à utiliser.

viensprojet de réactiondans le répertoire racine (créé au chapitre 1),

Recréez un projet React ici
https://blog.csdn.net/u012118993/article/details/87288516
réagirCréer un nouveau projetUtilisez create-react-app pour créer rapidement un projet de réaction

（1）npm install -g create-react-app Installation globale (installation sur l'ensemble)

（2）create-react-app reactproject Créez un nouveau projet React et nommez-le (remarque : le nom du projet ne peut pas avoir de majuscules)

（3）cd reactproject Entrez dans le dossier via la commande et préparez-vous à exécuter le projet

（4）npm start Exécuter le projet

E:trufflewoniu-pet-shop
1

Créé dans l'annuaire truffes

Installez les fichiers suivants sous le projet React
Installez web3 (installez dans le dossier ci-dessous)

npm install web3 --save
1

Puis installez truffle-contract

npm install truffle-contract --save
1

Démo terminée

1. Lier le contrat
2. Exécuter la fonction interne du contrat
3. Ajouter la prise en charge de la bibliothèque ant.design ui
4. Terminez le projet

remarque nouveau

Contenu dans App.js
comme suit

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

Si le plug-in métamasque est installé dans le navigateur

Les variables globales ont des valeurs dans le navigateur

Le métamasque peut être lié manuellement ou automatiquement

Démarrez le script Auparavant, web3 n'était pas défini dans la console du navigateur car il s'agissait d'une page Web vide.

Commencez dans l'animalerie construite par le projet React

Npm start
1

Ouvrir dans le navigateur
http://localhost:3000/

effets vidéo

Vidéo pour installer de nouveaux packages

J'ai eu une erreur car la fonction init n'a pas été enregistrée.

L’effet réel après le succès est le suivant :

nouvellement rejoint

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

Après avoir enregistré le code modifié, accédez à nouveau au réseau sans fermer et relancez npm

Actualisez-le maintenant
Bien sûr, il n'y a pas de fenêtre contextuelle pour le moment. Il y aura une fenêtre contextuelle après la suppression du portefeuille métamasque.

Pour le moment, utilisez le navigateur Chrome sans portefeuille pour accéder

Une fenêtre pop-up apparaît, mais certains caractères sont tronqués

Ajouter à nouveau du code

Tous les codes sont les suivants

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

Actualisez l'interface comme suit

Obtention de l'adresse du contrat

Utilisez les variables ci-dessus pour obtenir l'adresse locale et l'adresse de compte par défaut du métamask.

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

La raison pour laquelle l'adresse du métamasque ne peut pas être obtenue ici est la même que ci-dessus
https://blog.csdn.net/weixin_39421014/article/details/103323245

Vous pouvez d'abord désactiver les autorisations de confidentialité du métamask.
https://www.freesion.com/article/8518937500/
Paramètres du mode de confidentialité et code JS compatible

https://blog.csdn.net/JackieDYH/article/details/115380677?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242
Obtenir des informations sur le compte

Après avoir modifié le code, modifiez la partie fonction d'initialisation.

Vous pouvez utiliser le métamasque pour créer un lien vers le site Web et imprimer l'adresse actuelle du métamasque.

Ensuite, apportez les modifications de code pour l'événement click

En cliquant sur adoption ici, une boîte de paiement apparaîtra, car la fonction d'écriture doit être appelée et écrite dans la chaîne. Il n'est pas nécessaire de transférer de l'argent pour l'adoption ici, mais des frais de traitement pour les parents sont requis.

Appelez avec succès la fonction qui doit être écrite localement dans la blockchain (comme suit lorsque vous cliquez sur le bouton)

Tout le code qui s'est finalement exécuté avec succès est le suivant :

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

Toutes les fonctions ont été exécutées avec succès, y compris les fonctions de lecture et d'écriture.

Ce code présente encore quelques défauts. Si la transaction échoue, une erreur sera signalée et la page signalera également une erreur.
Lorsque vous cliquez sur rejeter ou quitter directement

La prochaine étape consiste à embellir l'interface utilisateur