04-25
以太坊智能合约开发第七篇:智能合约与网页交互 HOT
上一篇中,我们通过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>