Κοινή χρήση τεχνολογίας

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

6-5 Το πρόγραμμα περιήγησης web3 συνδέεται με το blockchain (καλώντας το συμβόλαιο ανάγνωσης-εγγραφής για σύνδεση με metamask)

Εδώ είναι η αλληλεπίδραση μεταξύ του προγράμματος περιήγησης και του έξυπνου συμβολαίου

Δύο βιβλιοθήκες

Web3
Το συμβόλαιο τρούφας //τρούφας απλώς τυλίγει το συμβόλαιο του μπροστινού μέρους στον σύνδεσμο, ο οποίος είναι πιο εύκολος στη χρήση.

Έλααντιδρούν έργοστον ριζικό κατάλογο (που δημιουργήθηκε στο Κεφάλαιο 1),

Δημιουργήστε ξανά ένα έργο react εδώ
https://blog.csdn.net/u012118993/article/details/87288516
reactΔημιουργία νέου έργουΧρησιμοποιήστε την εφαρμογή creat-react για να δημιουργήσετε γρήγορα ένα έργο react

（1）npm install -g create-react-app Καθολική εγκατάσταση (εγκατάσταση στο σύνολό της)

（2）create-react-app reactproject Δημιουργήστε ένα νέο έργο react και ονομάστε το (σημείωση: το όνομα του έργου δεν μπορεί να έχει κεφαλαία γράμματα)

（3）cd reactproject Εισαγάγετε το φάκελο μέσω της εντολής και ετοιμαστείτε να εκτελέσετε το έργο

（4）npm start Εκτελέστε το έργο

E:trufflewoniu-pet-shop
1

Δημιουργήθηκε στον κατάλογο τρούφας

Εγκαταστήστε τα ακόλουθα αρχεία στο έργο react
Εγκατάσταση web3 (εγκατάσταση στον παρακάτω φάκελο)

npm install web3 --save
1

Στη συνέχεια, εγκαταστήστε το συμβόλαιο τρούφας

npm install truffle-contract --save
1

Η επίδειξη ολοκληρώθηκε

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

Εάν το πρόσθετο metamask είναι εγκατεστημένο στο πρόγραμμα περιήγησης

Οι καθολικές μεταβλητές έχουν τιμές στο πρόγραμμα περιήγησης

Το Metamask μπορεί να συνδεθεί χειροκίνητα ή αυτόματα

Έναρξη του σεναρίου Προηγουμένως το web3 δεν είχε οριστεί στην κονσόλα του προγράμματος περιήγησης, επειδή αυτή τη στιγμή ήταν κενή ιστοσελίδα

Ξεκινήστε στο petshop που κατασκευάστηκε από το έργο react

Npm start
1

Ανοιγμα σε πρόγραμμα περιήγησης
http://localhost:3000/

εφέ βίντεο

Βίντεο για την εγκατάσταση νέων πακέτων

Παρουσιάστηκε σφάλμα επειδή η συνάρτηση init δεν αποθηκεύτηκε.

Το πραγματικό αποτέλεσμα μετά την επιτυχία είναι το εξής:

πρόσφατα εντάχθηκε

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

Αφού αποθηκεύσετε τον αλλαγμένο κωδικό, αποκτήστε ξανά πρόσβαση στο δίκτυο χωρίς να κλείσετε και ξεκινήστε ξανά το npm

Ανανεώστε το τώρα
Φυσικά, δεν υπάρχει αναδυόμενο παράθυρο αυτή τη στιγμή Θα υπάρχει ένα αναδυόμενο παράθυρο μετά τη διαγραφή του πορτοφολιού μεταμάσκας.

Προς το παρόν, χρησιμοποιήστε το πρόγραμμα περιήγησης 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
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

Ανανεώστε τη διεπαφή ως εξής

Λήψη της διεύθυνσης της σύμβασης

Χρησιμοποιήστε τις παραπάνω μεταβλητές για να λάβετε την τοπική διεύθυνση και την προεπιλεγμένη διεύθυνση λογαριασμού του metamask.

https://blog.csdn.net/weixin_41937552/article/details/106990561?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-1&spm=1001.2101.34201.

Ο λόγος για τον οποίο δεν μπορεί να ληφθεί η διεύθυνση του 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 για να συνδεθείτε στον ιστότοπο και να εκτυπώσετε την τρέχουσα διεύθυνση μεταμάσκας.

Στη συνέχεια, κάντε τις αλλαγές στον κώδικα για το συμβάν κλικ

Κάνοντας κλικ στην υιοθεσία εδώ θα εμφανιστεί ένα πλαίσιο πληρωμής, επειδή η συνάρτηση εγγραφής πρέπει να κληθεί και να γραφτεί στην αλυσίδα Δεν χρειάζεται να μεταφέρετε χρήματα για υιοθεσία εδώ, αλλά απαιτείται χρέωση χειρισμού γονέα.

Καλέστε με επιτυχία τη συνάρτηση που πρέπει να γραφτεί στο blockchain τοπικά (όπως ακολουθεί όταν κάνετε κλικ στο κουμπί)

Όλος ο κώδικας που τελικά έτρεξε με επιτυχία είναι ο εξής:

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

Όλες οι λειτουργίες έχουν εκτελεστεί με επιτυχία, συμπεριλαμβανομένων των συναρτήσεων ανάγνωσης και γραφής.

Αυτός ο κωδικός εξακολουθεί να έχει ορισμένα ελαττώματα Εάν η συναλλαγή αποτύχει, θα αναφερθεί ένα σφάλμα και η σελίδα θα αναφέρει επίσης ένα σφάλμα.
Όταν κάνετε κλικ στην απόρριψη ή απευθείας έξοδο

Το επόμενο βήμα είναι να ωραιοποιήσετε το UI