区块链利用node.js开发与合约交互的web界面

宣之于口 宣之于口     2023-01-13     358

关键词:

利用Node.js开发与合约交互的Web界面

参考地址:here and here

零、在私有链上部署合约

// 本文中用到的MetaCoin合约
pragma solidity ^0.4.2;

contract MetaCoin 
    mapping (address => uint) balances;

    event Transfer(address indexed _from, address indexed _to, uint256 _value);

    function MetaCoin() 
        balances[tx.origin] = 10000;
    

    function sendCoin(address receiver, uint amount) returns(bool sufficient) 
        if (balances[msg.sender] < amount) return false;
        balances[msg.sender] -= amount;
        balances[receiver] += amount;
        Transfer(msg.sender, receiver, amount);
        return true;
    

    function getBalance(address addr) returns(uint) 
        return balances[addr];
    

一、新建一个项目

新建一个node.js项目并初始化

$ mkdir web3test && cd web3test
$ npm init

二、导入web3.js

npm install web3 --save

三、创建web3对象

var Web3 = require("web3");
//创建web3对象
var web3 = new Web3();
// 连接到以太坊节点
web3.setProvider(new Web3.providers.HttpProvider("http://localhost:8545"));

可以测试一下:

var version = web3.version.node;
console.log(version);
==>
在app目录下,终端输入:
prodeMacBook-Pro:web3test pro$ node app.js
输出:
Geth/linoy/v1.6.5-stable-cf87713d/darwin-amd64/go1.8.3

四、调用合约

部署合约:
私有链上查看地址,abi可以通过here获取

var abi = ["constant":false,"inputs":["name":"receiver","type":"address","name":"amount","type":"uint256"],"name":"sendCoin","outputs":["name":"sufficient","type":"bool"],"payable":false,"stateMutability":"nonpayable","type":"function","constant":false,"inputs":["name":"addr","type":"address"],"name":"getBalance","outputs":["name":"","type":"uint256"],"payable":false,"stateMutability":"nonpayable","type":"function","inputs":[],"payable":false,"stateMutability":"nonpayable","type":"constructor","anonymous":false,"inputs":["indexed":true,"name":"_from","type":"address","indexed":true,"name":"_to","type":"address","indexed":false,"name":"_value","type":"uint256"],"name":"Transfer","type":"event"];

var address = "0x6a0a87bd4da65b39a1b27597edb1a5b505a55a0b";

var metacoin = web3.eth.contract(abi).at(address);

调用合约:

/* 查看账户余额 */
var account_one = web3.eth.accounts[0];
var account_one_balance = metacoin.getBalance.call(account_one);
console.log("account one balance: ", account_one_balance.toNumber());
===>
终端查看:
prodeMacBook-Pro:web3test pro$ node app.js
account one balance:  10000

/* 转账操作 */
var account_one = web3.eth.accounts[0];
var account_two = web3.eth.accounts[1];

var txhash = metacoin.sendCoin.sendTransaction(account_two, 100,  from: account_one );

var myEvent = metacoin.Transfer();
myEvent.watch(function (err, result) 
    if (!err) 
        if (result.transactionHash == txhash) 
            var account_one_balance = metacoin.getBalance.call(account_one);
            console.log("account one balance after sendCoin:", account_one_balance.toNumber());
        
     else 
        console.log(err);
    
    myEvent.stopWatching();
);
====>
这里可能会遇到错误:Error: authentication needed: password or unlock
原因是账户没有解锁:在终端,personal.unlockAccount(user1, "123456")
然后再次尝试可以看到:
account one balance:  10000
account one balance after sendCoin: 9900

创建账户:

var account_three = web3.personal.newAccount("123456");
console.log(account_three);

五、与web界面交互

1 . 安装express

查看:here

npm install express --save

2 . 导入BigNumber.js

处理大数字需要使用BigNumber库

npm install --save bignumber.js
===>
var BigNumber = require('bignumber.js');

3 . 调用合约

a. call

var returnValue = metacoin.getBalance.call(address).toString();

b. sendTransaction

var txhash = metacoin.sendCoin.sendTransaction(address_b, trans_value, from:address_a);

4 . 界面



六、代码部分

1 . app.js代码

/* 现连接到geth节点,并获取已部署合约的引用 */
var express = require("express");  
var app = express();  
var server = require("http").createServer(app);
var io = require("socket.io")(server);
var BigNumber = require('bignumber.js');

app.use(express.static("public"));

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

// 现连接到geth节点
var Web3 = require("web3");
web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));  


