原文發表於：以太坊智慧合約開發第七篇：智慧合約與網頁互動
上一篇中，我們通過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
