好 各位 經(jīng)過我們上文 WEB3 solidity 帶著大家編寫測試代碼 操作訂單 創(chuàng)建/取消/填充操作 我們自己寫了一個測試訂單業(yè)務(wù)的腳本 沒想到運(yùn)行的還挺好的

那么 今天開始 我們就可以開始操作我們前端 Dapp 的一個操作了

在整個過程中 確實是沒有我們后端的操作 或者說 我們自己就是后端 solidity 就是服務(wù)端
雖然我個人并不是很開好 WEB3的前景 我覺得很可能無法推廣 但是 如果之后WEB3真的起來了 那么 可能會延伸成 前端開發(fā)Dapp工程師 和 新的 solidity 開發(fā)工程師 而我們這種從一開始就一直在做學(xué)習(xí)的 也很可能成為這一領(lǐng)域的 全棧開發(fā)工程師
我們還是先將 ganache 的環(huán)境起起來

然后 部署一下我們的合約

然后呢 這年頭 我們寫前端 不用個框架 都會讓人笑話 所以 我們用目前大家用的比較多的 React

可能這種很多人會覺得vue會更平易近人 或者是 可能很多人不太了解React 但WEB3在國外比較火 所以做這塊基本都是React的 我要是用vue寫給你們 搞不好你們拿出去會被別人笑話啊

正好我這也有很多React的文章 大家也可以補(bǔ)補(bǔ)基礎(chǔ)
我們在本地創(chuàng)建一個文件夾 作為項目目錄

然后 我們終端執(zhí)行

create-react-app webdapp

前提你電腦要安裝了 React
創(chuàng)建一個 叫 webdapp的react項目
項目可能要創(chuàng)建有點久

創(chuàng)建好之后 我們用編輯器打開這個項目

然后 我們嘗試在終端輸入

npm start

能夠運(yùn)行起這個React 項目的歡迎界面 我們就算成功了

然后 這里 因為 我們是 前端和solidity一起寫 我們完全可以做一個框架的整合
這里 我們知道 每次部署合約 json都會有一定變化，而這個Abi是前端鏈接合約的途徑

那么 我們開發(fā)過程中 總不想重新部署一次合約 前端就要重新復(fù)制一次
其實我們完全可以將這些東西搬到前端項目中

然后 我們來到智能合約項目的所在目錄下
然后 將除了 node_modules 依賴包 package-lock.json 如果你的項目中有package.json 則也不要
其他的文件都復(fù)制過來

然后扔掉 我們react項目的根目錄下

但是 之前我們也說了 沒有帶一切有關(guān)依賴的工具和文件
那么 我們此時 合約項目是沒有依賴 執(zhí)行不起來的
我們可以在react項目 終端下執(zhí)行

npm i openzeppelin-solidity

引入 openzeppelin-solidity 這是 一個開源的 solidity 庫

好 安裝好之后 為了證明這是沒問題的 我們在react項目下執(zhí)行

truffle migrate --reset

嘗試部署智能合約

但這里顯然報錯了 他說 我們之前用的這個
找不到 我們終端輸入

npm install @openzeppelin/contracts

安裝一下依賴
然后 再次部署合約
這樣 我們的合約就部署成功了

然后 我們將 scripts 目錄下的 test.js 測試文件代碼更改如下

//指定以token grtoken合約
const GrToken = artifacts.require("grToken.sol")
//交易所合約
const Exchange = artifacts.require("Exchange.sol")
//定義E代理地址
const ETHER_ADDRESS = '0x0000000000000000000000000000000000000000';

const fromWei = (bn) => {
  return web3.utils.fromWei(bn, "ether");
}
const toWei = (bn) => {
    return web3.utils.toWei(bn.toString(), "ether");
}

