Petua dan amalan terbaik untuk menulis kontrak pintar dan aplikasi terdesentralisasi menggunakan Vue.js dan JavaScript

Petua dan amalan terbaik untuk menulis kontrak pintar dan aplikasi terdesentralisasi menggunakan Vue.js dan JavaScript

Pengenalan:
Kontrak pintar dan aplikasi terdesentralisasi (DApps) adalah bahagian penting dalam teknologi blockchain. Vue.js ialah rangka kerja JavaScript popular yang menyediakan pembangunan boleh guna semula dan berasaskan komponen. Artikel ini akan memperkenalkan petua dan amalan terbaik untuk menulis kontrak pintar dan aplikasi terdesentralisasi menggunakan Vue.js dan JavaScript, serta menyediakan contoh kod yang berkaitan.

1. Kemahiran pembangunan kontrak pintar:

1. Gunakan Web3.js untuk berinteraksi dengan kontrak pintar
   Web3.js ialah perpustakaan JavaScript yang digunakan untuk berinteraksi dengan rangkaian Ethereum. Ia menyediakan satu set kaedah untuk menyambung kepada kontrak pintar dan menggunakan kaedah yang ditakrifkan dalam kontrak. Berikut ialah contoh kod untuk berinteraksi dengan kontrak pintar menggunakan Web3.js:

import Web3 from 'web3';
const web3 = new Web3('https://ropsten.infura.io/v3/YOUR_INFURA_PROJECT_ID');

const contractAddress = '0x1234567890abcdef1234567890abcdef12345678';
const contractABI = [{"constant": true,"inputs": [],"name": "getData","outputs": [{"name": "","type": "uint256"}],"payable": false,"stateMutability": "view","type": "function"},{"constant": false,"inputs": [{"name": "_data","type": "uint256"}],"name": "setData","outputs": [],"payable": false,"stateMutability": "nonpayable","type": "function"}];

const contractInstance = new web3.eth.Contract(contractABI, contractAddress);

// 调用智能合约中的方法
contractInstance.methods.getData().call()
  .then(result => {
    console.log("Data:", result);
  })
  .catch(error => {
    console.error(error);
  });

2. Pembangunan dan penggunaan kontrak pintar menggunakan rangka kerja Truffle
   Truffle ialah rangka kerja pembangunan untuk pembangunan dan penggunaan kontrak pintar. Ia menyediakan satu set alat yang memudahkan penyusunan kontrak, ujian dan penggunaan. Berikut ialah langkah-langkah untuk pembangunan kontrak pintar menggunakan rangka kerja Truffle:

• Pasang rangka kerja Truffle:

npm install -g truffle

• Buat projek Truffle baharu:

mkdir my-project
cd my-project
truffle init

• Tulis kontrak pintar adalah (contohnya, tulis kontrak pintar MainContract.sol):

pragma solidity ^0.8.0;

contract MainContract {
    uint256 public data;

    function setData(uint256 _data) public {
        data = _data;
    }

    function getData() public view returns (uint256) {
        return data;
    }
}

• Susun dan gunakan kontrak pintar:

truffle compile
truffle migrate --network YOUR_NETWORK

3. Gunakan rangka kerja ujian untuk ujian kontrak pintar
   Menguji kontrak pintar ialah cara penting untuk memastikan kefungsian normal kontrak dalam senario yang berbeza. Rangka kerja Truffle menyediakan satu set alat ujian untuk memudahkan proses ujian kontrak pintar. Berikut ialah contoh kod untuk ujian kontrak pintar menggunakan rangka kerja Truffle:

const MainContract = artifacts.require('MainContract');

contract('MainContract', (accounts) => {
  let mainContractInstance;

  before(async () => {
    mainContractInstance = await MainContract.deployed();
  });

  it('should set and get data correctly', async () => {
    const testData = 100;

    await mainContractInstance.setData(testData);

    const result = await mainContractInstance.getData();

    assert.equal(result, testData, 'Data is not set correctly');
  });
});

2. Kemahiran pembangunan DApp:

