使用Vue.js和JavaScript编写智能合约和去中心化应用的技巧和最佳实践

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);  });

npm install -g truffle

mkdir my-projectcd my-projecttruffle init

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;    }}

truffle compiletruffle migrate --network YOUR_NETWORK

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');  });});

<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>

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();    }  }};