2. 程式人生 > >以太坊教程-web3 + express開發以太坊錢包

以太坊教程-web3 + express開發以太坊錢包

阿新 • • 發佈：2018-12-05

在上一節中我們講到了瞭如何使用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檔案中。

安裝body-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("http://localhost:8545"));
  }

module.exports = web3;

最後通過module.exports = web3;把web3例項物件匯出，方便其他檔案呼叫。

建立前端頁面

前端依賴

前端頁面我使用了Bootstrap框架,你可以去https://getbootstrap.com/（英文）或者 http://www.bootcss.com/（中文）下載 Bootstrap。
並且使用了jQuery（https://jquery.com/）來方便DOM操作和ajax。

前端目錄結構

新建public目錄，把Bootstrap和jQuery（如果你使用CDN則不需要）放到public目錄下,新建index.html檔案。現在專案目錄結構如下：
image.png

注意：這裡面有一個 .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" style="width: 600px;">
            <div class="row" style="text-align: center">
                    <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" style="width: 600px;margin-top: 10px" id="account-list">    
    </div>

    <div class="container" style="width: 600px;margin-top: 10px">
        <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('server [email protected]')
});

配置靜態檔案路徑

var path = require('path');
app.use(express.static(path.join(__dirname, 'public')));

這不操作的目的是吧 public設定問靜態檔案路徑，這樣再瀏覽器訪問public目錄下的檔案的時候，可以不用新增 public，比如如果想訪問index.html,就可以直接在位址列輸入http://localhost:8081/index.html,同樣的，如果你注意的話，會發現我們在index.html裡引用的bootstrap和jQuery也是如此

 <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新增如下程式碼：

app.get("/", function(req, res){
    res.sendFile(__dirname + "/public/index.html");
})

__dirname這是一個全域性變數，用來獲取當前檔案的路勁，這裡用它獲取到的是index.js的路勁，我們通過拼接就得到了index.html的檔案絕對路徑了。

__dirname + "/public/index.html"

接下來啟動伺服器，在命令列（注意要在當前專案目錄下）執行

node index.js

命令列顯示
命令列顯示
然後開啟瀏覽器，輸入http://localhost:8081/，回車
瀏覽器顯示

功能實現

獲取所有賬戶

接下來我們新增一個介面用來獲取所有賬戶，在index.js中新增如下程式碼

//獲取所有使用者
app.get('/accounts',function(req,res){
    web3.eth.getAccounts(function(error, result){
        res.send(result)
    })
})

