以太坊教程-web3+express开发以太坊钱包
在上⼀节中我们讲到了了如何使⽤web3调来⽤以太坊API，学习了如何创建账户，使⽤私钥签名交易，查询余额，转账等操作。本节我们将创建⼀个可视化的界⾯，来完成创建账户，转账、查询余额等功能。
⽬录：
创建项⽬
安装项⽬依赖
获取web3实例对象
创建前端页⾯
创建后端
功能实现
创建项⽬
打开命令⾏⼯具，新建⼀个⽂件夹 EthWallet_web3
mkdir EthWallet_web3
进⼊到项⽬⽬录中，使⽤NPM初始化
cd EthWallet_web3
npm init -y
使⽤参数 -y可以直接⽣产package.json⽂件，避免了总是输⼊回车下⼀步的⿇烦。这是可以看到项⽬⽬录下⽣成了package.json。
安装项⽬依赖
我们使⽤express来作为项⽬后端，通过它来为前端页⾯提供调⽤接⼝。
npm install --save express
--save参数可以使项⽬依赖保存在package.json⽂件中。
安ody-parser，这个库是⽤来⽀持post请求的。
npm install --save body-parser
最后，最重要的，我们还要安装web3
npm install --save web3
获取web3实例对象
在项⽬根⽬录中新建 getWeb3.js
代码：
var Web3 = require('web3');
var web3;
if (typeof web3 !== 'undefined') {
web3 = new Web3(web3.currentProvider);
} else {
web3 = new Web3(new Web3.providers.HttpProvider("localhost:8545"));
}
最后通过ports = web3；把web3实例对象导出，⽅便其他⽂件调⽤。
创建前端页⾯
前端依赖
前端⽬录结构
新建public⽬录，把Bootstrap和jQuery（如果你使⽤CDN则不需要）放到public⽬录下，新建index.html⽂件。现在项⽬⽬录结构如下：
注意：这⾥⾯有⼀个 .gitignore的⽂件，这是git仓库的忽略配置⽂件，⽤来在推送远程仓库的时候忽略仓库⾥的某些⽂件。
如果你没有使⽤git的话，可以忽略这个⽂件，当它不存在好了。
接下来编辑前端页⾯，代码如下
<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>Document</title>
<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
<script src="/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<style>
.row{
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container" >
<div class="row" >
<h1> 以太坊钱包 </h1>
</div>
<div class="row">
<div class="col-md-12">
<input type="text" class="form-control" placeholder="请输⼊账户密码" id="password">
</div>
</div>
<div class="row">
<div class="col-md-12">
<input class="btn btn-primary btn-block" type="submit" value="提交" id="addaccount">
</div>
</div>
</div>
<div class="container" id="account-list">
<div class="container" id="account-list">
</div>
<div class="container" >
<div class="row">
<div class="col-md-12">
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="address_from">from</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="address_from" placeholder="转账⽅地址"> </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="address_to">to</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="address_to" placeholder="接收⽅地址"> </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="trans_value">⾦额</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="trans_value" placeholder="转账⾦额"> </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="trans_password">密码</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="trans_password" placeholder="密码"> </div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input class="btn btn-primary btn-block" type="submit" value="转账" id="trans_btn">
</div>
</div>
</div>
</body>
</html>
创建后端
在项⽬根⽬录下新建index.js，使⽤express创建⼀个服务器
var express = require("express");
var app = express();
app.listen(8081,function(){
console.log('@8081')
});
配置静态⽂件路径
var path = require('path');
app.use(express.static(path.join(__dirname, 'public')));
<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
<script src="/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
使⽤body-parser中间件⽀持post请求
var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
接下来，我们先添加⼀个接⼝，⽤来访问index.html，在index.js添加如下代码：
jquery在线教程交流<("/", function(req, res){
res.sendFile(__dirname + "/public/index.html");
})
__dirname这是⼀个全局变量，⽤来获取当前⽂件的路劲，这⾥⽤它获取到的是index.js的路劲，我们通过拼接就得到了index.html的⽂件绝对路径了。
__dirname + "/public/index.html"
接下来启动服务器，在命令⾏（注意要在当前项⽬⽬录下）执⾏
node index.js
功能实现
获取所有账户
接下来我们添加⼀个接⼝⽤来获取所有账户，在index.js中添加如下代码
//获取所有⽤户
<('/accounts',function(req,res){
res.send(result)
})
})
然后前端页⾯也要相应的调⽤这个接⼝，修改index.html，添加⼀对<script></script>标签，在其中添加：
var accounts = {};
function gtAccounts(){
$.get('localhost:8081/accounts',function(accs){
console.log(accs)
for(var i = 0;i < accs.length;i++){
accounts[accs[i]] = 0;
}
for( k in accounts){
getBalance(k)
}
})
}
gtAccounts()
注册新账户
后端接⼝：
//注册⽤户
app.post("/register", function(req, res){
var password = req.body.password;
console.log('password:');
console.log(password);
.then(function(addr){
console.log('新增账户:',addr)
res.send({address:addr,balance:0})
});
})
前端页⾯调⽤如下：
$("#addaccount").click(function(){
if($("#password").val() != ""){
$.post('localhost:8081/register/',
{password:$("#password").val()},
function(res){
console.log(res)
accounts[res.address] = res.balance;
showAccountList();
})
}
$("#password").val("")
})
转账
后端代码：
/
/发送以太币
app.post("/sendcoin", function(req, res){
var address_from = req.body.address_from;
var address_to = req.body.address_to;
var trans_value = ans_value;
var password = ans_password;
from: address_from,
to: address_to,
value: Wei(trans_value,"ether"),
},function(err,transactionHash){
if(!err){
console.log('transactionHash:',transactionHash)
res.send({msg:"ok",hash:transactionHash});
}else{
console.log('-------------error-----------')
console.log(err)
console.log('-------------error-----------')
}
})
});
})
前端调⽤代码：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论