/* 部署合约 */
var abi = ["constant":false,"inputs":["name":"receiver","type":"address","name":"amount","type":"uint256"],"name":"sendCoin","outputs":["name":"sufficient","type":"bool"],"payable":false,"stateMutability":"nonpayable","type":"function","constant":false,"inputs":["name":"addr","type":"address"],"name":"getBalance","outputs":["name":"","type":"uint256"],"payable":false,"stateMutability":"nonpayable","type":"function","inputs":[],"payable":false,"stateMutability":"nonpayable","type":"constructor","anonymous":false,"inputs":["indexed":true,"name":"_from","type":"address","indexed":true,"name":"_to","type":"address","indexed":false,"name":"_value","type":"uint256"],"name":"Transfer","type":"event"];

var address = "0x6a0a87bd4da65b39a1b27597edb1a5b505a55a0b";

var metacoin = web3.eth.contract(abi).at(address);

app.get("/register", function(req, res)

    //获取输入的密码
    var password = req.query.password;
    //创建账户
    var account = web3.personal.newAccount(password);
    res.send(account);

)

app.get("/getBalance", function(req, res)

    var address = req.query.address;

    //获取address的余额
    var returnValue = metacoin.getBalance.call(address).toString();
    res.send(returnValue);

)

app.get("/sendcoin", function(req, res)

    var address_a = req.query.address_a;
    var address_b = req.query.address_b;
    var trans_value = req.query.trans_value;

    //转账操作
    var txhash = metacoin.sendCoin.sendTransaction(address_b, trans_value, from:address_a);
    res.send(txhash);

)
server.listen(8080);

2 . html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>转账操作</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <div>
        <div> 
            <h3>注册:</h3><br>
            <label for="identity">请输入密码:</label><input type="text" id="password" ></input>
            <button type = "submit"  onclick="register()">注册</button>
            <p id = "address_test">地址:</p>
        </div>
        <div> 
            <h3>查询余额:</h3><br>
            <label for="identity">请输入地址:</label><input type="text" id="address" ></input>
            <button type = "submit" onclick="getBalance()">查询余额</button>
            <p id = "address_balance">余额:</p>
        </div>  
        <div>
            <h3>转账</h3>
            <label for="identity">转出用户地址</label><input type="text" id="address_a" ></input>
            <br><label for="identity">转入用户地址</label><input type="text" id="address_b" ></input>
            <br><label for="identity">金额</label><input type="text" id="trans_value" ></input>
            <button type = "submit"  onclick="sendcoin()">确定</button>
            <p id = "tx_hash">交易:</p>
        </div>

    </div>
    <script type="text/javascript" src="/sha1.min.js"></script>
    <script type="text/javascript" src="/jquery.min.js"></script>
    <script type="text/javascript" src="/socket.io.min.js"></script>
    <script type="text/javascript" src="/main.js"></script>
    <script type="text/javascript" src="/bignumber.js"></script>

</body>
</html>

3 . main.js代码

function register()

    var password = document.getElementById("password").value;

    $.get("/register?password=" + password, function(data)
        if(data == "Error")
        
            $("#address_test").text("An error occured.");
        
        else
        
            $("#address_test").html("地址: " + data);
        
    );


function getBalance()

    var address = document.getElementById("address").value;

    $.get("/getBalance?address=" + address, function(data)

        if(data == "Error")
        
            $("#address_balance").text("An error occured.");
        
        else
        
            $("#address_balance").html("余额: " + data);
        
    );


function sendcoin()

    var address_a = document.getElementById("address_a").value;
    var address_b = document.getElementById("address_b").value;
    var trans_value = document.getElementById("trans_value").value;

    var tx_hash = document.getElementById("tx_hash").value;

    //转账
    $.get("/sendcoin?address_a=" + address_a + "&address_b=" + address_b + "&trans_value=" + trans_value, function(data)

        $("#tx_hash").html("交易: " + data);

    );

web3+区块链学习计划

