1.合约代码
pragma solidity ^0.4.26;
contract InfoContract {
string Name;
uint age;
event Instructor(
string name,
uint age
);
function setInfo(string _Name, uint _age) public {
Name = _Name;
age = _age;
emit Instructor(_Name, _age);
}
function getInfo() public view returns (string, uint) {
return (Name, age);
}
}
2.前端html和js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My First Dapp!</title>
<link rel="stylesheet" type="text/css" href="main.css">
<!--调用翻译API-->
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="./md5.js"></script>
<script type="text/javascript">
$(function(){
var appid = '20201030000603388';
var key = 'ztWvcJpzwaXWO8ZIV_nn';
var salt = (new Date).getTime();
var from = 'auto';
var to = 'auto';
//翻译
$("#goTran").click(function(){
var query = $("#q").val();
var str1 = appid + query + salt +key;
var sign = MD5(str1);
$.ajax({
url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',
type: 'get',
dataType: 'jsonp',
data: {
q: query,
appid: appid,
salt: salt,
from: from,
to: to,
sign: sign
},
success: function (data) {
var res=data.trans_result[0].dst;
$("#result")[0].innerHTML=res;
console.log(res);
}
});
})
})
</script>
<!--AJAX-->
<!--分割线-->
</head>
<!--html-->
<body>
<!--这里是百度翻译-->
<div>百度翻译</div>
<input id="q" placeholder="请输入要翻译的词" />
<button id="goTran">翻译</button>
<hr>
<p id="result"></p>
<!--这里是展示智能合约传来的数据-->
<div class="container">
<h1>Info Contract</h1>
<h2 id="info"></h2>
<label for="name" class="col-lg-2 control-label">Name</label>
<input id="name" type="text">
<label for="name" class="col-lg-2 control-label">Age</label>
<input id="age" type="text">
<button id="button">Update Info</button>
</div>
<!--js代码-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
// Our future code here..
//验证引入web3成功-
console.log("打印出web3则引入成功"+web3);
if (window.ethereum) {
// 请求用户授权
window.ethereum.enable(function(){
web3.eth.getAccounts((error, accounts) => {
web3.eth.defaultAccount = accounts[0];
console.log(accounts)
})
})
} else if (typeof web3 !== 'undefined') {
web3 = new Web3(web3.currentProvider);
web3.eth.defaultAccount = web3.eth.accounts[0];
console.log(web3.eth.defaultAccount);
} else {
// set the provider you want from Web3.providers
web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
}
//此处中括号[]中的内容直接从remix中compile后的ABI处复制.web3.eth.contract接口可以让web3和合约交互
var infoContract = web3.eth.contract([
{
"constant": false,
"inputs": [
{
"name": "_Name",
"type": "string"
},
{
"name": "_age",
"type": "uint256"
}
],
"name": "setInfo",
"outputs": [],
"payable": false,
"stateMutability": "nonpayable",
"type": "function"
},
{
"anonymous": false,
"inputs": [
{
"indexed": false,
"name": "name",
"type": "string"
},
{
"indexed": false,
"name": "age",
"type": "uint256"
}
],
"name": "Instructor",
"type": "event"
},
{
"constant": true,
"inputs": [],
"name": "getInfo",
"outputs": [
{
"name": "",
"type": "string"
},
{
"name": "",
"type": "uint256"
}
],
"payable": false,
"stateMutability": "view",
"type": "function"
}
]);
console.log(infoContract)
//此处的address单引号''中内容是从remix中deploy后的地址复制而来
var info= infoContract.at('0xc4f58ecead4fb55f281a40628ee5cad38141fb22');
//此处可以参考web3在github上的文档http://github.com/ethereum/web3.js
//也就是web3.js提供的对于智能合约方法的操作与交互
//getInfo方法是对上面的id="info"设置，result是从智能合约获得的结果
var test0;
var test1;
info.getInfo(function(error,result){
if(!error){
$("#info").html(result[0]+'('+result[1]+')years old');
test0=result[0];
test1=result[1];
for (let key in result) {
console.log(key + ': ' + result[key])
}
console.log("test0="+test0);
console.log("test1="+test1);
}
});
//这里setInfo对应智能合约的set方法，此处将html中的name和age设置到智能合约
$("#button").click(function(){
var name = $("#name").val();
var age = $("#age").val();
info.setInfo(name,age,function(error,result){
if(!error){
console.log("ok");
}
});
});
</script>
</body>
</html>