以太坊智能合約開發第七篇：智能合約與網頁交互

時間 2019-11-19

標籤以太智能合約開發第七網頁交互欄目 HTML 简体版

原文原文鏈接

原文發表於：以太坊智能合約開發第七篇：智能合約與網頁交互javascript

上一篇中，咱們經過truffle開發框架快速編譯部署了合約。本篇，咱們未來介紹網頁如何與智能合約進行交互。css

編寫網頁

首先咱們須要編寫一個網頁。打開 smartcontract/app/index.html 文件，修改 head 區代碼以下：html

<head>
  <title>Hello - Truffle</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- 可選的 Bootstrap 主題文件（通常不用引入） -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="./app.js"></script>
</head>

修改 body 區代碼以下：前端

<body>
  <div class="alert alert-success" role="alert" style="display:none;" id="message-box"></div>
  <div class="form-group">
    <input type="text" class="form-control" id="username" aria-describedby="basic-addon1">
  </div>
  <button type="submit" id="submit" class="btn btn-success">調用合約</button>
  <button type="submit" id="cancel" class="btn btn-default">重置</button>
</body>

網頁呈現效果以下圖： java

修改啓動腳本

smartcontract/app/javascripts/app.js 腳本文件是智能合約與網頁交互的核心，修改代碼以下：jquery

//導入CSS
import "../stylesheets/app.css";
//導入web3和truffle-contract庫
import { default as Web3} from 'web3';
import { default as contract } from 'truffle-contract'

//導入Hello合約的ABI文件
import Hello_artifacts from '../../build/contracts/Hello.json'
//獲取Hello合約對象
var HelloContract = contract(Hello_artifacts);

window.App = {
  init: function() {
    //設置web3鏈接
    HelloContract.setProvider(web3.currentProvider);
  },

  //封裝合約中的say()方法調用過程，供javascript調用
  say: function(name, callback){
    //instance爲Hello合約部署實例
    HelloContract.deployed().then(function(instance){
      //調用Hello合約中的say()方法，並傳入參數name
      instance.say.call(name).then(function(result){
        //將返回結果傳入回調函數
        callback(null, result);
      });
    }).catch(function(e){
      console.log(e, null);
    });
  }
};

window.addEventListener('load', function() {
  //設置web3鏈接  http://127.0.0.1:7545 爲Ganache提供的節點連接
  window.web3 = new Web3(new Web3.providers.HttpProvider("http://127.0.0.1:7545"));
  App.init();
});

前面的篇幅中，咱們提到過 web3模塊是以太坊提供的工具包，主要用於與合約的通訊。從上面的代碼中，咱們能夠看到，經過Hello合約的ABI文件獲取到合約對象以後，再配合web3工具，就能夠與Hello合約進行通訊了。其中 App.say() 是對Hello合約中say()方法的調用過程進行了封裝，方便前端代碼進行調用。webpack

智能合約與網頁交互

啓動腳本修改完了以後，就須要與網頁進行整合。咱們再返過來繼續修改 smartcontract/app/index.html 文件。在文件末尾添加以下交互代碼：web

<script>
  $(document).ready(function(){
      $('#submit').on('click', function(){
          var username = $('#username').val();
          if(typeof username == 'undefined' || username == false){
              alert('不能爲空');
          }else {
          	  //調用App的say()方法
              window.App.say(username, function (err, result) {
                  if(err){
                      alert(err);
                  }else {
                      $('#username').val(username);
                      $('#message-box').html(result);
                      $('#message-box').show();
                  }
              });
          }
      });
      $('#cancel').on('click', function(){
          $('#username').val('');
          $('#message-box').hide();
          $('#message-box').html('');
      });
  });
</script>

接下來，就是見證奇蹟的時刻。在 smartcontract 目錄下執行 npm run dev ： npm

注意圖中標識的部分。***http://locahost:8083 *** 爲網頁訪問地址（每一個人運行的端口號可能不同）。咱們也能看出，truffle開發框架集成了 webpack 工具，對網頁中包含的靜態資源文件進行了打包。json

最後，咱們經過瀏覽器打開 ***http://locahost:8083 *** 來測試下效果：

至此，一個簡單的Dapp應用示例就此完成了。咱們也熟練掌握了經過truffle開發框架編寫合約代碼、快速編譯部署、構建Dapp的整個過程。

個人專欄：智能合約智能合約開發QQ羣：753778670