然後前端頁面也要相應的呼叫這個介面,修改index.html，新增一對<script></script>標籤，在其中新增：

        var accounts = {};

        function gtAccounts(){
            $.get('http://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()

這裡使用get的方式請求http://localhost:8081/accounts介面，獲取所有的賬戶，展示在頁面。

註冊新賬戶

後端介面：

//註冊使用者
app.post("/register", function(req, res){

    var password = req.body.password;
    console.log('password:');
    console.log(password);
    web3.eth.personal.newAccount(password)
    .then(function(addr){
        console.log('新增賬戶:',addr)
        res.send({address:addr,balance:0})
    });

})

前端頁面呼叫如下：

$("#addaccount").click(function(){

            if($("#password").val() != ""){
                $.post('http://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 = req.body.trans_value;
    var password = req.body.trans_password;
    
    web3.eth.personal.unlockAccount(address_from,password,9999,function(){
        console.log('unlock accounts ok')
        web3.eth.sendTransaction({
            from: address_from,
            to: address_to,
            value: web3.utils.toWei(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-----------')
            }
        })
    });
    
})

前端呼叫程式碼：

$("#trans_btn").click(function(){

            var address_from = $("#address_from").val();
            var address_to = $("#address_to").val();
            var trans_value = $("#trans_value").val();
            var trans_password = $("#trans_password").val();
            if(address_from != '' && address_to != '' && trans_value != "" && trans_password != ""){
                $.post("http://localhost:8081/sendcoin/",
                {
                    address_from,
                    address_to,
                    trans_value,
                    trans_password
                },function(res){
                    if(res.msg == 'ok'){
                        accounts[address_to] = trans_value;
                        showAccountList();
                        // getBalance(address_from)
                        // getBalance(address_to)
                        
                    }
                })
            }
            // $("#address_from").val("");
            $("#address_to").val("");
            $("#trans_value").val("");
            $("#trans_password").val("");

        })

完整程式碼

後端程式碼

var express = require("express");  
var app = express();
var path = require('path');
var bodyParser = require('body-parser');

// var BigNumber = require('bignumber.js');
app.use(express.static(path.join(__dirname, 'public')));

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

var web3 = require("./getWeb3");

app.get("/", function(req, res){
    res.sendFile(__dirname + "/public/index.html");
})

//獲取所有使用者
app.get('/accounts',function(req,res){
    web3.eth.getAccounts(function(error, result){
        res.send(result)
    })
})

//註冊使用者
app.post("/register", function(req, res){

    var password = req.body.password;
    console.log('password:');
    console.log(password);
    web3.eth.personal.newAccount(password)
    .then(function(addr){
        console.log('新增賬戶:',addr)
        res.send({address:addr,balance:0})
    });

})

//查詢餘額
app.get("/getBalance", function(req, res){

    var address = req.query.address;
    web3.eth.getBalance(address).then(function(balance){
        var ether = web3.utils.fromWei(balance, 'ether');
        res.send(ether);
   })
})



//傳送以太幣
app.post("/sendcoin", function(req, res){

    var address_from = req.body.address_from;  
    var address_to = req.body.address_to;
    var trans_value = req.body.trans_value;
    var password = req.body.trans_password;
    
    web3.eth.personal.unlockAccount(address_from,password,9999,function(){
        console.log('unlock accounts ok')
        web3.eth.sendTransaction({
            from: address_from,
            to: address_to,
            value: web3.utils.toWei(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-----------')
            }
        })
    });
    
}) 



app.listen(8081,function(){
    console.log('server [email protected]')
});

前端程式碼

<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" style="width: 600px;">
            <div class="row" style="text-align: center">
                    <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" style="width: 600px;margin-top: 10px" id="account-list">    
    </div>

    <div class="container" style="width: 600px;margin-top: 10px">
        <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>



    <script>
        
        var accounts = {};

        function gtAccounts(){
            $.get('http://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()
        

        $("#addaccount").click(function(){

            if($("#password").val() != ""){
                $.post('http://localhost:8081/register/',
                {password:$("#password").val()},
                function(res){
                    console.log(res)
                    accounts[res.address] = res.balance;
                    showAccountList();
                })
            }
            $("#password").val("")
        })

        $("#trans_btn").click(function(){

            var address_from = $("#address_from").val();
            var address_to = $("#address_to").val();
            var trans_value = $("#trans_value").val();
            var trans_password = $("#trans_password").val();
            if(address_from != '' && address_to != '' && trans_value != "" && trans_password != ""){
                $.post("http://localhost:8081/sendcoin/",
                {
                    address_from,
                    address_to,
                    trans_value,
                    trans_password
                },function(res){
                    if(res.msg == 'ok'){
                        accounts[address_to] = trans_value;
                        showAccountList();
                        // getBalance(address_from)
                        // getBalance(address_to)
                        
                    }
                })
            }
            // $("#address_from").val("");
            $("#address_to").val("");
            $("#trans_value").val("");
            $("#trans_password").val("");

        })

        function getBalance(address){
            console.log(address)
            if(address){
                $.get('http://localhost:8081/getBalance?address='+ address,function(bal){
                    accounts[address] = bal;
                    showAccountList();
                })
            }
        }
        function showAccountList(){
        
            var str = "";          
            for(k in accounts){
                str += `<div class="row">
                            <div class="col-md-9">
                                地址：${k}
                            </div>
                            <div class="col-md-3">
                                金額：${accounts[k]}
                            </div>
                        </div>`
            }
            $("#account-list").html(str)
        }

    </script>
</body>
</html>

完整專案案例可以從github上下載：https://github.com/cooleye/web3_wallet

掃描下方二維碼，關注微信公眾號：H5開講啦，獲取更多學習資料。

qr.jpg

相關推薦

以太坊教程-web3 + express開發以太坊錢包

在上一節中我們講到了瞭如何使用web3調來用以太坊API，學習瞭如何建立賬戶，使用私鑰簽名交易，查詢餘額，轉賬等操作。本節我們將建立一個視覺化的介面，來完成建立賬戶，轉賬、查詢餘額等功能。 目錄： 建立專案 安裝專案依賴 獲取web3例項物件 建立前端頁面

以太坊教程- Web3.js 開發基礎

簡介 web3.js 是一個通過RPC 呼叫 和本地以太坊節點進行通訊的js庫。web3.js可以與任何暴露了RPC介面的以太坊節點連線。 web3中提供了eth物件 - web3.eth來與以太坊區塊鏈進行互動。 在github上獲得程式碼 安裝 Testrpc 安裝Eth

以太坊教程：學習以太坊Dapp開發

以太坊教程 以太坊 以太坊開發 智能合約 區塊鏈 dapp 一、區塊鏈 1. 分布式去中心化 比特幣設計的初衷就是要避免依賴中心化的機構，沒有發行機構，也不可能操縱發行數量。既然沒有中心化的信用機構，在電子貨幣運行的過程中，也勢必需要一種機制來認可運行在區

web3j教程：java使用web3j開發以太坊智慧合約交易

從廣義上講，有web3j支援三種類型的以太坊交易： 1.以太幣從一方交易到另一方 2.建立一個智慧合約 3.與智慧合約交易 為了進行這些交易，必須有以太幣(以太坊區塊鏈的代幣)存在於交易發生的以太坊賬戶中。這是為了支付gas成本，這是為支付參與交易的以太坊客戶端的交

Python開發以太坊的類庫Web3.py V4的新功能

Web3.py第4版的第一個測試版於2017年11月中旬釋出，此後又釋出了5個版本，目前已經穩定釋出到4.6。主要版本變化意味著一些向後相容的更改，以及這些更改啟用的一些全新功能。感興趣的話請繼續閱讀本概述。 如何安裝 等不及要玩了嗎？現在用pip安裝。Pip預設不

web3.py是Python開發以太坊應用的利器

與web3.py庫互動的共同入口是web3物件。web3物件提供API，用於python開發的應用與以太坊區塊鏈進行互動，通常是通過連線JSON-RPC伺服器進行。 Providers提供者 Providers使web3連線到區塊鏈上。Web3.py庫帶有以下內建的pro

安裝web3.js連線以太坊開發環境

0. Web3.js提供了用於和geth通訊的JavaScript API。內部使用JSON RPC協議與geth通訊1.  安裝 node.js2. 安裝 npm install web3 如果安裝失敗 執行：npm install 3. 更新npm：npm i npm t

區塊鏈開發（四）web3j和web3.js對以太坊錢包功能的實現

經過前面的環境搭建，現在開始通過web3j和web3.js來簡單呼叫以太坊的api web3j的使用 首先是新建一個maven工程 <?xml version="1.0" encoding="UTF-8"?> <project x

以太坊智能合約開發之代幣合約

智能合約 合約 以太坊 以太坊開發 ethereum truffle solidity 區塊鏈 區塊鏈開發 blockchain 智能合約開發是以太坊開發的核心，而代幣合約的編寫是智能合約開發的核心，用solidity開發一個代幣合約的例子是學習以太坊開發智能合約

solidity開發以太坊代幣智能合約

以太坊 智能合約 solidity 代幣 開發 智能合約開發是以太坊編程的核心之一，而代幣是區塊鏈應用的關鍵環節，下面我們來用solidity語言開發一個代幣合約的實例，希望對大家有幫助。 以太坊的應用被稱為去中心化應用（DApp），DApp的開發主要包括兩大部分： 智能合約的開發 用戶

以太坊教程：搭建環境、編寫編譯一個智能合約

以太坊教程 以太坊 以太坊開發 智能合約 區塊鏈 區塊鏈開發 solidity 本以太坊教程主要是介紹：搭建一個開發環境、編寫編譯一個智能合約。 以太坊是什麽 以太坊（Ethereum）是一個開源的有智能合約功能的公共區塊鏈平臺。通過其專用加密貨幣以太

web3j開發以太坊智能合約快速入門(特別適合java和android開發者)

latest struct name admin 套接字 信息 mes add decimal web3j簡介 web3j是一個輕量級、高度模塊化、響應式、類型安全的Java和Android類庫提供豐富API，用於處理以太坊智能合約及與以太坊網絡上的客戶端(節點)進行集成。

java開發以太坊過濾器(filter)和智能合約事件(event)

java web3j filter event 以太坊 ethereum 區塊鏈 智能合約 過濾器 事件 web3j過濾器提供以太坊網絡發生的某些事件的通知，對java和安卓程序員來說很有用。在Ethereum以太坊中支持三類過濾器：

F3D系統開發以太坊Fomo3D區塊鏈模式

inno 定制 dap 擁有 style 獎勵 開發 最終 理論 Fomo3D（F3D）以太坊ETH底層技術系統開發空氣-陳洋1 5 0 1*3 1 5 1*7 4 0電T微。現代經濟體系正在朝著分布式、點對點、網絡化的結構進行演化。分布式賬本技術吸收了現代密碼學、安全通訊

如何用python和flask以太坊智能合約開發

庫函數 編寫 本地化 實用程序 註冊 同步 ring getting and 將數據存儲在數據庫中是任何軟件應用程序不可或缺的一部分。無論如何控制該數據庫都有一個該數據的主控。區塊鏈技術將數據存儲到區塊鏈網絡內的區塊中。因此，只要某個節點與網絡同步，它們就會獲得區塊中數據的

Python Flask如何開發以太坊智能合約

sting lar rto urn 設置 doc 教程 not [1] 將數據存儲在數據庫中是任何軟件應用程序不可或缺的一部分。無論如何控制該數據庫都有一個該數據的主控。區塊鏈技術將數據存儲到區塊鏈網絡內的區塊中。因此，只要某個節點與網絡同步，它們就會獲得區塊中數據的副本。

2018年以太坊智能合約開發語言Solidity最佳IDEs

market jpeg 進行 png 以太坊 組件 ocs cli app Solidity是一種以智能合約為導向的編程語言。這是一種只有四年的年輕語言，旨在幫助開發基於以太坊數字貨幣的智能合約。 理解它官方文檔應該是學習Solidity的最佳來源：solidity.rea

用Visual Studio和c#開發以太坊dapp

分享 chain dap 本地 當前 疑問 運行 course 啟動 最近區塊鏈技術引起了我的註意。我剛開始了解它，就看到了區塊鏈去中心化架構的巨大潛力，並且它能夠簡化各種現有繁瑣的流程，通過各種形式的合約。 作為一名.NET開發人員，我主要使用的是一些提供中心數據源的架構

Android開發以太坊錢包生成應用程序

運行時 try super 取地址 save ras parent sel cte Android應用程序以太坊錢包生成，要做的工作不少，不過如果我們一步一步來應該也比較清楚： 1.在app/build.gradle中集成以下依賴項： compile (‘org.web3j

web程序員開發以太坊入門指南

字符 函數調用 每次 asus 員工 建議 自定義 var data Web工程師以太坊入門 我經常構建使用以太坊的Web應用程序，我理所當然地認為每天都使用的是神奇的工具集。我們的生態系統正在迅速發展，我認為很多新人都感到不知所措。以太坊是一項了不起的技術，但它也是新生的