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

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

内容简介：咱们的开发重点是在后端实现上，因此为了让大家快速上手，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钱包开发：钱包项目整体架构设计》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

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

码农书籍
Visual Thinking

Visual Thinking

Colin Ware / Morgan Kaufmann / 2008-4-18 / USD 49.95

Increasingly, designers need to present information in ways that aid their audiences thinking process. Fortunately, results from the relatively new science of human visual perception provide valuable ......一起来看看 《Visual Thinking》 这本书的介绍吧!

码农工具
HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

SHA 加密
SHA 加密

SHA 加密工具

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