什么是Dapp？零基礎(chǔ)帶你搭建一個(gè)Dapp
前言：Dapp就是去中心化應(yīng)用，它和我們平時(shí)使用的App（微信，支付寶等）只差了一個(gè)去中心化，如何理解這一去中心化？從體驗(yàn)層面來說：Dapp中并沒有管理者，大家都是平等的，互相監(jiān)督；而從技術(shù)層面來說：傳統(tǒng)的App和部署在服務(wù)器的后端產(chǎn)生交互，而Dapp則是和部署在區(qū)塊鏈上的智能合約產(chǎn)生交互。
本篇文章帶大家實(shí)現(xiàn)一個(gè)簡(jiǎn)單Dapp的搭建，通過實(shí)戰(zhàn)讓你進(jìn)一步了解Dapp，跟著做就行了！
1.DApp實(shí)現(xiàn)之合約編寫
- 打開Remix編輯器
- 新建
InfoContract.sol文件，并將下面合約內(nèi)容Copy上去
編寫InfoContract合約
// SPDX-License-Identifier: GPL-3.0
pragma solidity 0.8.0;
contract InfoContract{
string name;
uint256 age;
function setInfo(string memory _name,uint256 _age) public {
name = _name;
age = _age;
}
function getInfo() public view returns(string memory,uint){
return (name,age);
}
}
2.DApp實(shí)現(xiàn)之前端編寫
2.1創(chuàng)建一個(gè)新文件夾Dapp
并用VScode或者Atom打開該文件夾（選擇你自己使用的編輯器即可）
2.2Dapp中創(chuàng)建index.html和index.css
index.html
<html>
<head>
<title>Dapp Demo</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container">
<h1>
First Dapp
</h1>
<h2 id="info"></h2>
<label>姓名：</label>
<input id="name" type="text">
<label>年齡：</label>
<input id="age" type="text">
</body>
</html>
index.css
body {
background-color: #f0f0f0;
padding: 2em;
font-family: 'Raleway','Source Sans Pro','Arial';
}
.container{
width: 40%;
margin: 0 auto;
}
label{
display: block;
margin-bottom:10px;
}
input{
padding: 10px;
width: 50%;
margin-bottom: 1em;
}
button{
margin: 2em 0;
padding: 1em 4em;
display: block;
}
#info{
padding: 1em;
background-color: #fff;
margin: 1em 0;
border: 1px solid;
}
2.3效果圖預(yù)覽
3. DApp實(shí)現(xiàn)之Web3與合約交互
3.1安裝web3庫
推薦使用第三種方法，因?yàn)椴挥冒惭b任何環(huán)境
- Node
npm install web3
- Yarn
yarn add web3
- CDN
由于以太坊舍棄了web3的腳本使用方法，所以這里我們臨時(shí)使用替代腳本
<!-- The legacy-web3 script must run BEFORE your other scripts. -->
<script src="https://unpkg.com/@metamask/legacy-web3@latest/dist/metamask.web3.min.js"></script>
<!-- 或者用 -->
<script src="https://unpkg.com/@metamask/legacy-web3@latest/dist/metamask.web3.js"></script>
Tip: 若web3難以安裝，建議參考這篇文章解決npm安裝web3模塊失敗問題
3.2 Web3調(diào)用合約
參考文檔：web3.eth.contract
3.2.1獲取合約的abi
什么是abi？可以去復(fù)習(xí)之前的課程
- 回到Remix編輯器的編譯器界面
- 點(diǎn)擊右下角的
Compilation Details按鈕
- 復(fù)制abi內(nèi)容
3.2.2部署合約
需要保證你的小狐貍錢包里有bnb余額
- 選擇
Injected Web3環(huán)境，點(diǎn)擊Deploy部署
- 在小狐貍錢包中點(diǎn)擊確認(rèn)，交上部署合約的gas費(fèi)
- 部署成功！
- 在左側(cè)已部署合約中Copy合約地址
我的合約地址是0x528f48F5EbCbf25061e8814328A0073294ED58Cb
3.2.3編寫Script腳本
<script>
console.log(web3)
web3.setProvider('ws://localhost:8545');
//獲取介紹內(nèi)容
const introduction = document.getElementById('info')
//通過abi初始化合約
var infoContract = web3.eth.contract(
[{
"inputs": [],
"name": "getInfo",
"outputs": [{
"internalType": "string",
"name": "",
"type": "string"
},
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [{
"internalType": "string",
"name": "_name",
"type": "string"
},
{
"internalType": "uint256",
"name": "_age",
"type": "uint256"
}
],
"name": "setInfo",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
}
]
);
//通過地址實(shí)例化合約
var info = infoContract.at('0x528f48F5EbCbf25061e8814328A0073294ED58Cb')
//從合約獲取消息
info.getInfo(function (error, result) {
if (!error) {
//修改介紹內(nèi)容
introduction.innerHTML = result[0] + '(' + result[1] + 'years old)'
}
})
</script>
3.2.4 更改合約信息
注意仍要在injected web3環(huán)境下更改，并且這將會(huì)收取一定的gas費(fèi)用，小狐貍錢包上點(diǎn)擊確認(rèn)即可！
更改成功！
3.2.5前端顯示
恭喜你！至此你已經(jīng)實(shí)現(xiàn)了人生中第一次與智能合約的交互！
??舉一反三
我們通過調(diào)用該合約的getInfo()的方法，獲取了我們?cè)O(shè)置的信息，并讓它在前端顯示出來。那么該如何通過前端去更新我們智能合約的信息呢？
index.html全部代碼
index.css無需改動(dòng)，用之前的即可文章來源：http://www.zghlxwxcb.cn/news/detail-453702.html
<html>
<head>
<title>Dapp Demo</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script src="https://unpkg.com/@metamask/legacy-web3@latest/dist/metamask.web3.min.js"></script>
</head>
<body>
<div class="container">
<h1>
First Dapp
</h1>
<h2 id="info"></h2>
<label>姓名：</label>
<input id="name" type="text">
<label>年齡：</label>
<input id="age" type="text">
<button id="button">更新</button>
</div>
<script>
console.log(web3)
web3.setProvider('ws://localhost:8545');
//獲取介紹內(nèi)容
const introduction = document.getElementById('info')
//通過abi初始化合約
var infoContract = web3.eth.contract(
[{
"inputs": [],
"name": "getInfo",
"outputs": [{
"internalType": "string",
"name": "",
"type": "string"
},
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"stateMutability": "view",
"type": "function"
},
{
"inputs": [{
"internalType": "string",
"name": "_name",
"type": "string"
},
{
"internalType": "uint256",
"name": "_age",
"type": "uint256"
}
],
"name": "setInfo",
"outputs": [],
"stateMutability": "nonpayable",
"type": "function"
}
]
);
//通過地址實(shí)例化合約
var info = infoContract.at('0x528f48F5EbCbf25061e8814328A0073294ED58Cb')
//從合約獲取消息
info.getInfo(function (error, result) {
if (!error) {
//修改介紹內(nèi)容
introduction.innerHTML = result[0] + '(' + result[1] + 'years old)'
}
})
</script>
</body>
</html>
??歡迎關(guān)注個(gè)人博客（區(qū)塊鏈方向）
77Brother的技術(shù)小棧文章來源地址http://www.zghlxwxcb.cn/news/detail-453702.html
到了這里，關(guān)于什么是Dapp？帶你從零開始搭建一個(gè)Dapp的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
