愿码(ChainDesk.CN)：【EOS钱包开发 三】钱包项目

本课程是EOS钱包开发，后端使用的NodeJS搭建，客户端使用的web前端，VSCode开发工具，Ubuntu16.04开发环境，node v8.11.3，npm v5.6.0。

一、前端架构

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

image.png

image.png

二、后端架构

这个钱包应用程序与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，然后按照如下步骤执行

image.png

image.png

四、项目源码

按照如下结构搭建项目。

image.png

index.js

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

image.png

wallet.html

前端：新建账号的页面。

image.png

nav.html

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

image.png

httpRequest.js

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

image.png

myUtils.js

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

点击此处添加图片说明文字

wallet.js

处理钱包模块的js文件。

image.png

image.png

image.png

六、项目运行效果


参考资料

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

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

本文地址: https://chaindesk.cn/witbook/2/20

愿码(ChainDesk.CN)——连接每个程序员的故事

“愿码”以线上社区线下实战型人才加速器相结合，立志打造全球最大的IT实战型多元化复合型人才生态圈。

免费技术交流群：263270946

技术提升、快速转型请关注微信公众号：愿码