1。前端架构

我们的开发侧重于后端的实现，所以为了让大家快速上手，web客户端没有使用其他流行的框架。这里只使用jQuery框架来简化代码，还有一个jQuery Validate插件来简化表单验证。

web前端整体技术：html css javascript jQuery。Web前端功能：钱包模块创建钱包，打开钱包列表，解锁/锁定并导入私钥/获取公私钥对。账户模块通过将私钥导入账户列表来创建账户，获取公钥和私钥对，并查询余额。查询权限配置转移模块EOS转移EOS令牌

II。后端架构

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

KOA:强大的HTTP中间件框架，让Web应用和API更容易编写。其特点是优雅、简洁、表现力强、自由度高。Koa-body:一个全功能的koa body解析器中间件。支持多部分、urlencoded和json请求体。Koa路由器：KOA的路由中间件。静态文件服务器中间件。Koa-views:它是一个模板渲染中间件，在模板引擎下使用。支持的模板引擎有ejs、jazz、haml、react等。Ejs:它是一个JavaScript模板引擎，可以动态地将变量值设置为html。它需要与模板渲染中间件koa-views一起使用。EOS:访问区块链EOS的NodeJS库。JS-API:EOS区块链节点的应用编程接口。Binaryen:加载was契约。请求：一个简化的HTTP请求客户端。

三项目初始化

新建一个项目和文件夹MyEtherWallet，然后按照以下步骤执行

徐丽@ Ubuntu:~ $ CD '/home/徐丽/desktop/demo/EOS Wallet '徐丽@ ubuntu: ~/desktop/demo。然后自动生成package.json文件，这是项目包的配置文件。下面介绍一下项目中需要的库，将下面的json复制到package.json文件的最后一个字段。' dependencies ':{ ' binary en ':'^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 ' }[x

NPM install 1

下载后，所有的依赖库都会下载到根目录下自动创建的node_modules文件夹中第四章。项目源代码

按照下面的结构构建项目。

index.js

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

let koa=require('koa')//通过koa let app=new koa()//import创建应用。/router/route这个包，分配的路由器是导出的数据。/router/router，let router=require('。/router/router ')let static=require(' KOA-static ')let path=require(' path ')let views=require(' KOA-views ')let KOA body=require(' KOA-body ')app . use(async(CTX，Next)={ console . log(` $ { CTX . method } $ { CTX . URL }..`)await next()})//对于文件上传时蓑衣网小编2022可以解析多个字段app . use(KOA body({ 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(' Listening

Wallet

Wallet list

nav . html

前端的导航栏是用ejs库的方法加载的。

孔壹学院钱包账号转账httpRequest.js

针对黎明的女神提供的位置遥控(远程位置控制)接口封装的网络请求接口。let request=require(' request ')；let {success，fail}=require(./myUtils')let config=require('./config/config’)异步函数httpRequest(方法，url，参数){控制台。log(' http request:'，url，params)let Promise=new Promise((resolve，reject)={ var options={ method:方法，url: url，body: params，JSON:true 蓑衣网小编2022 }；request(options，function (error，response，body){ if(error){ reject(error)} else { resolve(body)} })let result；//第一个参数是成功的回调//第二个参数是失败的回调等待承诺。然后(函数(数据){ if(数据。错误){结果=失败(数据。error)} else { result=success(data)} }，function(error){ result=fail(error)})控制台。log(JSON。stringify(result))return result }函数generate URL(path){ let domain=' ' if(path。的索引('/v1/wallet/')==0){ domain=config。钱包地址} else { domain=config。EOS配置。httpendpoint }返回域路径}模块。出口项目工具类，提供获取EOSJS实例、返回给前端成功与失败的基本数据结构。x]Eos=require(' Eos js ')let config=require('./config/config ')模块。exports={ geteos js:(密钥提供者)={ config。Eos配置。密钥提供者=密钥提供者返回Eos(配置。Eos config)}，success:(data)={ response data={ code:1，status: 'fail '，data: msg } return responseData }，doCallback: async (fn，args)={ return await fn。应用(this，args)；}，}

wallet.js

处理钱包模块的射流研究…文件。x]$(文档)。ready(function () { alert('欢迎!')})蓑衣网小编2022

eoswallet.css

前端唯一的钢性铸铁文件。x]# main {/* background-color:# 8 bc34 a；*/margin:120 px 50px 50px 50px；}.错误{颜色：红色；}a{颜色：黑色；文字-装饰：无；} a:hover { color:# 666；}正文{ margin:0px；}ulli{列表样式：无；边距：0px}。global-color { color:# 0 ABC 9c；}ul{列表样式：无；填充：0px}。row { display:inline-block；右边距：70px}。top { vertical-align:top } a[class=button]{背景色：米色；填充：2px 10px边框：1px纯灰；}按钮{背景色：米色；边框：1px纯灰；}/*导航-*/# nav { display:flex；justify-content:space-between；背景色：# 0abc9c位置：固定；top:0px；左：0px右：0px } # nav Li { display:inline-block；边距：10px 2px } # nav ul { padding:0px；} # nav a { padding:10px；字体大小：24px } # nav-left { margin-left:20px；} # nav-right { margin-right:20px；}

router.js

路由文件。let router=require(' KOA-router ')()路由器。get('/'，async(CTX)={ await CTX。渲染('钱包。html ')})模块。出口=路由器

五、启动项目

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

启动nodeos服务nodeos-e-p EOS io-plugin EOS io:chain _ API _ plugin-plugin EOS io:history _ API _ plugin

启动keosd服务

keosd若报如下错误另一个keosd正在运行吗？则使用命令pkill keosd停止已经启动的keosd服务，然后再启动凯奥斯德。

启动后端服务在项目EOSWallet的根目录下运行。令node index.js。

六、项目运行效果

参考资料

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）取得同意并注明出处。

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