天天看點
傳回

将 Web3 內建到 Vue 應用程式中

借助 Web3，可以在區塊鍊網絡上建構去中心化應用程式，讓使用者完全擁有自己的資料。區塊鍊網絡使用智能合約來處理去中心化應用程式的所有後端邏輯。

作為最受歡迎的可程式設計區塊鍊網絡[1]，以太坊允許開發人員建構和操作去中心化應用程式 (DApp)、去中心化金融 (DeFi)、智能合約和不可替代代币 (NFT)。

在本文中，我們将介紹在 Vue 應用程式中使用 Web3 的基礎知識，包括安裝過程和與智能合約的互動。要繼續閱讀本文，您需要以下内容：

  • • 對 Vue CLI 的了解
  • • Web3的基本了解[2]
  • • 熟悉 Solidity 智能合約以及如何部署它們的知識

什麼是 Web3？

Web3是基于區塊鍊技術的新一代網際網路，提倡去中心化和基于代币的經濟。調用智能合約和發送交易構成了區塊鍊網絡上的大部分互動。

什麼是智能合約？

智能合約是一種存在于區塊鍊網絡上的自動執行計算機軟體。區塊鍊在部署後立即執行智能合約。當合約被執行時，它會建立 DApp 用來擴充其功能的接口。

考慮以下簡單的 Solidity 智能合約：

// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.8.0;

contract Contract {
    string private text;

    function speak() public view returns (string memory) {
        return text;
    }

    function changeText(string memory newText) public {
        text = newText;
    }
}

當您将上面的合約部署到區塊鍊網絡時，它會建立兩個接口方法，speak傳回文本字元串，以及changeText更改speak傳回的字元串。

項目設定

如果您已經準備好內建的 Vue 項目，則可以跳過本節。如果不這樣做，請使用以下指令為 npx 包管理器建立項目：

npx vue create web3-project

如果您使用 Yarn 包管理器，請改用以下指令：

yarn vue create web3-project

在菜單提示中，選擇Vue3或Vue2。選擇哪一個并不重要，因為您可以以相同的方式将 Web3 內建到它們中。建立項目後，在您的App.vue檔案中編寫以下代碼：

<template>
  <div>
    <!-- connect-wallet button is visible if the wallet is not connected -->
  <button v-if="!connected">Connect wallet</button>
    <!-- call-contract button is visible if the wallet is connected -->
    <button v-if="connected">Call contract</button>
    {{ contractResult }}
  </div>
</template>

<script>

export default {
  name: 'App',

  data() {
    return {
      connected: false,
      contractResult: '',
    }
  },
}
</script>

在App.vue中，我們有兩個按鈕；第一個用于連接配接錢包，第二個用于調用智能合約方法。

在使用者将他們的錢包連接配接到 Web 應用程式之前，call contract按鈕是隐藏的。我們的應用程式使用connected狀态變量來儲存錢包連接配接狀态。

設定 Web3

在您的項目目錄中，運作以下指令以使用 npm 安裝 Web3 包：

npm install web3

如果您使用的是 Yarn，請運作以下指令：

yarn add web3

安裝完包後，我們将Web3導入到App.vue檔案中，運作項目來測試一下它的相容性：

