亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

sherlock221 / 3722人閱讀

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

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

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

編寫網(wǎng)頁(yè)

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


  Hello - Truffle

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

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

修改啟動(dòng)腳本

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

//導(dǎo)入CSS
import "../stylesheets/app.css";
//導(dǎo)入web3和truffle-contract庫(kù)
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合約對(duì)象
var HelloContract = contract(Hello_artifacts);

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

  //封裝合約中的say()方法調(diào)用過(guò)程，供javascript調(diào)用
  say: function(name, callback){
    //instance為Hello合約部署實(shí)例
    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é)點(diǎn)鏈接
  window.web3 = new Web3(new Web3.providers.HttpProvider("http://127.0.0.1:7545"));
  App.init();
});

前面的篇幅中，我們提到過(guò) web3模塊是以太坊提供的工具包，主要用于與合約的通信。從上面的代碼中，我們可以看到，通過(guò)Hello合約的ABI文件獲取到合約對(duì)象之后，再配合web3工具，就可以與Hello合約進(jìn)行通信了。其中 App.say() 是對(duì)Hello合約中say()方法的調(diào)用過(guò)程進(jìn)行了封裝，方便前端代碼進(jìn)行調(diào)用。

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

啟動(dòng)腳本修改完了之后，就需要與網(wǎng)頁(yè)進(jìn)行整合。我們?cè)俜颠^(guò)來(lái)繼續(xù)修改 smartcontract/app/index.html 文件。在文件末尾添加如下交互代碼：

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

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

最后，我們通過(guò)瀏覽器打開 http://locahost:8083 來(lái)測(cè)試下效果：

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/24054.html

相關(guān)文章

  • python使用web3py與以太坊智能合約交互

    摘要：合約規(guī)定了公共職能部門，以創(chuàng)造新的投資和撤資，這將成為對(duì)沖基金的主要職能。對(duì)沖基金的用戶通過(guò)其以太坊地址來(lái)識(shí)別，該地址相當(dāng)于公鑰。我發(fā)現(xiàn)與其他程序如程序的以太坊智能合約進(jìn)行交互的最簡(jiǎn)單方法是使用他們的。 在以太坊和其他區(qū)塊鏈中，仍有很多被證明的概念正在實(shí)施，開發(fā)人員在嘗試如何應(yīng)對(duì)這些新概念。作為dInvest 系列文章一部分，我也在研究以太坊并嘗試在區(qū)塊鏈中實(shí)施對(duì)沖基金。在上一篇文章中...

    Joyven 評(píng)論0 收藏0

  • 以太坊智能合約開發(fā)第二篇：理解以太坊相關(guān)概念

    摘要：原文發(fā)表于以太坊智能合約開發(fā)第二篇理解以太坊相關(guān)概念很多人都說(shuō)比特幣是區(qū)塊鏈，以太坊是區(qū)塊鏈。它是以太坊智能合約的運(yùn)行環(huán)境。是由以太坊節(jié)點(diǎn)提供。以太坊社區(qū)把基于智能合約的應(yīng)用稱為去中心化的應(yīng)用。 原文發(fā)表于：以太坊智能合約開發(fā)第二篇：理解以太坊相關(guān)概念 很多人都說(shuō)比特幣是區(qū)塊鏈1.0，以太坊是區(qū)塊鏈2.0。在以太坊平臺(tái)上，可以開發(fā)各種各樣的去中心化應(yīng)用，這些應(yīng)用構(gòu)成了以太坊的整個(gè)生態(tài)...

    yibinnn 評(píng)論0 收藏0

  • 工廠模式管理多個(gè)以太坊solidity智能合約

    摘要：在新智能合約的構(gòu)造函數(shù)中，將引用我們的合約工廠的地址。以太坊，主要是針對(duì)工程師使用進(jìn)行區(qū)塊鏈以太坊開發(fā)的詳解。以太坊入門教程，主要介紹智能合約與應(yīng)用開發(fā)，適合入門。這里是原文用工廠模式管理多個(gè)智能合約 我們寫了一份小的計(jì)算合約作為Hello World。如果我們可以創(chuàng)建一個(gè)允許用戶創(chuàng)建自己的計(jì)數(shù)器的合約怎么辦？ showImg(https://segmentfault.com/img/...

    leone 評(píng)論0 收藏0

  • 以太坊、EOS和Hyperledger等不同區(qū)塊鏈的比較

    摘要：以太坊背后的主要人物是。以太坊通過(guò)在區(qū)塊鏈上引入智能合約，徹底改變了加密世界。以太坊使用名為以太坊虛擬機(jī)的虛擬機(jī)執(zhí)行其智能合約。以太坊最終將利用協(xié)議轉(zhuǎn)向權(quán)益證明。截至目前，以太坊在可擴(kuò)展性方面都失敗了。 不同的區(qū)塊鏈智能合約和區(qū)塊鏈技術(shù)現(xiàn)在風(fēng)靡一時(shí)。越來(lái)越多的人出于某種原因試圖進(jìn)入這個(gè)神奇的世界。如果你是這項(xiàng)技術(shù)的新手并正在尋找基于區(qū)塊鏈的開發(fā)平臺(tái)的快速入門，那么本指南非常適合你。我們...

    harriszh 評(píng)論0 收藏0

  • 以太坊是什么 - 以太坊開發(fā)入門指南

    摘要：以太坊是什么以太坊是一個(gè)建立在區(qū)塊鏈技術(shù)之上，去中心化應(yīng)用平臺(tái)。運(yùn)行環(huán)境以太坊虛擬機(jī)是以太坊中智能合約的運(yùn)行環(huán)境。是由以太坊客戶端提供的是典型的開發(fā)以太坊時(shí)使用的客戶端，基于語(yǔ)言開發(fā)。 本文首發(fā)于深入淺出區(qū)塊鏈社區(qū)原文鏈接:以太坊是什么 - 以太坊開發(fā)入門指南原文已更新，請(qǐng)讀者前往原文閱讀 很多同學(xué)已經(jīng)躍躍欲試投入到區(qū)塊鏈開發(fā)隊(duì)伍當(dāng)中來(lái)，可是又感覺(jué)無(wú)從下手，本文將基于以太坊平臺(tái)，以通俗...

    tomlingtm 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<