提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

以太坊 – 智能合约前端页面

前端智能 页面 合约 以太
2023-09-14 09:15:22 时间

  🍁博主简介：
        🏅云计算领域优质创作者
        🏅2022年CSDN新星计划python赛道第一名

        🏅2022年CSDN原力计划优质作者
        🏅阿里云ACE认证高级工程师
        🏅阿里云开发者社区专家博主

💊交流社区：CSDN云计算交流社区欢迎您的加入！

​​​​​​​

目录

1. 智能合约前端页面

2. 配置web服务器

3. 创建前端页面

3.1 index.html

3.2 app.js

1. 智能合约前端页面

开发智能合约的前端页面，让用户可以通过前端页面与智能合约交互。这个页面的主要功能是：

  • 显示当前连接的帐户
  • 读取智能合约中存储的value值
  • 更新智能合约中存储的value值

页面大概的样子：

为开发前端页面，需要完成下面几项工作:

  • 配置web服务器，用来部署页面
  • 创建前端的h5、js文件

2. 配置web服务器

首先，让我们来配置web服务器。服务器使用lite-server，安装lite-server:

$ npm install lite-server --save-dev

项目根目录下，创建lite-server的配置文件bs-config.json，内容如下：

{
  "server": {
    "baseDir": [
      "./src",
      "./build/contracts"
    ],
    "routes": {
      "/vendor": "./node_modules"
    }
  }
}
  • baseDir配置告诉lite-server将./src和./build/contracts目录作为web服务器的根目录，所有文件都可以被访问
  • routes把./node_modules映射为/vendor，在引用文件时，可以使用/vendor

3. 创建前端页面

项目根目录下，创建src目录，用于存放前端页面。

前端页面包含2个文件：

src/index.html
src/app.js

3.1 index.html

添加index.html页面，内容如下：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>以太坊 DApp Demo</title>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
      <h1>账号: <span id="account"></span></h1>
      <hr>
      <div id="content">
          <h2>智能合约：MyContract</b></h2>
          <p>获取智能合约中的value值: <span id="value"></span></p>

            <h5>设置value值</h5>
            <form onSubmit="App.set(); return false;" role="form">
            <div >
                <input id="newValue" type="text"></input>
            </div>
            <button type="submit" >设置</button>
            </form>
      </div>
      <div id="loader">正在加载...</div>


    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://etherscan.io/jss/web3.min.js"></script>
    <script src="vendor/@truffle/contract/dist/truffle-contract.js"></script>
    <script src="app.js"></script>
  </body>
</html>

这个文件的重点是引入了几个js文件：

  • web3.min.js – web3.js库文件，直接从https://etherscan.io/引入
  • truffle-contract.js – truffle提供的处理智能合约的库文件

安装@truffle/contract

$ npm install @truffle/contract --save-dev

3.2 app.js

添加javascript脚本文件：app.js

App = {
    web3Provider: null,
    contracts: {},
    account: '0x0',
    loading: false,
    contractInstance: null,

    init: async () => {
        // 加载web3
        await App.loadWeb3()
        // 加载智能合约
        await App.loadContract()
        // 网页刷新
        await App.render()
    },

    // https://medium.com/metamask/https-medium-com-metamask-breaking-change-injecting-web3-7722797916a8
    loadWeb3: async () => {
        if (typeof web3 !== 'undefined') {
            App.web3Provider = web3.currentProvider
            web3 = new Web3(web3.currentProvider)
        } else {
            window.alert("Please connect to Metamask.")
        }
        // MetaMask新版本…
        if (window.ethereum) {
            window.web3 = new Web3(ethereum)
            try {
                // 向用户请求帐户访问
                await ethereum.enable()
                // 用户允许使用账户
                web3.eth.sendTransaction({/* ... */ })
            } catch (error) {
                // 用户拒绝使用账户
            }
        }
        // MetaMask老版本…
        else if (window.web3) {
            App.web3Provider = web3.currentProvider
            window.web3 = new Web3(web3.currentProvider)
            // 无需向用户请求，可以直接使用账号
            web3.eth.sendTransaction({/* ... */ })
        }
        // 没有安装以太坊钱包插件(MetaMask)...
        else {
            console.log('需要安装以太坊钱包插件(例如MetaMask)才能使用!')
        }
    },

    loadContract: async () => {
        const contract = await $.getJSON('MyContract.json')
        App.contracts.MyContract = TruffleContract(contract)
        App.contracts.MyContract.setProvider(App.web3Provider)
    },

    render: async () => {
        // 如果正在加载，直接返回，避免重复操作
        if (App.loading) {
            return
        }

        // 更新app加载状态
        App.setLoading(true)

        // 设置当前区块链帐户
        const accounts = await ethereum.enable()
        App.account = accounts[0]
        $('#account').html(App.account)

        // 加载智能合约
        const contract = await App.contracts.MyContract.deployed()
        App.contractInstance = contract

        const value = await App.contractInstance.get()
        $('#value').html(value)

        App.setLoading(false)
    },

    set: async () => {
        App.setLoading(true)

        const newValue = $('#newValue').val()

        await App.contractInstance.set(newValue, {from: App.account})
        window.alert('更新成功，页面值不会马上更新，等待几秒后多刷新几次。')
        App.setLoading(false)
    },

    setLoading: (boolean) => {
        App.loading = boolean
        const loader = $('#loader')
        const content = $('#content')
        if (boolean) {
            loader.show()
            content.hide()
        } else {
            loader.hide()
            content.show()
        }
    }
}

$(document).ready(function () {
    App.init()
});

在上面的代码中：

  • loadWeb3()函数添加了用Metamask将web浏览器连接到区块链所需的配置。这是直接从Metamask的配置规范中复制粘贴的，如函数上面代码注释中的url所示。
  • loadContract()函数使用TruffleContract库创建智能合约的javascript对象，可以用于调用智能合约中的函数。
  • render()函数设置页面内容，包括帐户及智能合约的value值。

现在启动服务器：

$ npm run dev

然后使用安装了MetaMask插件的Chrome浏览器，打开网址：http://localhost:3000，就可以查看前端页面，与区块链上的智能合约进行交互。

相关文章