原文发表于: 以太坊智能合约开发第七篇: 智能合约与网页交互 https://www.marser.cn/article/142.html
上一篇中, 我们通过 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 的整个过程.
来源: https://segmentfault.com/a/1190000014584426