...
<script>
import Web3 from 'web3'
export default {
  name: 'App',
…

如果您沒有收到除Web3 is imported but never used 之外的任何錯誤消息，則 Web3 與您的架構相容。但是，如果架構産生其他錯誤，您必須切換到舊版本的 Vue。Vue 3 使用的 Webpack 5 子產品會出現Web3相容性問題。[3]

連接配接我們的錢包

MetaMask 是一個允許使用者存儲錢包并将其連接配接[4]到 Web3 應用程式的應用程式。Metamask 可以安裝在所有主流浏覽器中。通過将錢包連接配接到網站，使用者可以執行以下操作：

  • • 在網站上買賣代币
  • • 管理區塊鍊網絡上的數字資産
  • • 對網站上的帳戶進行交易
  • • 與區塊鍊網絡上的智能合約互動

當您在浏覽器中安裝 MetaMask 擴充時，該擴充會建立一個window.ethereum對象。Web3 應用程式使用window.ethereum對象通路使用者的錢包并連接配接到以太坊網絡。

window.ethereum.request()方法提示使用者連接配接他們的 MetaMask 錢包：

ethereum.request({ method: 'eth_requestAccounts' })

我們可以使用此提示将錢包連接配接事件注冊到我們的connect wallet按鈕。将以下代碼添加到您的App.vue檔案中：

<template>
  <div>
    <!-- "connect" click event is registered -->
    <button v-if="!connected" @click="connect">Connect wallet</button>
    <button v-if="connected">Call contract</button>
    {{ contractResult }}
  </div>
</template>

<script>
export default {
  name: 'App',

  data() {
    return {
      connected: false,
      contractResult: '',
    }
  },

  methods: {

    connect: function () {
        // this connects to the wallet
      
      if (window.ethereum) { // first we check if metamask is installed
        window.ethereum.request({ method: 'eth_requestAccounts' })
          .then(() => {
            this.connected = true; // If users successfully connected their wallet
          });
      }
    }
  }
}
</script>

當使用者點選連接配接錢包按鈕時，會出現一個MetaMask提示，允許使用者選擇他們想要連接配接的賬戶。在使用者連接配接他們的錢包後，App.vue檔案中的connected狀态變量變為true。

與已部署的智能合約互動

部署的智能合約建立了 Web3 應用程式與之互動的接口。要通路這些接口，我們需要向 Web3 提供 ABI、智能合約接口的描述以及合約位址，即合約在以太坊網絡上的位置。

在寫這篇文章之前，我在Rinkeby 測試網絡[5]上部署了一個智能合約。我将在以下示例中使用它的 ABI 和位址，但如果您已經部署了智能合約，則可以使用該合約的位址和 ABI，而不是此處包含的那些。

要與已部署的合約互動，請使用window.ethereum對象建立一個 Web3 執行個體：

let web3 = new Web3(window.ethereum);

然後，使用其 ABI 和位址建立對已部署合約的引用：

let contract = new web3.eth.Contract(abi, contractAddress)

初始化合約後，您可以與之互動。如果合約有一個名為 greet的接口方法，我們使用下面的代碼調用它：

contract.methods.greet().call()

現在，我們将修改call contract按鈕以使用greet您部署的合約的方法調用合約：

<!-- vue -->
<button v-if="connected" @click="callContract">Call contract</button>

接下來，在Vue對象中建立一個call contract按鈕的callContract方法。

callContract: function () {
  // method for calling the contract method
  let web3 = new Web3(window.ethereum);
  let contractAddress = '0xC0B2D76aB95B7E31E241ce713ea1C72d0a50588e';

  let abi = JSON.parse(`[{"inputs": [],"stateMutability": "nonpayable","type": "constructor"},{"inputs": [],"name": "greet","outputs": [{"internalType": "string","name": "","type": "string"}],"stateMutability": "view","type": "function"}]`);


  let contract = new web3.eth.Contract(abi, contractAddress);

  contract.methods.greet().call()
    .then(result => this.contractResult = result);
}

該callContract方法将被注冊為按鈕的點選事件，并在部署的智能合約中調用greet方法：

<template>
  <div>
    <button v-if="!connected" @click="connect">Connect wallet</button>

    <!-- "callContract" event handler is added -->
>    <button v-if="connected" @click="callContract">Call contract</button>

    <!-- displays the result of the contract -->
    {{ contractResult }}
  </div>
</template>

<script>
import Web3 from 'web3'

export default {
  name: 'App',

  data() {
    return {
      connected: false,
      contractResult: '',
    }
  },

  methods: {

    connect: function () {
      let ethereum = window.ethereum;
      if (ethereum) {
      ethereum.request({ method: 'eth_requestAccounts' })
       .then(() => {
            this.connected = true;
          });
      }
    },

   callContract: function () {
       // method for calling the contract method
      let web3 = new Web3(window.ethereum);
      let contractAddress = '0xC0B2D76aB95B7E31E241ce713ea1C72d0a50588e';

      let abi = JSON.parse(`[{"inputs": [],"stateMutability": "nonpayable","type": "constructor"},{"inputs": [],"name": "greet","outputs": [{"internalType": "string","name": "","type": "string"}],"stateMutability": "view","type": "function"}]`);


      let contract = new web3.eth.Contract(abi, contractAddress);

      contract.methods.greet().call()
        .then(result => this.contractResult = result);
    }

  }
}
</script>

使用者連接配接錢包并調用合約後，應用程式應如下圖所示：

将 Web3 內建到 Vue 應用程式中

結論

在本文中，我們學習了如何使用 Vue 建立一個使用以太坊區塊鍊網絡的 Web3 應用程式，連接配接一個 MetaMask 錢包，并與智能合約進行互動。如您所見，隻要您熟悉 Solidity，将 Web3 內建到 Vue 應用程式中是相當簡單的。Web3 為隐私和資料所有權帶來了重大好處，我們探索了構成這一過程的一些工具和概念，例如智能合約。

引用連結

[1] 可程式設計區塊鍊網絡: https://blog.logrocket.com/deploy-ethereum-smart-contracts-cosmos-ecosystem/

[2] 了解: https://blog.logrocket.com/solidity-javascript-web3-blockchain-applications/#what-web3-programming

[3] 相容性問題。: https://stackoverflow.com/questions/71245845/error-webpack-5-after-installing-web3-and-implementing-into-react-native-app

[4] 允許使用者存儲錢包并将其連接配接: https://blog.logrocket.com/understanding-resolving-metamask-error-codes/

[5] 在寫這篇文章之前，我在Rinkeby 測試網絡: https://www.rinkeby.io/#stats

應用程式
上一篇: QT開發中延時的幾種處理方法
下一篇: Ubuntu桌面版22.04安裝百度網盤圖解

繼續閱讀