EOS钱包开发：钱包项目整体架构设计

栏目: Node.js · 发布时间: 6年前

内容简介：咱们的开发重点是在后端实现上，因此为了让大家快速上手，web客户端没有使用其它流行的框架，这里只使用了jQuery框架简化代码，另外还有个jQuery Validate 插件简化了表单验证。这个钱包应用程序与EOS全节点进行交互，需要搭建Nodeos服务与keosd应用程序，将使用RPC与EOSJS库提供的jsAPI访问EOS区块链数据，因此我们用NodeJS搭建后端服务，使用成熟的MVC架构，http框架是koa，需用到如下第三方库：新建项目跟文件夹MyEtherWallet，然后按照如下步骤执行

一、前端架构

咱们的开发重点是在后端实现上，因此为了让大家快速上手，web客户端没有使用其它流行的框架，这里只使用了jQuery框架简化代码，另外还有个jQuery Validate 插件简化了表单验证。

  • web前端整体技术： html + css + javascript + jQuery 。
  • web前端功能：
    1. 钱包模块
      • 创建钱包
      • 打开钱包
      • 钱包列表
        • 解锁/锁定
        • 导入私钥/获取公私钥对
    2. 账号模块
      • 创建账号
      • 通过私钥导入账号
      • 账号列表
        • 获取公私钥对
        • 查询余额
        • 查询权限配置
    3. 转账模块
      • EOS 转账
      • EOS代币转账
EOS钱包开发：钱包项目整体架构设计

二、后端架构

这个钱包应用程序与EOS全节点进行交互，需要搭建Nodeos服务与keosd应用程序，将使用RPC与EOSJS库提供的jsAPI访问EOS区块链数据，因此我们用NodeJS搭建后端服务，使用成熟的MVC架构，http框架是koa，需用到如下第三方库：

  • koa：富有强大功能的HTTP中间件框架，使Web应用程序和API更易于编写。它的特点优雅、简洁、表达力强、自由度高。
  • koa-body：功能齐全的koa body解析器中间件。支持 multipart ， urlencoded 和 json 请求体。
  • koa-router：koa的路由中间件。
  • koa-static：静态文件服务器中间件。
  • koa-views：是模板渲染中间件，在模版引擎下使用，支持的模版引擎包含：ejs、jazz、haml、react等。
  • ejs：是一种JavaScript模版引擎，可以动态的设置变量值到html。需要与模板渲染中间件koa-views配合使用。
  • eosjs：访问EOS区块链的NodeJS库。
  • eosjs-api：EOS区块链节点的应用程序编程接口。
  • binaryen：加载wast合约。
  • request：简化的HTTP请求客户端。

三、项目初始化

新建项目跟文件夹MyEtherWallet，然后按照如下步骤执行

lixu@ubuntu:~$ cd '/home/lixu/Desktop/demo/EOSWallet'
lixu@ubuntu:~/Desktop/demo/EOSWallet$ npm init
然后不断回车初始化项目。然后后自动生成<code>package.json</code>文件，是项目包的配置文件，下面我们引入项目中需要用到的库，拷贝下面json到<code>package.json</code>文件的最后一个字段。
,
"dependencies": {
"binaryen": "^39.0.0",
"ejs": "^2.6.1",
"eosjs": "^16.0.6",
"eosjs-api": "^7.0.3",
"koa": "^2.5.2",
"koa-body": "^4.0.4",
"koa-router": "^7.4.0",
"koa-static": "^5.0.0",
"koa-views": "^6.1.4",
"request": "^2.88.0"
}

项目的界面如下：

EOS钱包开发：钱包项目整体架构设计

然后运行以下命令按照上面的依赖库。

npm install

下载完成后会将所有的依赖库下载到项目根目录自动新建的 node_modules 文件夹。

四、项目源码

按照如下结构搭建项目。

EOS钱包开发：钱包项目整体架构设计

index.js

项目的入口文件。首先实例化koa对象，然后将koaBody、static、views、路由注册到中间件，服务绑定到3000端口。

let koa = require("koa") //通过koa创建一个应用程序 let app = new koa() //导入./router/route这个包，赋值给的router就是 ./router/router导出的数据 let router = require("./router/router") let static = require("koa-static") let path = require("path") let views = require("koa-views") let koaBody = require("koa-body")
app.use(async (ctx, next) => {
console.log(`${ctx.method} ${ctx.url} ..........`)
await next()
}) 
//针对于文件上传的时候，可以解析多个字段
app.use(koaBody({multipart:true}))
//注册静态文件的库到中间件
app.use(static(path.join(__dirname, "static")))
//注册模板引擎的库到中间件
app.use(views(path.join(__dirname, "views"), {extension:"ejs", map:{html:"ejs"}}))
app.use(router.routes()) 
console.log("正在监听3000端口")
app.listen(3000)

wallet.html

前端：新建账号的页面。

<html>
<head>
<title>钱包</title>
<script src="https://www.8btc.com/article/js/lib/jquery-3.3.1.min.js"></script>
<script src="https://www.8btc.com/js/lib/jquery.url.js"></script>
<script src="https://www.8btc.com/article/js/wallet.js"></script>
<link rel="stylesheet" href="https://www.8btc.com/article/css/eoswallet.css">
</head> 
<body>
<%include block/nav.html%> 
<div id="main">
<h1>钱包列表</h1>
</div>
</body> 
</html>

nav.html

前端的导航栏，使用ejs库的方法 <%include block/nav.html%> 载入。 

