Panduan untuk membangunkan kontrak pintar dan aplikasi blockchain menggunakan Vue.js dan JavaScript

Panduan untuk membangunkan kontrak pintar dan aplikasi blockchain menggunakan Vue.js dan JavaScript

Pengenalan:
Dengan pembangunan teknologi blockchain, Ethereum, sebagai platform kontrak pintar, menyediakan kemudahan yang hebat kepada pembangun. Vue.js, sebagai rangka kerja JavaScript yang popular, menyediakan pembangun dengan sokongan teknikal bahagian hadapan yang berkuasa. Artikel ini akan memberikan panduan tentang cara menggunakan Vue.js dan JavaScript untuk membangunkan kontrak pintar dan aplikasi blockchain, dengan contoh kod.

1. Persediaan alam sekitar
   Sebelum memulakan pembangunan, kita perlu memastikan persiapan persekitaran setempat telah selesai. Mula-mula, pasang Node.js dan npm (pengurus pakej Node.js), anda boleh memuat turun dan memasang versi terkini daripada tapak web rasmi. Kemudian, jalankan arahan berikut melalui alat baris arahan untuk mengesahkan bahawa pemasangan berjaya:

node -v
npm -v

2. Cipta projek Vue.js
   Kami akan menggunakan alat baris arahan Vue CLI untuk mencipta projek Vue.js baharu. Buka alat baris arahan dan jalankan arahan berikut:

npm install -g @vue/cli
vue create blockchain-app
cd blockchain-app

Arahan di atas akan memasang Vue CLI secara global dan mencipta projek Vue.js baharu dalam folder projek. Kemudian tukar ke folder projek.

3. Pasang web3.js
   Untuk berinteraksi dengan blockchain Ethereum, kita perlu menggunakan perpustakaan web3.js. Jalankan arahan berikut untuk memasang web3.js:

npm install web3

4. Sambung ke rantaian Ethereum
   Buat contoh web3 dalam Vuex untuk menyambung ke rantaian Ethereum. Buka fail src/store/index.js dan import web3 di bahagian atas fail: src/store/index.js文件，并在文件顶部导入web3：

import Web3 from 'web3';

然后，在Vuex的state中添加一个名为web3的属性，并将其设置为null：

state: {
  web3: null
},

接下来，在mutations中添加一个名为registerWeb3的方法，该方法将负责创建web3实例并将其存储在Vuex的state中：

mutations: {
  registerWeb3(state, payload) {
    state.web3 = payload.web3;
  }
},

最后，在actions中添加一个名为initWeb3的方法，该方法将负责连接到以太坊区块链并调用registerWeb3方法：

actions: {
  initWeb3({ commit }) {
    if (typeof web3 !== 'undefined') {
      web3 = new Web3(web3.currentProvider);
      commit('registerWeb3', { web3 });
    } else {
      console.error('No web3 provider detected');
    }
  }
},

5. 智能合约交互
   接下来，我们将在Vue组件中调用智能合约的方法并与以太坊区块链进行交互。在Vue组件中创建一个名为contract的属性，并在created生命周期钩子中调用智能合约的方法：

import contractABI from '@/contracts/ContractABI.json';
import contractAddress from '@/contracts/ContractAddress.json';

export default {
  data() {
    return {
      contract: null
    };
  },
  created() {
    this.contract = new web3.eth.Contract(contractABI, contractAddress);
  },
  methods: {
    async getContractData() {
      const result = await this.contract.methods.getData().call();
      console.log(result);
    },
    async setContractData() {
      await this.contract.methods.setData('Hello, blockchain!').send({ from: web3.eth.defaultAccount });
      console.log('Transaction completed');
    }
  }
}

在上述代码中，我们首先导入智能合约的ABI（Application Binary Interface）和地址。然后，在created生命周期钩子中，我们使用这些信息创建一个新的智能合约实例。

在Vue组件的methods中，我们定义了两个方法：getContractData和setContractData，用于调用智能合约的方法并与以太坊区块链进行交互。

6. 代码示例
   最后，我们在Vue组件的模板中使用按钮来调用智能合约的方法。编辑src/views/Home.vue文件并添加以下代码：

<template>
  <div>
    <button @click="getContractData">Get Data</button>
    <button @click="setContractData">Set Data</button>
  </div>
