2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
अत्र ब्राउजर्-स्मार्ट-अनुबन्धयोः मध्ये अन्तरक्रिया अस्ति
पुस्तकालयद्वयम्
जालम्3
Truffle contract //truffle केवलं front-end अनुबन्धं लिङ्क् मध्ये लपेटयति, यस्य उपयोगः सुलभः भवति ।
आगच्छreact परियोजनामूलनिर्देशिकायां (अध्याये १ निर्मितम्),
अत्र react परियोजना पुनः रचयन्तु
https://blog.csdn.net/u012118993/लेख/विवरण/87288516
reactनवीन परियोजनानिर्माणं शीघ्रं react परियोजनां निर्मातुं creat-react-app इत्यस्य उपयोगं कुर्वन्तु
（1）npm install -g create-react-app वैश्विकस्थापनम् (समग्रं प्रति संस्थापनम्) २.
（2）create-react-app reactproject नूतनं react परियोजनां रचयन्तु तस्य नामकरणं च कुर्वन्तु (टिप्पणी: परियोजनानाम्नि बृहत् अक्षराणि न भवितुम् अर्हन्ति)
（3）cd reactproject आदेशद्वारा पुटं प्रविश्य परियोजनां चालयितुं सज्जतां कुर्वन्तु
（4）npm start परियोजनां चालयन्तु
E:trufflewoniu-pet-shop
truffle निर्देशिकायां निर्मितम्
react परियोजनायाः अन्तर्गतं निम्नलिखितसञ्चिकाः संस्थापयन्तु
web3 संस्थापयन्तु (अधः स्थापिते पुटे संस्थापनं कुर्वन्तु)
npm install web3 --save
ततः ट्रफल-अनुबन्धं स्थापयन्तु
npm install truffle-contract --save
डेमो सम्पन्न
1. लिङ्क अनुबन्धः
2. अनुबन्धस्य आन्तरिककार्यं निष्पादयन्तु
3. ant.design ui पुस्तकालयसमर्थनं योजयन्तु
4. परियोजनां सम्पूर्णं कुर्वन्तु
note new
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
यदि ब्राउजरे मेटामास्क प्लग-इन् संस्थापितम् अस्ति
वैश्विकचरानाम् ब्राउजर् मध्ये मूल्यानि सन्ति
मेटामास्कं मैन्युअल् रूपेण वा स्वयमेव वा लिङ्क् कर्तुं शक्यते
स्क्रिप्ट् आरभत पूर्वं web3 ब्राउजर् कन्सोल् मध्ये अपरिभाषितम् आसीत् यतः अस्मिन् समये रिक्तं जालपुटम् आसीत्
react परियोजनायाः निर्मितस्य पालतूपजीविनां दुकाने आरभत
Npm start
ब्राउजर् मध्ये उद्घाटयन्तु
http://स्थानीयमेजबान:3000/
विडियो प्रभाव
नूतनानि संकुलं संस्थापयितुं विडियो
मम स्वकीयः त्रुटिः निवेदिता यतः init फंक्शन् न रक्षितम् ।
सफलतायाः अनन्तरं वास्तविकः प्रभावः यथा भवति ।
नवसंयुक्ताः
init(){
//如果网页中的web3不是undefined
if(typeof window.web3 != 'undefined'){
this.web3Provider = window.web3.currentProvider; //metamask内置了web3的实例，实际可以手动链接
}else{
alert('请按照metamask')
}
}
परिवर्तितं कोडं रक्षित्वा पुनः जालपुटं विना बन्दं गत्वा पुनः npm आरभ्यताम्
इदानीं ताजगीं कुर्वन्तु
अवश्यं, अस्मिन् समये पॉप-अप-विण्डो नास्ति ।
अस्मिन् समये प्रवेशार्थं बटुकं विना chrome browser इत्यस्य उपयोगं कुर्वन्तु
एकं पॉप-अप विण्डो दृश्यते, परन्तु केचन वर्णाः विकृताः सन्ति ।
पुनः कोडं योजयन्तु
सर्वे कोडाः यथा सन्ति
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
अन्तरफलकं निम्नलिखितरूपेण ताजगीं कुर्वन्तु
अनुबन्धस्य पतां प्राप्तवान्
स्थानीयसङ्केतं मेटामास्कस्य पूर्वनिर्धारितलेखसङ्केतं च प्राप्तुं उपरिष्टात् चरानाम् उपयोगं कुर्वन्तु ।
https://blog.csdn.net/weixin_41937552/article/details/106990561?utm_medium=वितरित करें.pc_relevant.none-task-blog-baidujs_title-1&spm=1001.2101.3001.4242
अत्र मेटामास्कस्य सम्बोधनं प्राप्तुं न शक्यते इति कारणं पूर्ववत्
https://blog.csdn.net/weixin_39421014/लेख/विवरण/103323245
प्रथमं मेटामास्कस्य गोपनीयतानुमतिः निष्क्रियं कर्तुं शक्नुवन्ति
https://www.freesion.com/article/8518937500/ .
गोपनीयता मोड सेटिंग्स् तथा संगत JS कोड
https://blog.csdn.net/JackieDYH/article/details/115380677?utm_medium=वितरित करें.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242
खातासूचना प्राप्नुवन्तु
कोडं परिवर्तयित्वा आरम्भकार्यभागं परिवर्तयन्तु ।
वेबसाइट्-सम्बद्धं वर्तमान-मेटामास्क-सङ्केतं मुद्रयितुं च मेटामास्क-इत्यस्य उपयोगं कर्तुं शक्नुवन्ति ।
तदनन्तरं क्लिक् इवेण्ट् इत्यस्य कोड् परिवर्तनं कुर्वन्तु
अत्र दत्तकग्रहणे क्लिक् करणेन भुक्तिं कर्तुं एकः पेटी दृश्यते, यतः लेखनकार्यं आह्वयितुं श्रृङ्खलायां लिखितुं च आवश्यकम् अत्र दत्तकग्रहणाय धनं स्थानान्तरयितुं आवश्यकता नास्ति, परन्तु मातापितृनिबन्धनशुल्कं आवश्यकम् अस्ति
स्थानीयरूपेण ब्लॉकचेन् मध्ये लिखितव्यं कार्यं सफलतया आह्वयन्तु (बटनं क्लिक् करणसमये यथा निम्नलिखितम्)
अन्ते सफलतया चालितः सर्वः कोडः निम्नलिखितरूपेण अस्ति ।
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
पठनलेखनकार्यं सहितं सर्वाणि कार्याणि सफलतया निष्पादितानि सन्ति ।
अस्मिन् कोडे अद्यापि केचन दोषाः सन्ति यदि व्यवहारः विफलः भवति तर्हि त्रुटिः निवेदिता भविष्यति, पृष्ठं अपि त्रुटिं निवेदयिष्यति ।
यदा भवन्तः reject नुदन्ति अथवा प्रत्यक्षतया निर्गच्छन्ति
अग्रिमः सोपानः UI इत्यस्य सुन्दरीकरणं भवति
सः ३० वर्षाणाम् अधिकं कालात् प्रौद्योगिक्याः शोधकार्यं कर्तुं समर्पितः अस्ति, तथा च जावा, लिनक्स, जावास्क्रिप्ट्, php, css इत्यादिषु विविधभाषासु प्रवीणः अस्ति, मुक्तस्रोतक्षेत्रे सः बहु योगदानं कृतवान् अस्ति developer documentation station भविष्ये सन्दर्भार्थं प्रौद्योगिकीविकासे केचन विषयाः साझां कर्तुं सर्वे तत् पश्यन्तु