1. Membangunkan antara muka pengguna menggunakan Vue.js
   Vue.js ialah rangka kerja JavaScript untuk membina antara muka pengguna kaedah pembangunan boleh gubah dan boleh guna semula. Menggunakan Vue.js anda boleh membina antara muka pengguna DApp dengan mudah dan berinteraksi dengan kontrak pintar. Berikut ialah contoh kod untuk membangunkan DApp menggunakan Vue.js:

<template>
  <div>
    <label>Data:</label>
    <span>{{ data }}</span>
    <br>
    <input type="number" v-model="newData">
    <button @click="setData">Set Data</button>
  </div>
</template>

<script>
import Web3 from 'web3';

export default {
  data() {
    return {
      data: 0,
      newData: 0,
      contractInstance: null
    };
  },
  mounted() {
    const web3 = new Web3('https://ropsten.infura.io/v3/YOUR_INFURA_PROJECT_ID');
    const contractAddress = '0x1234567890abcdef1234567890abcdef12345678';
    const contractABI = [{"constant": true,"inputs": [],"name": "getData","outputs": [{"name": "","type": "uint256"}],"payable": false,"stateMutability": "view","type": "function"},{"constant": false,"inputs": [{"name": "_data","type": "uint256"}],"name": "setData","outputs": [],"payable": false,"stateMutability": "nonpayable","type": "function"}];

    this.contractInstance = new web3.eth.Contract(contractABI, contractAddress);

    this.getData();
  },
  methods: {
    getData() {
      this.contractInstance.methods.getData().call()
        .then(result => {
          this.data = result;
        })
        .catch(error => {
          console.error(error);
        });
    },
    setData() {
      this.contractInstance.methods.setData(this.newData).send()
        .then(() => {
          this.getData();
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

2. Menggunakan Metamask untuk pengesahan pengguna dan menandatangani transaksi
   Metamask ialah pemalam dompet Ethereum popular yang menyediakan fungsi untuk pengesahan pengguna dan menandatangani transaksi. Metamask boleh disepadukan dengan DApps untuk memastikan bahawa hanya pengguna dengan kebenaran yang betul boleh melakukan interaksi kontrak. Berikut ialah contoh kod menggunakan Metamask untuk pengesahan pengguna dan menandatangani transaksi:

import Web3 from 'web3';

export default {
  data() {
    return {
      web3: null,
      accounts: [],
      contractInstance: null
    };
  },
  mounted() {
    this.initWeb3();
  },
  methods: {
    async initWeb3() {
      // 检查是否已经安装Metamask
      if (typeof window.ethereum !== 'undefined') {
        this.web3 = new Web3(window.ethereum);

        // 请求用户授权
        await window.ethereum.enable();

        this.getAccounts();
        this.initContractInstance();
      } else {
        console.error('Please install MetaMask');
      }
    },
    async getAccounts() {
      this.accounts = await this.web3.eth.getAccounts();
    },
    initContractInstance() {
      const contractAddress = '0x1234567890abcdef1234567890abcdef12345678';
      const contractABI = [{"constant": true,"inputs": [],"name": "getData","outputs": [{"name": "","type": "uint256"}],"payable": false,"stateMutability": "view","type": "function"},{"constant": false,"inputs": [{"name": "_data","type": "uint256"}],"name": "setData","outputs": [],"payable": false,"stateMutability": "nonpayable","type": "function"}];

      this.contractInstance = new this.web3.eth.Contract(contractABI, contractAddress);
    },
    async setData(newData) {
      const gasPrice = await this.web3.eth.getGasPrice();
      const gasLimit = 300000;

      await this.contractInstance.methods.setData(newData).send({
        from: this.accounts[0],
        gas: gasLimit,
        gasPrice: gasPrice
      });

      this.getData();
    }
  }
};

Ringkasan:
Artikel ini memperkenalkan petua dan amalan terbaik untuk menulis kontrak pintar dan aplikasi terpencar menggunakan Vue.js dan JavaScript. Lebih mudah untuk membangun dan Menggunakan kontrak pintar dan aplikasi terdesentralisasi.

(Contoh kod adalah untuk rujukan sahaja, sila ubah suai dan laraskan dengan sewajarnya mengikut keperluan sebenar.)

Atas ialah kandungan terperinci Petua dan amalan terbaik untuk menulis kontrak pintar dan aplikasi terdesentralisasi menggunakan Vue.js dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!