...om/read/cv18404166制定的web3学习计划是这样的:WEEK1:学习区块链的基础知识密码学基础区块链基础学习以太坊原理WEEK2:学习智能合约学习常见的智能合约标准,ERC20学习Solidity语言学习部署和开发一个简单的智能合约(codi... 查看详情

区块链项目实战-使用以太坊/智能合约solidity,全栈开发区块链借贷记账小应用,含完整源码(代码片段)

本文使用区块链平台以太坊+智能合约实现一个区块链记账的功能,具体为:借款人和贷款人以及数额被记录在区块链中。使用区块链地址来表示借款人或者贷款人。若一个借款人多次向一个贷款人借钱,更新所有... 查看详情

dapp开发系列一:安装truffle,web3.js等基础环境

...对js有一定了解。其中前端的界面使用vue,后台使用区块链来存储少量数据(数据多的话个人肯定是扛不住费用的),其中智能合约编写语言选择的是solidity(语言比较简单,有编程经验的入门很快)。智能合约语言solidity... 查看详情

关于oracle预言机

...cle数据库没有任何原因。在其他语种中oracle有预言的意思区块链预言机(Oracle)是区块链与外部世界交互的一种实现机制,它在区块链与外部世界间建立一种可信任的桥接机制,使得外部数据可以安全可靠地进入... 查看详情

基于区块链的投票系统的设计与实现

 1、本地环境的搭建(Windows10) 1.1安装nodejs,npm,git,web3,solc (1)nodejs:官网下载最新版本https://nodejs.org/en/download/current/  node.js后续还需安装python2.7与visualstudio的c++开发工具包(建议手动)。 (2)npm:... 查看详情

学习区块链开发是学习go语言、hyperledgerfabric比较好、还是以太坊智能合约比较好或者公链开发?

刚接触区块链,之前自学了一些go语言、hyperledgerfabric,在就业方向看目前此方向比较少,由于初学,目前比较迷茫,不知是应该改学以太坊智能合约开发或者公链开发,还是继续学习fabric?Fabric区块链开发详解,本课程面向初... 查看详情

利用python的flask框架开发智能合约

...estful风格的apiflask的插件,用于序列化/反序列化启动一个区块链,用于测试智能合约的发布先查看本地的solidity版本是多少使用solidity编写智能合约。solidity是用于编写以太坊智能合约的语言。编写user.sol文件官方的版本中要连接s... 查看详情

区块链技术工坊-线下区块链技术分享

区块链技术工坊由一群热爱区块链技术的开发者组织,在全国各主要城市每周举办线下区块链技术分享活动。深圳地区由HiBlock、小牛新能源、登链学院联合主办,由以太零、Qtum、FIBOS、AckBlock、HPB赞助。区块链技术工坊坚持聚焦... 查看详情

智能合约简介

区块链技术简史区块链技术的第一次应用是在2008年,当时比特币首次亮相。抛弃传统金融机构,比特币引入了促进数字金融交易的新方法。然而,尽管在当时这是革命性的举措,但在这种状态下,区块链技术... 查看详情

[区块链安全-ethernaut]区块链智能合约安全实战-连载中(代码片段)

[区块链安全-Ethernaut]区块链智能合约安全实战-连载中准备0.HelloEthernaut准备工作创建实例并分析合约交互总结1.Fallback创建实例并分析合约交互总结2.Fallout创建实例并分析合约交互总结3.CoinFlip创建实例并分析攻击合约编写合约交... 查看详情

区块链存在的问题,智能合约漏洞分析

目录区块链存在的问题数据存储与交互隐私保护资源分配漏洞攻击分叉攻击 查看详情

web3区块链合约开发语言框架工具深度对比选型万字长文

目录前言1.智能合约语言SolidityVyperRust智能合约语言总结ChainlinkOpenzeppelin 查看详情

闪贷dapp的调研及实现

前置知识区块链应用Dapp概念:去中心化应用(DecentralizedApplication,DApp)为建构于区块链上的应用程序,也被称之为分散式应用。架构:传统网站:前端→API→数据库。DApp类似于传统的Web应用程序,前端... 查看详情

2019.1.24区块链论文翻译

...etofThingsusingSmartContractsandBlockchainTechnologies使用智能合约和区块链技术与物联网进行交互AthensUniversityofEconomicsandBusiness76Patision,Athens10434,Greece尽管技术进步,但物联网(IoT)中的大多数智能对象无法使用为与强大的Internet服务器交互... 查看详情

区块链开发之solidity智能合约开发(代码片段)

在编写智能合约之前,需要有Solidity的开发环境,我将使用Remix来进行Solidity的学习,大家可以访问Remix在线Solidity集成开发环境其界面主要分三部分,左半本分是合约目录,可进行合约编译、发布右上部分是合... 查看详情

区块链开发之solidity编程基础合约数据存储

Solidity编程基础三概要以太坊虚拟机EVM数据位置storage/存储memory/内存calldata/调用数据Stack栈数据赋值成本概要本章将进行太坊虚拟机EVM的介绍、Solidity的三种数据存储位置的区别以及不同情况下跨区域数据赋值的gas成本分析与利用... 查看详情

java调用区块链智能合约(代码片段)

背景:笔者学习了一段时间区块链,打算做一个区块链去中心化应用(DAPP)。智能合约已经通过remix部署到了kovan测试链上,这篇文章介绍用Java版本的web3j框架与链上合约进行交互。1.导入web3j相关插件和依赖... 查看详情

利用infura对接filecoin区块链教程(代码片段)

...a提供的FilecoinAPI来创建一个简单的Node.js程序来对接Filecoin区块链网络& 查看详情