Teknologian jakaminen

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

6-5 Web3-selainlinkkiä lohkoketjuun (kutsumalla luku-kirjoitussopimusta linkittämään metamaskiin)

Tässä on selaimen ja älykkään sopimuksen välinen vuorovaikutus

Kaksi kirjastoa

Web3
Tryffelisopimus //tryffeli yksinkertaisesti kääri käyttöliittymän sopimuksen linkkiin, mikä on helpompi käyttää.

tulereagoi projektiinjuurihakemistossa (luotu luvussa 1),

Luo reaktioprojekti uudelleen täällä
https://blog.csdn.net/u012118993/article/details/87288516
reactLuo uusi projekti Luo react-projekti nopeasti käyttämällä creat-react-sovellusta

（1）npm install -g create-react-app Globaali asennus (asenna koko)

（2）create-react-app reactproject Luo uusi react-projekti ja nimeä se (huomaa: projektin nimessä ei voi olla isoja kirjaimia)

（3）cd reactproject Syötä kansio komennon kautta ja valmistaudu suorittamaan projekti

（4）npm start Suorita projekti

E:trufflewoniu-pet-shop
1

Luotu tryffelihakemistoon

Asenna seuraavat tiedostot react-projektiin
Asenna web3 (asenna alla olevaan kansioon)

npm install web3 --save
1

Asenna sitten tryffelisopimus

npm install truffle-contract --save
1

Demo valmis

1. Linkitä sopimus
2. Suorita sopimuksen sisäinen tehtävä
3. Lisää ant.design ui -kirjastotuki
4. Suorita projekti loppuun

huomata uusi

Sisältö App.js:ssa
seuraavasti

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

Jos metamask-laajennus on asennettu selaimeen

Yleisillä muuttujilla on arvot selaimessa

Metamask voidaan linkittää manuaalisesti tai automaattisesti

Aloita komentosarja Aiemmin web3 oli määrittelemätön selainkonsolissa, koska se oli tällä hetkellä tyhjä

Aloita react-projektin rakentamassa lemmikkikaupassa

Npm start
1

Avaa selaimessa
http://localhost:3000/

videotehosteet

Video uusien pakettien asentamisesta

Oma virhe ilmoitettiin, koska init-funktiota ei tallennettu.

Todellinen vaikutus onnistumisen jälkeen on seuraava:

vasta liittynyt

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

Kun olet tallentanut muutetun koodin, käytä verkkoa uudelleen sulkematta ja käynnistä npm uudelleen

Päivitä se nyt
Ponnahdusikkunaa ei tietenkään ole tällä hetkellä. Ponnahdusikkuna tulee näkyviin metamask-lompakon poistamisen jälkeen.

Käytä tällä hetkellä kirjautumiseen Chrome-selainta ilman lompakkoa

Näkyviin tulee ponnahdusikkuna, mutta jotkut merkit ovat sekaisin.

Lisää koodi uudelleen

Kaikki koodit ovat seuraavat

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

Päivitä käyttöliittymä seuraavasti

Hankittu sopimusosoite

Käytä yllä olevia muuttujia saadaksesi paikallisen osoitteen ja metamaskin oletustilin osoitteen.

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

Syy, miksi metamaskin osoitetta ei saada täältä, on yllä oleva
https://blog.csdn.net/weixin_39421014/article/details/103323245

Voit ensin poistaa käytöstä metamaskin tietosuojaoikeudet
https://www.freesion.com/article/8518937500/
Yksityisyystilan asetukset ja yhteensopiva JS-koodi

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

Muokkaa koodin muokkauksen jälkeen alustusfunktion osaa.

Voit käyttää metamaskia linkittääksesi verkkosivustolle ja tulostaaksesi nykyisen metamaskin osoitteen.

Tee seuraavaksi klikkaustapahtuman koodimuutokset

Adoptiota klikkaamalla avautuu maksuruutu, koska kirjoitustoiminto pitää kutsua ja kirjoittaa ketjuun. Täällä ei tarvitse siirtää rahaa adoptioon, vaan vaaditaan vanhemman käsittelymaksu.

Lohkoketjuun kirjoitettavan funktion kutsuminen onnistuneesti paikallisesti (seuraavasti, kun painiketta napsautetaan)

Kaikki lopulta onnistuneesti suoritettu koodi on seuraava:

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

Kaikki toiminnot on suoritettu onnistuneesti, mukaan lukien luku- ja kirjoitustoiminnot.

Tässä koodissa on edelleen virheitä, jos tapahtuma epäonnistuu, ja sivu ilmoittaa myös virheestä.
Kun napsautat hylkää tai poistu suoraan

Seuraava askel on kaunistaa käyttöliittymää