以太坊智能合約開發(fā)第七篇：智能合約與網(wǎng)頁交互

sherlock221 發(fā)布于2019-06-27 18:23 / 3667人閱讀

摘要：原文發(fā)表于以太坊智能合約開發(fā)第七篇智能合約與網(wǎng)頁交互上一篇中，我們通過開發(fā)框架快速編譯部署了合約。智能合約與網(wǎng)頁交互啟動腳本修改完了之后，就需要與網(wǎng)頁進行整合。

原文發(fā)表于：以太坊智能合約開發(fā)第七篇：智能合約與網(wǎng)頁交互

上一篇中，我們通過truffle開發(fā)框架快速編譯部署了合約。本篇，我們將來介紹網(wǎng)頁如何與智能合約進行交互。

編寫網(wǎng)頁

首先我們需要編寫一個網(wǎng)頁。打開 smartcontract/app/index.html 文件，修改 head 區(qū)代碼如下：


  Hello - Truffle

修改 body 區(qū)代碼如下：

網(wǎng)頁呈現(xiàn)效果如下圖：

修改啟動腳本

smartcontract/app/javascripts/app.js 腳本文件是智能合約與網(wǎng)頁交互的核心，修改代碼如下：

//導(dǎo)入CSS
import "../stylesheets/app.css";
//導(dǎo)入web3和truffle-contract庫
import { default as Web3} from "web3";
import { default as contract } from "truffle-contract"

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

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

  //封裝合約中的say()方法調(diào)用過程，供javascript調(diào)用
  say: function(name, callback){
    //instance為Hello合約部署實例
    HelloContract.deployed().then(function(instance){
      //調(diào)用Hello合約中的say()方法，并傳入?yún)?shù)name
      instance.say.call(name).then(function(result){
        //將返回結(jié)果傳入回調(diào)函數(shù)
        callback(null, result);
      });
    }).catch(function(e){
      console.log(e, null);
    });
  }
};

window.addEventListener("load", function() {
  //設(shè)置web3連接  http://127.0.0.1:7545 為Ganache提供的節(jié)點鏈接
  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()方法的調(diào)用過程進行了封裝，方便前端代碼進行調(diào)用。

智能合約與網(wǎng)頁交互

啟動腳本修改完了之后，就需要與網(wǎng)頁進行整合。我們再返過來繼續(xù)修改 smartcontract/app/index.html 文件。在文件末尾添加如下交互代碼：

接下來，就是見證奇跡的時刻。
在 smartcontract 目錄下執(zhí)行 npm run dev ：

注意圖中標識的部分。http://locahost:8083 為網(wǎng)頁訪問地址（每個人運行的端口號可能不一樣）。我們也能看出，truffle開發(fā)框架集成了 webpack 工具，對網(wǎng)頁中包含的靜態(tài)資源文件進行了打包。

最后，我們通過瀏覽器打開 http://locahost:8083 來測試下效果：

至此，一個簡單的Dapp應(yīng)用示例就此完成了。我們也熟練掌握了通過truffle開發(fā)框架編寫合約代碼、快速編譯部署、構(gòu)建Dapp的整個過程。

我的專欄：智能合約
智能合約開發(fā)QQ群：753778670