Vue+web3.js+solidity+truffle开发以太坊区块链合约部署全过程！（注意：这里没有使用truffle-contract库调用智能合约）

灰太狼 2021-09-18 11:44 692阅读 0赞

### **运行代码的时候有一个注意事项：** ###

### **就是在调用deploy()方法部署合约的时候，会弹出Metamask付款，可能出现2个问题：** ###

**第一：你的gas不够，可以参考send方法的gas设置（我是设置默认，付款的时候，修改大点）**[http://cw.hubwiz.com/card/c/web3.js-1.0/1/4/6/][http_cw.hubwiz.com_card_c_web3.js-1.0_1_4_6]

**第二个问题：错误提示：Error: the tx doesn't have the correct nonce. account has nonce of: 0 tx has nonce of: 5"\}"**

意思就是你的发送账号操作太频繁了，你可以把此账号移除，换一个新账号付款即可！可以参考这篇文章：[https://yq.aliyun.com/articles/617053][https_yq.aliyun.com_articles_617053]

### **案例输出结果为：** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70][]

* 说明：Vue+truffle+web3.js(1.0版本)开发的以太坊区块链案例！
     * 注意：本案例中没有使用truffle-contract库调用智能合约！
     * 关于使用truffle-contract库与solidity智能合约交互的案例后续分享新版本！
    
    
    import Web3 from 'web3';
    // 导入FirstContract.sol智能合约的ABI编码数据！
    import first_contract_json from '@/truffle/build/contracts/FirstContract.json';
    
    
    class FirstContractWeb3 {
        constructor () {
            this.init_web3_1_0_version();
            this.initContract();
            // this.initContract_deploy();
        }
    
        
    // web3对象初始化(仅兼容web3.js 1.0版本)
        init_web3_1_0_version() {
            // 如果浏览器安装了Metamask钱包(如：谷歌、火狐),那么Web3.givenProvider等于Metamask
            // 如果浏览器没有安装或不支持Metamask,那么Web3.givenProvider等于null
            console.log("判断浏览器是否启用Metamask插件的对象Web3.givenProvider结果为：",Web3.givenProvider);
            this.web3 = new Web3(Web3.givenProvider || new Web3.providers.HttpProvider('http://127.0.0.1:8545'));
    
        }
    
        /**
         * 1、初始化web3.eth.Contract合约
         * 2、直接调用truffle手动部署成功的合约实例(合约地址)
         * 注意：from发送账户务必注意两点：1、必须存在于区块链上; 2、浏览器访问Metamask的账户必须是发送地址账户！
         */
        initContract () {
            // 基于原生的web3.eth.Contract对象来创建合约（调用合约的方法）
            let fist_contract = new this.web3.eth.Contract( first_contract_json.abi,
                '0xC5DF1c7cbd988293313e63826009c76dA3D362d1' );
    
            // 调用合约的只读方法，并在EVM中直接执行方法，不需要发送任何交易。因此不会改变合约的状态。
            fist_contract.methods.getInfo().call().then( ( result ) => {
                console.log( 'get已经执行了' );
                console.log( result );
            } );
            // 向合约发送交易来执行指定方法，将改变合约的状态(必须输入发送交易的账户地址,需要消耗gas)
            fist_contract.methods.setInfo( 'kirin2019', 18 ).send( { from: '0x88D9C6F37E10A4B8801a06979ad6f60D91bA0a52' } ).then( ( result ) => {
                console.log( 'set已经执行了' );
                console.log( result );
            } );
        }
    
        /**
         * 1、初始化web3.eth.Contract合约
         * 2、调用合约的deploy()方法将其自动部署到区块链上！
         * 注意：from发送账户务必注意两点：1、必须存在于区块链上; 2、浏览器访问Metamask的账户必须是发送地址账户！
         */
        initContract_deploy () {
            // 基于原生的web3.eth.Contract对象来创建合约（调用合约的方法）
            let fist_contract = new this.web3.eth.Contract( first_contract_json.abi );
    
            // 这里是程序部署合约,一旦合约部署成功,其返回的Promise对象,将在成功部署后解析为新的合约实例。
            fist_contract.deploy( {
                data: first_contract_json.bytecode,
            } ).send( {
                from: '0x88D9C6F37E10A4B8801a06979ad6f60D91bA0a52',
            } ).then( ( instance ) => {
                // 返回一个已经部署成功的合约实例！
                console.log( 'instance', instance );
                instance.methods.getInfo().call().then( ( result ) => {
                    console.log( 'get已经执行了' );
                    console.log( result );
                } ).catch( ( error ) => {
                    throw error;
                } );
                // 调用合约实例set方法
                instance.methods.setInfo( 'kirin2019', 18 ).send( { from: '0x88D9C6F37E10A4B8801a06979ad6f60D91bA0a52' } ).then( ( result ) => {
                    console.log( 'set已经执行了' );
                    console.log( result );
                } ).catch( ( error ) => {
                    throw error;
                } );
            });
        }
    }
    
    // 测试执行！
    let first_contract = new FirstContractWeb3();

[http_cw.hubwiz.com_card_c_web3.js-1.0_1_4_6]: http://cw.hubwiz.com/card/c/web3.js-1.0/1/4/6/
[https_yq.aliyun.com_articles_617053]: https://yq.aliyun.com/articles/617053
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzM0MzE0NA_size_16_color_FFFFFF_t_70]: /images/20210812/c037e01c6c4d4d0196c3b6d1b76cc4ce.png