以太坊智能合约开发第七篇:智能合约与网页交互

上一篇中,我们通过truffle开发框架快速编译部署了合约。本篇,我们将来介绍网页如何与智能合约进行交互。

编写网页

首先我们需要编写一个网页。打开 smartcontract/app/index.html 文件,修改 head 区代码如下:

<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>

网页呈现效果如下图:

修改启动脚本

smartcontract/app/javascripts/app.js 脚本文件是智能合约与网页交互的核心,修改代码如下:

//导入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()方法的调用过程进行了封装,方便前端代码进行调用。

智能合约与网页交互

启动脚本修改完了之后,就需要与网页进行整合。我们再返过来继续修改 smartcontract/app/index.html 文件。在文件末尾添加如下交互代码:

<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

注意图中标识的部分。http://locahost:8083 为网页访问地址(每个人运行的端口号可能不一样)。我们也能看出,truffle开发框架集成了 webpack 工具,对网页中包含的静态资源文件进行了打包。

最后,我们通过浏览器打开 http://locahost:8083 来测试下效果:

至此,一个简单的Dapp应用示例就此完成了。我们也熟练掌握了通过truffle开发框架编写合约代码、快速编译部署、构建Dapp的整个过程。

我的专栏:智能合约 智能合约开发QQ群:753778670

我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=1fbblhhti09y1

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ytkah

微信公众平台投票功能升级 可多渠道发布投票

  与之前同时发布公众号投票功能和多客服功能一样,昨天,微信公众平台投票功能升级的脚步紧随多客服功能正式向所有微信认证的服务号和订阅号开放,公众号运营者可通过群...

3064
来自专栏.╂遊牧的专栏

整合 Django + Vue.js 框架快速搭建web项目

在工作中我们经常须要构件一些基于 web 的项目,例如内部测试平台、运维系统等。本篇主要介绍如何使用后端 Django + 前端 Vue.js 的技术栈快速地搭...

25.8K9
来自专栏企鹅号快讯

用Python抓取非小号网站数字货币(一)

一、环境 OS:win10 python:3.6 scrapy:1.3.2 pymongo:3.2 pycharm 环境搭建,自行百度 二、本节内容说明 本节主...

4626
来自专栏phodal

微信小程序剖析【下】:运行机制

在上一篇《微信小程序「官方示例代码」浅析【上】》中,我们只是简单的罗列了一下代码,这一篇,让我们来玩点刺激的——就是看看IDE的代码,了解它是怎么运行的。 还好...

2448
来自专栏破晓之歌

Python 的 GUI 开发工具 原

Flexx 是一个纯 Python 工具包,用来创建图形化界面应用程序。其使用 Web 技术进行界面的渲染。你可以用 Flexx 来创建桌面应用,同时也可以导出...

1272
来自专栏macOS 开发学习

cocos2d-objc 3.0+ 游戏开发学习手册(一): 简介与安装

目前网络中关于cocos2d-iphone 方面的资料,大部分都是基于c++ 语言跨平台的cocos2d-x,偶尔搜到一些cocos2d方面的也由于版本比较早(...

833
来自专栏零基础使用Django2.0.1打造在线教育网站

零基础使用Django2.0.1打造在线教育网站(十):后台管理配置

努力与运动兼备~~~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

571
来自专栏IMWeb前端团队

AppCan——HTMl5移动开发应用平台

AppCan是HTMl5移动开发应用平台,支持跨平台,可以简单、快速、高效开发移动应用。 倡导Hybrid App开发。 为HTML5开发提供底层Native交...

2786
来自专栏小詹同学

老司机带你用python来爬取妹子图

这是小詹关于爬虫的第③篇文章! 这篇文章来自一个大一学弟的公众号「日常学python」 虽然这篇文章难度不大,但是对新手来说绝对是福利,爬天爬地爬空气你懂得~ ...

3747
来自专栏九彩拼盘的叨叨叨

Chrome 插件收藏

Chrome 上有非常多的功能强大的和插件。这些插件让 Chrome 变得更加强大。下面是我常用的一些插件。

831

扫码关注云+社区