</template>

以上代码在Vue组件的模板中添加了两个按钮，分别调用getContractData和setContractData

// src/store/index.js
import Web3 from 'web3';

export default {
  state: {
    web3: null
  },
  mutations: {
    registerWeb3(state, payload) {
      state.web3 = payload.web3;
    }
  },
  actions: {
    initWeb3({ commit }) {
      if (typeof web3 !== 'undefined') {
        web3 = new Web3(web3.currentProvider);
        commit('registerWeb3', { web3 });
      } else {
        console.error('No web3 provider detected');
      }
    }
  }
}

Kemudian, tambahkan fail bernama web3 dalam <code>stateVuex > 's property dan tetapkannya kepada null:

// src/views/Home.vue
import contractABI from '@/contracts/ContractABI.json';
import contractAddress from '@/contracts/ContractAddress.json';

export default {
  data() {
    return {
      contract: null
    };
  },
  created() {
    this.contract = new web3.eth.Contract(contractABI, contractAddress);
  },
  methods: {
    async getContractData() {
      const result = await this.contract.methods.getData().call();
      console.log(result);
    },
    async setContractData() {
      await this.contract.methods.setData('Hello, blockchain!').send({ from: web3.eth.defaultAccount });
      console.log('Transaction completed');
    }
  }
}

Seterusnya, tambahkan kaedah bernama registerWeb3 dalam mutation, yang akan bertanggungjawab untuk mencipta contoh web3 dan simpannya dalam state Vuex:

rrreee

Akhir sekali, tambahkan kaedah yang dipanggil initWeb3 dalam actions, yang Kaedah ini akan bertanggungjawab untuk menyambung ke blockchain Ethereum dan memanggil kaedah registerWeb3:

rrreee

Interaksi Kontrak Pintar🎜Seterusnya, kami akan memanggil kontrak pintar dalam kaedah komponen Vue dan berinteraksi dengan blockchain Ethereum. Buat sifat bernama contract dalam komponen Vue, dan panggil kaedah kontrak pintar dalam cangkuk kitaran hayat dicipta: 🎜🎜rrreee🎜Dalam kod di atas, kami terlebih dahulu Import ABI (Antara Muka Binari Aplikasi) dan alamat kontrak pintar. Kemudian, dalam cangkuk kitar hayat dibuat, kami menggunakan maklumat ini untuk mencipta contoh kontrak pintar baharu. 🎜🎜Dalam kaedah komponen Vue, kami mentakrifkan dua kaedah: getContractData dan setContractData, yang digunakan untuk memanggil kaedah kontrak pintar dan berinteraksi dengan mereka. 🎜
🎜Contoh kod🎜Akhir sekali, kami menggunakan butang dalam templat komponen Vue untuk memanggil kaedah kontrak pintar. Edit fail src/views/Home.vue dan tambahkan kod berikut: 🎜🎜rrreee🎜Kod di atas menambah dua butang pada templat komponen Vue, memanggil getContractData dan kaedah setContractData. 🎜🎜Ringkasan: 🎜Artikel ini memperkenalkan panduan untuk membangunkan kontrak pintar dan aplikasi blockchain menggunakan Vue.js dan JavaScript. Kami mula-mula menyediakan persekitaran pembangunan dan mencipta projek Vue.js baharu. Kemudian, sambungkan ke blockchain Ethereum melalui perpustakaan web3.js, dan hubungi kaedah kontrak pintar dalam komponen Vue dan berinteraksi dengan blockchain. Melalui panduan ini, pembangun sudah mempunyai pengetahuan dan kemahiran asas untuk membangunkan kontrak pintar dan aplikasi blockchain menggunakan Vue.js dan JavaScript. 🎜🎜Lampiran: Contoh kod lengkap🎜rrreeerrreee🎜Saya harap artikel ini akan membantu pemula yang menggunakan Vue.js dan JavaScript untuk membangunkan kontrak pintar dan aplikasi blockchain. Pembelajaran dan pembangunan selanjutnya boleh dijalankan mengikut keperluan sebenar. 🎜

Atas ialah kandungan terperinci Panduan untuk membangunkan kontrak pintar dan aplikasi blockchain menggunakan Vue.js dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!