module.exports = async function(callback) {
    const grTokenDai = await GrToken.deployed();
    const exchage = await Exchange.deployed();
    //獲取用戶列表
    const accounts = await web3.eth.getAccounts();
    //第一個賬戶 調(diào)用transfer 發(fā)送100000 grtoken給第二個用戶 accounts[1]
    await grTokenDai.transfer(accounts[1],toWei(100000),{
        from: accounts[0]
    })
    //通過 exchage 交易所提供的  depositEther 函數(shù) accounts[0] 第一個用戶往交易所存入 100 E
    await exchage.depositEther({
        from: accounts[0],
        value: toWei(100)
    })

    //給第一個用戶 accounts[0] 交易所 授權(quán) 100000 GRTOKEN 就是我自己定義的token
    await grTokenDai.approve(exchage.address,toWei(100000),{
        from: accounts[0]
    })

    //第一個用戶 accounts[0] 通過交易所提供的 depositToken函數(shù) 存入100000 grToken
    await exchage.depositToken(grTokenDai.address,toWei(100000),{
        from: accounts[0]
    })

    //通過 exchage 交易所提供的  depositEther 函數(shù) accounts[1] 第二個用戶往交易所存入 50 E
    await exchage.depositEther({
        from: accounts[1],
        value: toWei(50)
    })

    //給第二個用戶 accounts[1] 交易所 授權(quán) 50000 GRTOKEN 就是我自己定義的token
    await grTokenDai.approve(exchage.address,toWei(50000),{
        from: accounts[1]
    })

    //第二個用戶 accounts[1] 通過交易所提供的 depositToken函數(shù) 存入50000 grToken
    await exchage.depositToken(grTokenDai.address,toWei(50000),{
        from: accounts[1]
    })

    //存儲訂單id
    let orderId = 0;
    //存儲創(chuàng)建訂單返回結(jié)果
    let res ;
    //調(diào)用交易所創(chuàng)建訂單  兩千 gr 對 0.2E 由第一個用戶發(fā)布
    res = await exchage.makeOrder(grTokenDai.address,toWei(2000), ETHER_ADDRESS ,toWei(0.2),{
        from: accounts[0]
    });
    //接收創(chuàng)建完成的訂單id
    orderId = res.logs[0].args.id
    //告訴我們訂單創(chuàng)建好了
    console.log("創(chuàng)建成功"+res.logs[0].args.id)
    //通過id取消訂單
    await exchage.cancelorder(orderId,{
        from: accounts[0]
    })
    console.log(orderId,"取消訂單成功")


    //調(diào)用交易所創(chuàng)建訂單  一千 gr 對 0.1E 由第一個用戶發(fā)布
    res = await exchage.makeOrder(grTokenDai.address,toWei(1000), ETHER_ADDRESS ,toWei(0.1),{
        from: accounts[0]
    });
    //接收創(chuàng)建完成的訂單id
    orderId = res.logs[0].args.id
    //告訴我們訂單創(chuàng)建好了
    console.log("創(chuàng)建成功"+res.logs[0].args.id)
    //利用用戶 accounts[1] 來完成這個訂單
    await exchage.fillorder(orderId,{from: accounts[1]})
    console.log("完成訂單")

    // 獲取第一個用戶在交易所中的E數(shù)值
    let res1 = await exchage.tokens(ETHER_ADDRESS,accounts[0])
    console.log(fromWei(res1)+":E");
    //獲取第一個用戶 在交易所中 grtoken的數(shù)量
    let res2 = await exchage.tokens(grTokenDai.address,accounts[0])
    console.log(fromWei(res2)+":grtoken");

    // 獲取第二個用戶在交易所中的E數(shù)值
    let res3 = await exchage.tokens(ETHER_ADDRESS,accounts[1])
    console.log(fromWei(res3)+":第二個用戶 E");
    // 獲取第二個用戶的 grtoken 并輸出
    let res4 = await exchage.tokens(grTokenDai.address,accounts[1])
    console.log(fromWei(res4)+":第二個用戶 grtoken");

    callback()
}

然后我們終端執(zhí)行

truffle exec .\scripts\test.js

嘗試運(yùn)行測試文件
運(yùn)行上也是沒有任何問題 那就OK了唄

但是 這不代表完全成功 大家可以嘗試一下 你用react組件嘗試導(dǎo)入 src目錄外的文件 是會報錯的
所以 我們還得想辦法將 build/contracts 內(nèi)的json拿到src里面來
但是 這里 我們不能手動移 因為之后你重新部署 他還是在那個位置
我們?nèi)绻€要每次發(fā)不完手動將文件夾放到src里面 那還不如不要給他們合在一起 每次去復(fù)制 abi 就好了

這里 我們需要研究一個問題 合約json的生成位置是誰配置的？
其實這些內(nèi)容 我們都是可以在 truffle-config.js 中配置的

我們加一個字段

"contracts_build_directory" : "./src/build"

指定他將編譯好的json 放到 當(dāng)前目錄下的 src下的 build 目錄下面

然后 我們重寫終端執(zhí)行

truffle migrate --reset

部署智能合約

此時 可以看到 我們的目錄就成功的生成出來了 里面的json也沒什么問題

那么 我們就可以將原來最外面的這個

build 直接給它干掉了 已經(jīng)沒用了

然后 我們用 App.js 引入一個json合約 并控制臺輸出一下內(nèi)容試試

然后 我們再次運(yùn)行項目 打開控制臺 你就會發(fā)現(xiàn) 這個json 內(nèi)容就被成功輸出在控制臺了
文章來源地址http://www.zghlxwxcb.cn/news/detail-728200.html

到了這里，關(guān)于WEB3 創(chuàng)建React前端Dapp環(huán)境并整合solidity項目，融合項目結(jié)構(gòu)便捷前端拿取合約 Abi的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！