<div id="nav">
<div id="nav-center">
<ul>
<li><a href="http://www.kongyixueyuan.com">孔壹学院</a></li>
<li><a href="https://www.8btc.com/wallet.html">钱包</a></li>
<li><a href="https://www.8btc.com/account.html">账号</a></li>
<li><a href="https://www.8btc.com/transaction.html">转账</a></li>
</ul>
</div>
</div>

httpRequest.js

针对EOS提供的RPC接口封装的网络请求接口。

let request = require("request"); let {success, fail} = require("./myUtils") let config = require("../config/config")
async function httpRequest(method, url, params) {
console.log("httpRequest:", url, params)
let promise = new Promise((resolve, reject) => { 
var options = {
method: method,
url: url,
body: params,
json: true
};
request(options, function (error, response, body) { 
if (error) {
reject(error)
} else {
resolve(body)
}
})
}) 
let result;
//第一个参数是成功的回调
//第二个参数是失败的回调
await promise.then(function (data) {
if (data.error) {
result = fail(data.error)
} else {
result = success(data)
}
}, function(error) {
result = fail(error)
}) 
console.log(JSON.stringify(result))
return result
} 
function generateURL(path) {
let domain = ""
if (path.indexOf("/v1/wallet/") == 0) {
domain = config.walletAddress
} else {
domain = config.eosconfig.httpEndpoint
}
return domain + path
} 
module.exports = { 
postRequest: async(path, params) => {
return await httpRequest("POST", generateURL(path), params)
}, 
getRequest: async(path, params) => {
return await httpRequest("GET", generateURL(path), params)
}, 
}

myUtils.js

项目 工具 类，提供获取EOSJS实例、返回给前端成功与失败的基本数据结构。

Eos = require('eosjs') let config = require("../config/config")
module.exports = { 
getEOSJS: (keyProvider) => {
config.eosconfig.keyProvider = keyProvider
return Eos(config.eosconfig)
}, 
success: (data) => {
responseData = {
code: 0,
status: "success",
data: data
}
return responseData
}, 
fail: (msg) => {
responseData = {
code: 1,
status: "fail",
data: msg
}
return responseData
}, 
doCallback: async (fn, args) => {
return await fn.apply(this, args);
},
}

wallet.js

处理钱包模块的js文件。

$(document).ready(function () {
alert("welcome!")
})

eoswallet.css

前端唯一的css文件。

#main{ /*background-color: #8bc34a;*/ margin: 120px 50px 50px 50px;
}
.error{
color: red;
}
a{
color: black;
text-decoration: none;
}
a:hover{
color: #666;
}
body{
margin: 0px;
}
ul>li{
list-style: none;
margin: 0px;
} 
.global-color{
color: #0abc9c;
} 
ul{
list-style: none;
padding: 0px;
} 
.row{
display: inline-block;
margin-right: 70px;
}
.top{
vertical-align: top
}
a[class=button]{
background-color: beige;
padding: 2px 10px;
border: 1px solid gray;
}
button{
background-color: beige;
border: 1px solid gray;
} 
/*导航-------------------------------------------------------------------------------------------------------*/
#nav{
display: flex;
justify-content: space-between;
background-color: #0abc9c;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
}
#nav li{
display: inline-block;
margin: 10px 2px;
}
#nav ul{
padding: 0px;
}
#nav a{
padding: 10px;
font-size: 24px;
}
#nav-left{
margin-left: 20px;
}
#nav-right{
margin-right: 20px;
}

router.js

路由文件。

let router = require("koa-router")()
router.get("/", async (ctx) => {
await ctx.render("wallet.html")
}) 
module.exports = router

五、启动项目

使用如下命令分别启动服务

  1. 启动nodeos服务 
    nodeos -e -p eosio --plugin eosio::chain_api_plugin --plugin eosio::history_api_plugin

启动keosd服务

keosd
  1. 若报如下错误 is another keosd running? ，则使用命令 pkill keosd 停止已经启动的keosd服务，然后再启动keosd。 EOS钱包开发：钱包项目整体架构设计
  2. 启动后端服务在项目 EOSWallet 根目录运行命令 node index.js 。

六、项目运行效果

EOS钱包开发：钱包项目整体架构设计

参考资料

koa的github： https://github.com/koajs/koa

koa-views的github： https://github.com/queckezz/koa-views

koa-body的github： https://github.com/dlau/koa-body

koa-router的github： https://github.com/alexmingoia/koa-router

koa-static的github： https://github.com/koajs/static

ejs的github： https://github.com/tj/ejs

eosjs的github： https://github.com/EOSIO/eosjs

request的github： https://github.com/request/request

项目源码Github地址

版权声明：博客中的文章版权归博主所有，未经授权禁止转载，转载请联系作者（微信：lixu1770105）取得同意并注明出处。

未经授权禁止转载、改编，转载请注明出处！

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。


以上所述就是小编给大家介绍的《EOS钱包开发：钱包项目整体架构设计》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
Python编程初学者指南

Python编程初学者指南

[美]Michael Dawson / 王金兰 / 人民邮电出版社 / 2014-10-1

Python是一种解释型、面向对象、动态数据类型的高级程序设计语言。Python可以用于很多的领域，从科学计算到游戏开发。 《Python编程初学者指南》尝试以轻松有趣的方式来帮助初学者掌握Python语言和编程技能。《Python编程初学者指南》共12章，每一章都会用一个完整的游戏来演示其中的关键知识点，并通过编写好玩的小软件这种方式来学习编程，引发读者的兴趣，降低学习的难度。每章最后都会......一起来看看 《Python编程初学者指南》 这本书的介绍吧!

码农工具
URL 编码/解码
URL 编码/解码

URL 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3