原文发表于：以太坊智能合约开发第七篇：智能合约与网页交互
上一篇中，我们通过truffle开发框架快速编译部署了合约。本篇，我们将来介绍网页如何与智能合约进行交互。
编写网页
首先我们需要编写一个网页。打开smartcontract/app/index.html文件，修改head区代码如下：
<head><title>Hello - Truffle</title><link rel="stylesheet" href="/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- 可选的 Bootstrap 主题文件（一般不用引入） --><link rel="stylesheet" href="/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"><script src="/jquery/1.12.4/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="/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脚本文件是智能合约与网页交互的核心，修改代码如下：
//导入CSSimport "../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()方法，并传入参数nameinstance.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
