weixin_34110749

以太坊Dapp项目-网页钱包开发手册

修订日期	姓名	邮箱
2018-10-10	brucefeng	[email protected]

前言

在之前的一篇文章以太坊智能合约项目-Token合约开发与部署中，我们提到了钱包了钱包的概念以及主流的几种钱包，如Mist,MyEtherWallet,MetaMask等，之前我们主要将钱包作为一个开发工具使用，用于智能合约的开发与调试工作，使用较多的是浏览器插件钱包MetaMask。

在本文中，我们主要介绍MyEtherWallet以及如何实现一个简易版的MyEtherWallet网页版应用，在本文中，我们能够学习到如下内容

node.js开发基础
web3.js API使用
以太币转账实现
Token转账实现

目前主流的钱包平台已经有太多了，而且有很多已经做得比较完善了，所以我们本文的开发工作只是为了学习以太坊开发技术，并非去设计一个新的钱包软件，重复造轮子几乎没有任何价值。

一. MyEtherWallet介绍

MyEtherWallet 是一个轻钱包，无需下载，所有操作在直接在网页上就可以完成

主要功能如下

Net Wallet : 新建钱包
Send Ether && Tokens ：以太币或者Token转账
Contract: 部署智能合约
ENS：以太坊域名平台
Check TX Status: 查看交易状态
View Wallet Info: 查看钱包信息

由于操作比较简单，这里不做详细讲解，在下文中我们对其主要功能，如新建钱包，以太币或者Token转账，查看交易状态进行参照开发。

二.node.js与web.js

1.Node.js

Node.js是一个JS运行时环境，可以解析，执行JavaScript代码，在这个执行环境中，为JS提供了一些服务器级别的操作API,如文件读写，网络通信，Http服务器等，其使用事件驱动，非阻塞IO模型(异步)，轻量高效，大多数与JS相关的包都放在npm上，通过命令就可以下载不同的库跟框架，无需在去各个模块的官网上面单独下载，如安装koa直接通过npm install koa即可完成。

2. Web3.js

web3.js是一个库集合，允许使用HTTP或者RPC连接与本地或者远程以太坊节点进行交互，包含以太坊生态系统的特定功能，开发者利用web3模块主要连接以太坊的RPC层，从而与区块链进行交互

web3-eth : 与以太坊区块链和智能合约之间的交互
web3-ssh: 用于进行通信的p2p和广播
web-bzz: 用于群协议，分散的文件存储
web3-utils: 主要用于Dapp开发的辅助函数

官方文档: https://web3js.readthedocs.io/en/1.0/

web3.eth.accounts

创建钱包账户

web3.eth.accounts.create();

生成钱包配置

web3.eth.accounts.encrypt(privateKey, password);

通过私钥生成账户对象

web3.eth.accounts.privateKeyToAccount(privateKey);

查询余额

web3.eth.getBalance(address [, defaultBlock] [, callback])

通过私钥跟密码生成配置文件

web3.eth.accounts.encrypt(privateKey, password);

通过配置文件和密码解锁账户

web3.eth.accounts.decrypt(keystoreJsonV3, password);

发送签名交易

web3.eth.sendSignedTransaction(signedTransactionData [, callback])

Example

var Tx = require('ethereumjs-tx');
var privateKey = new Buffer('e331b6d69882b4cb4ea581d88e0b604039a3de5967688d3dcffdd2270c0fd109', 'hex')

var rawTx = {
  nonce: '0x00',
  gasPrice: '0x09184e72a000',
  gasLimit: '0x2710',
  to: '0x0000000000000000000000000000000000000000',
  value: '0x00',
  data: '0x7f7465737432000000000000000000000000000000000000000000000000000000600057'
}

var tx = new Tx(rawTx);
tx.sign(privateKey);

var serializedTx = tx.serialize();

// console.log(serializedTx.toString('hex'));
// 0xf889808609184e72a00082271094000000000000000000000000000000000000000080a47f74657374320000000000000000000000000000000000000000000000000000006000571ca08a8bbf888cfa37bbf0bb965423625641fc956967b81d12e23709cead01446075a01ce999b56a8a88504be365442ea61239198e23d1fce7d00fcfc5cd3b44b7215f

web3.eth.sendSignedTransaction('0x' + serializedTx.toString('hex'))
.on('receipt', console.log);

> // see eth.getTransactionReceipt() for details

(1) nonce

web3.eth.getTransactionCount(address [, defaultBlock] [, callback])

(2) gasPrice

web3.eth.getGasPrice([callback])

(3) gasLimit

预估gas值

3. Koa中间件

Koa号称是基于Node.js平台的下一代web开发框架，Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造，致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa 并没有捆绑任何中间件，而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。

其使用方法可以参考https://koa.bootcss.com/

Koa的最大特色就是中间件，Koa中间件是简单的函数，调用app.user()传入，MiddlewareFunction函数带有两个参数(ctx,next),中间件作为HTTP Request和HTTP Reponse的桥梁，用来实现连接功能，如

app.use(async (ctx, next) =>{
    console.log(`Process ${ctx.request.method} ${ctx.request.url} ...`);
    await next();
});

ctx是一个请求的上下文，封装了传入的http消息，并对该消息进行响应，koa提供了一个Request/Response对象提供了Context的request/response属性与用于处理Http请求的方法。

next是被调用来执行上下游中间件的函数，必须手动调用next()运行下游中间件，否则下游中间件不会被正常执行。可以采用两种不同的方法来实现中间件

async function
common function

(1) 安装启动Koa服务

安装koa

$ mkdir koaTest ; cd koaTest
$ npm init -y
$ npm install koa

创建启动文件

$ vim index.js

var Koa = require("koa") //导入Koa库
var app = new Koa();     //创建Koa应用对象，带有node http服务的koa接口
app.listen(3003); //启动服务的快捷方法

启动服务

$ node index.js

此时会监听3003端口，通过浏览器访问

(2) Context

context是一个请求的上下文，该对象封装了一个传入的http消息，context有request和response属性，我们可以通过涉案值两个属性来处理和相应不同的请求。

$ vim index.js

var Koa = require("koa");
var app = new Koa();
//
app.use(function(ctx,next){
    console.log(ctx.request.path);
    //通过设置ctx的response的body值可以返回数据到客户端
    ctx.response.body = "my koa app";
    console.log(ctx.response.type);
});
app.listen("3003");
console.log("koa server is listening on port 3003");

app.use(function)：将给定的function作为中间件加载到应用中。
ctx: 每一个请求都会创建一段上下文，在控制业务逻辑的中间件中，上下文被寄存在ctx对象中，许多上线文属性和方法都被存在ctx.request和ctx.response中，比如访问ctx.type和ctx.length都被代理到reponse对象，ctx.path和ctx.method都被代理到request对象中。

(3) 网页模板

在实际开发中，返回给用户的网页都是通过模板文件进行返回的，可以让Koa先读取模板文件，然后将这个模板返回给用户，需要指定response的type为text/html类型

var Koa = require("koa");
var app = new Koa();
var fs = require("fs");
app.use(ctx=>{
    console.log(ctx.path);
    //必须指定type
    ctx.type = "text/html";
    ctx.body = fs.createReadStream("./views/teest.html");
    console.log(ctx.type);
});
app.listen(3003);
console.log("koa server is listening on port 3003");

(4) 中间件

Koa所有的功能都是通过中间件实现的，中间件处于HTTP Request和HTTP Response之间。

Koa的中间件之间按照编码书序在栈内以此执行，允许执行操作并向下传递请求，之后过滤并必须返回响应，响应的测试代码与步骤如下

var Koa = require("koa");
var app = new Koa();
//es6新语法:
//函数名 =>(参数) =>{}

var one = (ctx,next) =>{
    console.log("1.1");
    next();
    console.log("1.2");
};

var two = (ctx,next) =>{
    console.log("2.1");
    next();
    console.log("2.2");
};

var three = (ctx, next) =>{
    console.log("3.1");
    next();
    console.log("3.2");
};

app.use(one);
app.use(two);
app.use(three);

app.listen(3003);
console.log("服务启动完毕");

返回结果

2.1
3.1
3.2
2.2
1.2

(5) 异步中间件

由async标记的函数被称为异步函数，在异步函数中，可以通过await调用另外一个异步函数，使用await时，其所在的方法必须使用关键字async

var Koa = require("koa");
var app = new Koa();
app.use(async(ctx,next) =>{
    var start = Date.now();
    await next();
    console.log(`${ctx.url} ${Date.now - start}`);
});
app.use(async (ctx,next)=>{
    ctx.response.body = "async test"
});
app.listen(3003);
console.log("服务启动完毕");

(6) 原生路由

var Koa = require("koa");
var app = new Koa();
//es6新语法:
//函数名 =>(参数) =>{}
app.use((ctx,next)=> {
    console.log("%s %s", ctx.method, ctx.url);
    next();
});

app.use((ctx,next) =>{
    if (ctx.request.path == '/'){
        ctx.response.body = 'index page';
    }else {
        next();
    }
});

app.use((ctx,next) =>{
    if (ctx.request.path == '/error'){
        ctx.response.body = 'error page';
    }
});

app.listen(3003);
console.log("服务启动完毕");

(7) koa-router路由

由于原生路由使用比较繁琐，所以可以通过封装好的koa-router模块，使用router.routers()绑定到中间件

安装koa-router

$ npm install koa-router

var Koa = require("koa");
var app = new Koa();
//导入koa-router,注意要加上()才能生效
var router = require("koa-router")()
router.get("/hello",function(ctx,next){
    ctx.response.body = "hello,brucefeng";
});

router.get("/bye",function (ctx,next){
    ctx.response.body = "good bye brucefeng";
});

//将router路由注册到中间件
app.use(router.routes());

app.listen(3003);
console.log("服务启动完毕");

(8) 请求重定向

一般在如下情况下需要使用到重定向

后台系统升级，对之前的页面不在支持，此时需要使用重定向到新的API上满足用户的访问准确性
完成某个操作后自动跳转至其他页面，如注册成功，登录成功等等

var Koa = require("koa");
var app = new Koa();
//导入koa-router,注意要加上()才能生效
var router = require("koa-router")()
router.get("/hello",function(ctx,next){
    ctx.response.body = "hello,brucefeng";
});

router.get("/hi",function (ctx,next){
   ctx.response.redirect("/hello")
});

//将router路由注册到中间件
app.use(router.routes());

app.listen(3003);
console.log("服务启动完毕");

通过 ctx.response.redirect("/hello")将"/hi"请求重定向到/hello对应的页面

在node.js中访问的url中有中文时，需要通过全局encodeURIComponent(string)进行编码

(9) 获取get请求参数

客户端在请求获取服务的数据时，获取的URL中通常会携带各种参数，服务端如何获取到get请求的参数呢？

格式1：http://127.0.0.1:3003/hello/brucefeng

获取方式: ctx.params.name

格式2：http://127.0.0.1:3003/bye?name=brucefeng

获取方式: ctx.query.name

调用params获取参数的时候，params不是request的属性，需要通过ctx直接调用获取。

(10) 获取post请求参数

Get请求的参数附带在了url上，Post请求的参数在请求体body里面，所以要获取body的数据，需要使用到插件koa-body,通过ctx.request.body.name获取参数.

$ npm install koa-router

var Koa = require("koa");
var app = new Koa();

//导入koa-router,注意要加上()才能生效
var router = require("koa-router")()
//引入koa-body
var koaBody = require("koa-body")

router.post("/hello",function(ctx,next){
    var body = ctx.request.body;
    ctx.response.body = "hello,bruce";
    console.log(body);
    console.log(body.username);
});

//设置multipart : true,支持多个参数
app.use(koaBody({
    multipart:true
}))

//将router路由注册到中间件
app.use(router.routes());

app.listen(3003);
console.log("服务启动完毕");

//通过命令使用curl插件模拟调用一个Post请求
//curl -H "Content-Type:application/json" -X POST --data '{"username":"brucefeng"}' http://localhost:3003/hello

brucefengdeMBP:ETHWalletDemo brucefeng$ node index.js
服务启动完毕
{ username: 'brucefeng' }
brucefeng

(11) 加载静态资源

加载静态资源，如图片，字体，样式表，脚本等，编码指定静态资源的路径是相对于./static的路径。

$ npm install koa-static

var Koa = require("koa");
var app = new Koa();

//导入koa-router,注意要加上()才能生效
var router = require("koa-router")();
var static = require("koa-static");
var path = require("path")

router.get("/hello",function (ctx,next){
    ctx.response.body = " 看我"
})
//静态资源的路径是相对于./static的路径
app.use(static(path.join(__dirname,"./static")))

//将router路由注册到中间件
app.use(router.routes());

app.listen(3003);
console.log("服务启动完毕");

启动服务，通过浏览器访问测试

(12) 模板引擎

模板引擎ejs需要配上模板渲染中间件koa-views使用，如果需要支持其他后缀的文件，需要将文件扩展名映射到引擎中。

$ npm install ejs koa-views

index.js

var Koa = require("koa");
var app = new Koa();

//导入koa-router,注意要加上()才能生效
var router = require("koa-router")();
var static = require("koa-static");
var path = require("path")
var views = require("koa-views")

router.get("/hello",async (ctx,next) =>{
    //将json里面的值替换为文件里面的变量
    var name = "brucefeng";
    await ctx.render("test.ejs",{
        name,
        "sex":"帅哥"
    }) 
})

router.get("/bye",async (ctx,next)=>{
    await ctx.render("home.html",{
        "name": "fengyingcong"
    })
})

app.use(views(
    //默认是views下面获取ejs后缀的文件，如果是其他类型的文件需要指定文件类型
    path.join(__dirname,"./static/views"),
    {extension:"ejs", map:{html: "ejs"}}
))

//静态资源的路径是相对于./static的路径
app.use(static(path.join(__dirname,"./static")))

//将router路由注册到中间件
app.use(router.routes());

app.listen(3003);
console.log("服务启动完毕");

static/views/test.ejs




    
    
    Page Title
    
    
    


    姓名: <%= name %> 性别: <%= sex %>

static/views/home.html




    
    
    Page Title
    
    
    


    姓名: <%= name %>

三.初始化项目环境

1.导入项目依赖

$ mkdir ETHWalletDemo ;cd ETHWalletDemo
$ npm init -y 
$ npm i web3 koa koa-body koa-static koa-views koa-router ejs

2.创建路由文件

$ mkdir  router ; cd router
$ vim router.js

var router = require("koa-router")()
//定义路由newaccount
router.get("/newaccount",(ctx,next)=>{
    ctx.response.body = "创建钱包"
})

module.exports = router

3.创建入口文件

ETHWalletDemo/index.js

//导入./router/router包
var router = require("./router/router.js")
//引入Koa库
var Koa = require("koa")
//通过koa创建一个应用程序
var app = new Koa()

app.use(router.routes())
app.listen(3003)
console.log("钱包启动成功，请访问http://127.0.0.1:3003/newaccount进行测试")

4.创建MVC框架

ETHWalletDemo下创建

$ mkdir models views controllers   #创建MVC框架目录
$ mkdir utils #创建帮助文件目录
$ mkdir -p static/{css,js,html}  #创建静态文件目录

5.完善项目框架

ETHWalletDemo/index.js

//引入Koa库
var Koa = require("koa")
//通过koa创建一个应用程序
var app = new Koa()

//导入./router/router包
var router = require("./router/router.js")
var static = require("koa-static")
var path = require("path")
var views = require("koa-views")
var koaBody = require("koa-body")

//拦截获取网络请求,自定义的function需要使用next()
app.use(async (ctx,next)=>{
    console.log(`${ctx.url} ${ctx.method}...`)
    await next();
})

//注册中间件
//注册静态文件的库到中间件
app.use(static(path.join(__dirname,"static")))
//注册模板引擎的库到中间件
app.use(views(path.join(__dirname,"views"),{extension:"ejs", map:{html: "ejs"}}))
//针对于文件上传时，可以解析多个字段
app.use(koaBody({multipart:true})) 
app.use(router.routes())
app.listen(3003)
console.log("钱包启动成功，请访问http://127.0.0.1:3003/...进行测试")

四.创建钱包账户

1.创建钱包账户

(1) 封装web3库调用

utils/myUtils.js

var web3 = require("../utils/myUtils").getWeb3()
module.exports = {
    getWeb3: ()=>{
        var Web3 = require("web3");
        var web3 = new Web3(Web3.givenProvider || 'http://127.0.0.1:8545');
        return web3;
    }
}

(2) 创建控制器

controllers/newAccount.js

var web3 = require("../utils/myUtils").getWeb3()

module.exports = {
    //获取创建账号的页面
    newAccountHtml: async (ctx) =>{
        await ctx.render("newaccount.html")
    },
    //表单提交被触发的方法
    newAccount: (ctx) =>{
        console.log("newAccount");
        var password = ctx.request.body.password;
        //通过密码创建钱包账户
        var account = web3.eth.accounts.create(password);
        console.log(account.address);
        ctx.response.body = "钱包账户: "+account.address +" 创建成功";
    }
}

(3) 创建前端页面

views/newaccount.html



    创建钱包


    
        创建一个新的钱包

(4) 配置路由

router/router.js

var router = require("koa-router")()
var newAccount = require("../controllers/newAccount")
//创建账号的页面
router.get("/newaccount",newAccount.newAccountHtml)
//提交创建账号表单
router.post("/newaccount",newAccount.newAccount)

module.exports = router

2.下载配置文件

(1) 创建目录保存配置文件

$ mkdir static/keystore

(2) 实现配置文件的保存

controllers/newAccount.js

var web3 = require("../utils/myUtils").getWeb3()
var fs = require("fs")
var path = require("path")
module.exports = {
    //获取创建账号的页面
    newAccountHtml: async (ctx) =>{
        await ctx.render("newaccount.html")
    },
    //表单提交被触发的方法
    newAccount: async (ctx) =>{
        console.log("newAccount");
        var password = ctx.request.body.password;
        //通过密码创建钱包账户
        var account = web3.eth.accounts.create(password);
        console.log(account.address);
        //根据账号私钥跟密码生成keystore文件
        var keystore = web3.eth.accounts.encrypt(account.privateKey, password);
        //keystore文件保存到文件中,

        var keystoreString = JSON.stringify(keystore);
         //格式如下:UTC--Date--Adress
         //UTC--2018-09-26T05-07-57.260Z--937d091780693ab7f51331bb52797a9267bb9ed2
        var fileTime = new Date().toDateString()
        var fileName = 'UTC--' + fileTime + '--' + account.address.slice(2) ;
        var filePath = path.join(__dirname,"../static/keystore",fileName)
        fs.writeFileSync(filePath,keystoreString)
        await ctx.render("downloadkeystore.html",{
            "downloadurl":path.join("keystore",fileName),
            "privatekey":account.privateKey
        })
    }
}

此时生成的Keystore文件将会被保存至static/keystore目录中

(3) 创建前端页面

view/downloadkeystore.html




    保存KeyStore文件
    
    
    



    
        
    

    

        
            保存KeyStore文件
            保存KeyStore文件
            

            
        
        
            保存钱包私钥
            
                <%= privatekey %>
                请务必妥善保管!

由于涉及到了onclick，所以，我们现在需要创建js代码实现相关方法

实现saveKeystoreNext方法

导入jquery文件

$ mkdir js/lib

将jquery.url.js与jquery-3.3.1.min.js拷贝进lib目录中

实现方法

static/js/wallet.js

function saveKeystoreNext(){
    //隐藏保存keystore页面
    $("#save-keystore").hide()
    //显示保存private页面
    $("#save-privatekey").show()
}

3.导航页设计

此处的导航页前端用的是蓝鲸智云的MagicBox组件，作为蓝鲸智云的忠实粉丝，推荐大家使用

http://magicbox.bk.tencent.com/

(1) 创建导航页

static/html/nav.html

(2) 集成导航页

将nav.html集成到所有相关网页中即可,如newaccount.html

五.解锁钱包账户

在通过钱包转账之前，我们都需要先对钱包账户进行解锁后才能进行正常交易，目前主要的解锁方式为

私钥解锁
配置文件+密码解锁
助记词解锁

本文我们主要讲解如何开发通过私钥解锁跟配置文件解锁来进行账户解锁。

我们模仿MyEtherWallet的方式，将解锁钱包的功能放在转账交易模块下面，便于整合。

1. 搭建代码框架

(1) 创建控制器

controllers/transaction.js

module.exports = {
    transactionHtml: async (ctx) =>{
        await ctx.render("transaction.html")
    },
}

(2) 创建前端页面

views/transaction.html




    转账
    
    
    



    
        
    
    
        发送以太币/Token
        
        Keystore File
        

        
        Private Key

(3) 配置路由

router/router.js

var router = require("koa-router")();
var newAccount = require("../controllers/newAccount");
var transactionController = require("../controllers/transaction");

router.get("/",newAccount.homeHtml);
//创建账号的页面
router.get("/newaccount.html",newAccount.newAccountHtml);
//提交创建账号表单
router.post("/newaccount",newAccount.newAccount);

//获取转账页面
router.get("/transaction.html",transactionController.transactionHtml);

module.exports = router

2. 通过私钥解锁账户

(1) 修改前端页面

views/transaction.html




    转账
    
    
    
    



    
        
    
    
        发送以太币/Token
        
        Keystore File
        

        
        Private Key
        
        

        

        
            请输入钱包私钥[请认准官网，防止钓鱼]

修改js/wallet.js代码

function saveKeystoreNext(){
    //隐藏保存keystore页面
    $("#save-keystore").hide()
    //显示保存private页面
    $("#save-privatekey").show()
}

function unlockAccountWithPK(){
    var privateKey = $("#inputAccountType1").val()
    console.log(privateKey)
    //将私钥传至服务端
    $post("/unlockWithPK",`privatekey=${privateKey}`,function(res,status){
        console.log(status + JSON.stringify(res))
    })
}

// 对元素的操作需要等文档加载完毕后才能调用成功
$(document).ready(function (){
    $("input[name=unlockAccountType]").change(function(){
        if (this.value == 0) {
            //如果点击keystore，则显示keystore操作
            $("#unlockAccount0").show()
            $("#unlockAccount1").hide()
        }else {
            $("#unlockAccount0").hide()
            $("#unlockAccount1").show()

        }

    })
})

(2) 创建控制器

controllers/account.js

var web3 = require("../utils/myUtils").getWeb3()

module.exports = {
    unlockWithPK: (ctx) => {
        var privateKey = ctx.request.body.privatekey
        console.log(privateKey)
        var account = web3.eth.accounts.privateKeyToAccount(privateKey);
        console.log(account.address);
        ctx.response.body = "解锁成功";
    }
}

(3) 修改路由

router/router.js

var router = require("koa-router")();
var newAccount = require("../controllers/newAccount");
var transactionController = require("../controllers/transaction");
var accountController = require("../controllers/account")

router.get("/",newAccount.homeHtml);
//创建账号的页面
router.get("/newaccount.html",newAccount.newAccountHtml);
//提交创建账号表单
router.post("/newaccount",newAccount.newAccount);

//获取转账页面
router.get("/transaction.html",transactionController.transactionHtml);
router.post("/unlockWithPK",accountController.unlockWithPK);

module.exports = router

(4) 阶段性测试

启动服务

$ cd ETHWalletDemo
$ $ node index.js 
钱包启动成功，请访问http://127.0.0.1:3003/...进行测试

浏览器访问

http://127.0.0.1:3003/

[1] 首页

[2] 创建钱包

输入密码，此处先不隐藏，后期设计即可

)

点击保存Keystore文件，并点击Next Step

注意:此处的账号私钥不做隐藏，仅仅是为了测试需要，大家自己实际使用的私钥请务必保存妥当!!!

[3] 解锁账户

后端返回

前端返回

前后端调试成功

3. 显示账户余额

账户刚刚创建完毕，余额为0，我们可以通过私链转账的方式给新账户转入10以太币，具体操作可以参考博客:以太坊联盟链-多节点私链搭建手册中转账交易章节。

(1) 修改控制器

controllers/account.js

var web3 = require("../utils/myUtils").getWeb3()

async function getAccountBalance(address) {
    var balance = await web3.eth.getBalance(address);
    var balanceEther = web3.utils.fromWei(balance, 'ether')
    return balanceEther;
}

module.exports = {
    unlockWithPK: async (ctx) => {
        //1.获取私钥
        var privateKey = ctx.request.body.privatekey
        console.log(privateKey)
        //2.通过私钥解锁账户
        var account = web3.eth.accounts.privateKeyToAccount(privateKey);
        console.log(account)
        //3.获取账户余额
        var balance = await getAccountBalance(account.address)
        console.log(balance)
        responseData = {
            code: 0,
            status: "success",
            data: {
                balance: balance,
                address: account.address
            }
        }
        ctx.response.body = responseData
    }

}

(2) 修改前端页面

views/transaction.html




    转账
    
    
    
    



    
        
    
    
        发送以太币/Token
        
            
            Keystore File
            

            
            Private Key
            
            

            

            
                请输入钱包私钥[请认准官网，防止钓鱼]
                
                
            
        

        
            

            

            
            
                账户地址: 
            

            
                账户余额:

将解锁界面跟账户显示页面分离
根据响应是否成功显示不同页面

修改wallet.js文件

function saveKeystoreNext(){
    //隐藏保存keystore页面
    $("#save-keystore").hide()
    //显示保存private页面
    $("#save-privatekey").show()
}

function unlockAccountWithPK(){
    var privateKey = $("#inputAccountType1").val()
    console.log(privateKey)
    //将私钥传至服务端
    $.post("/unlockWithPK",`privatekey=${privateKey}`,function(res,status){
        console.log(status + JSON.stringify(res))
        //将服务端返回的账户信息显示到页面上
        if (res.code == 0){
            console.log("success yes")
            $("#accountAddress").text(res.data.address)
            $("#accountBalance").text(res.data.balance + " ETH")
            // 隐藏
            $("#transaction0").hide()
            $("#transaction1").show()

        }
    })
}

// 对元素的操作需要等文档加载完毕后才能调用成功
$(document).ready(function (){
    $("input[name=unlockAccountType]").change(function(){
        if (this.value == 0) {
            //如果点击keystore，则显示keystore操作
            $("#unlockAccount0").show()
            $("#unlockAccount1").hide()
        }else {
            $("#unlockAccount0").hide()
            $("#unlockAccount1").show()

        }

    })
})

3. 通过配置文件解锁账户

(1) 封装响应消息

utils/myUtils.js

module.exports = {
    getWeb3: () => {
        var Web3 = require("web3");
        var web3 = new Web3(Web3.givenProvider || 'http://127.0.0.1:8545');
        return web3;
    },
    success: (data) => {
        responseData = {
            code: 0,
            status: "success",
            data: data
        }
        return responseData
    },
    fail :(msg) => {
        responseData = {
            code: 1,
            status: "fail",
            msg: msg
        }
        return responseData
    }
}

(2) 修改控制器

controller/account.js

var web3 = require("../utils/myUtils").getWeb3()
var {success,fail} = require("../utils/myUtils")
var fs = require("fs")

async function getAccountBalance(address) {
    var balance = await web3.eth.getBalance(address);
    var balanceEther = web3.utils.fromWei(balance, 'ether')
    return balanceEther;
}

module.exports = {
    unlockWithPK: async (ctx) => {
        //1.获取私钥
        var privateKey = ctx.request.body.privatekey
        console.log(privateKey)
        //2.通过私钥解锁账户
        var account = web3.eth.accounts.privateKeyToAccount(privateKey);
        console.log(account)
        //3.获取账户余额
        var balance = await getAccountBalance(account.address)
        console.log(balance)
        ctx.response.body = success({
            balance:balance,
            address:account.address
        })
    },

    unlockWithKS: async (ctx) => {
        //获取前端传递的数据，password跟keystore
        var password = ctx.request.body.password
        console.log(password)
        var keystore = ctx.request.files.file
        console.log(keystore)
        //读取缓存文件中keystore的数据
        var keystoreData = fs.readFileSync(keystore.path, "utf8")
        console.log(keystoreData)
        // 通过keystore和密码解锁账户
        var account = web3.eth.accounts.decrypt(JSON.parse(keystoreData), password)
        console.log(account)
        //获取账户余额
        var balance = await getAccountBalance(account.address)
        console.log(balance)
        ctx.response.body = success({
            balance:balance,
            address:account.address
        })

    }
}

(2) 修改前端页面

views/transaction.html




    转账
    
    
    
    



    
        
    
    
        发送以太币/Token
        
            
            Keystore File
            

            
            Private Key
            
            
                请选择KeyStore文件
                
                
                

            

            
                请输入钱包私钥[请认准官网，防止钓鱼]
                
                
            
        

        
            

            

            
            
                账户地址: 
            

            
                账户余额:

修改wallet.js文件

function saveKeystoreNext(){
    //隐藏保存keystore页面
    $("#save-keystore").hide()
    //显示保存private页面
    $("#save-privatekey").show()
}

function configAccountInfo(data) {
    $("#accountAddress").text(data.address)
    $("#accountBalance").text(data.balance + " ETH")
    // 隐藏
    $("#transaction0").hide()
    $("#transaction1").show()
}

function unlockAccountWithPK(){
    var privateKey = $("#inputAccountType1").val()
    console.log(privateKey)
    //将私钥传至服务端
    $.post("/unlockWithPK",`privatekey=${privateKey}`,function(res,status){
        console.log(status + JSON.stringify(res))
        //将服务端返回的账户信息显示到页面上
        if (res.code == 0){
            configAccountInfo(res.data)
        }
    })
}

function unlockAccountWithKS(){
    var filedata = $("#inputAccountType0").val()
    if (filedata.length <=0 ){
        alert("未选择文件，请选择文件上传!")
        return
    }
    //文件上传通过Formdata去存储文件的数据
    var data = new FormData()
    data.append("file", $("#inputAccountType0")[0].files[0])
    data.append("password",$("#inputAccountTypePassword").val())
    //提交到后端的路径
    var urlStr = "/unlockWithKS"
    $.ajax({
        url: urlStr,
        type: "post",
        dataType: "json",
        contentType : false,
        data :data,
        processData: false,
        success : function(res, status) {
            alert("解锁成功，可以使用该账户进行转账操作")
            if (res.code == 0) {
                configAccountInfo(res.data)
            }

        },
        error: function(res, status){
            alert("KeyStore文件与密码不匹配")

        }
    })

}

// 对元素的操作需要等文档加载完毕后才能调用成功
$(document).ready(function (){
    $("input[name=unlockAccountType]").change(function(){
        if (this.value == 0) {
            //如果点击keystore，则显示keystore操作
            $("#unlockAccount0").show()
            $("#unlockAccount1").hide()
        }else {
            $("#unlockAccount0").hide()
            $("#unlockAccount1").show()

        }

    })
})

(3) 配置路由

var router = require("koa-router")();
var newAccount = require("../controllers/newAccount");
var transactionController = require("../controllers/transaction");
var accountController = require("../controllers/account")

router.get("/",newAccount.homeHtml);
//创建账号的页面
router.get("/newaccount.html",newAccount.newAccountHtml);
//提交创建账号表单
router.post("/newaccount",newAccount.newAccount);

//获取转账页面
router.get("/transaction.html",transactionController.transactionHtml);
//通过私钥解锁账户
router.post("/unlockWithPK",accountController.unlockWithPK);
//通过配置文件解锁账户
router.post("/unlockWithKS",accountController.unlockWithKS);

module.exports = router

(4) 阶段性测试

选择配置文件，输入密码解锁

验证成功

显示账户信息

至此，我们现在完成了私钥解锁账户以及配置文件解锁账户的功能了。

六.实现交易转账

1. 以太币转账

$ npm install ethereumjs-tx

(1) 修改控制器

controllers/transaction.js

var {success, fail } = require("../utils/myUtils")
var web3 = require("../utils/myUtils").getWeb3()
module.exports = {
    transactionHtml: async (ctx) => {
        await ctx.render("transaction.html")
    },
    sendTransaction: async (ctx) => {
        var { fromAddress, toAddress, amount, privateKey } = ctx.request.body
        var Tx = require('ethereumjs-tx');
        var privateKey = new Buffer(privateKey.slice(2), 'hex')
        var nonce = await web3.eth.getTransactionCount(fromAddress)
        var gasPrice = await web3.eth.getGasPrice()
        var amountToWei = web3.utils.toWei(amount,'ether')

        var rawTx = {
            nonce: nonce ,
            gasPrice: gasPrice,
            gasLimit: '0x2710',
            to: toAddress,
            value: amountToWei,
            data: '0x00' 
        }
        //对交易的数据进行gas计算，然后将gas值设置到参数中
        var gas = await web3.eth.estimateGas(rawTx)
        rawTx.gas = gas

        var tx = new Tx(rawTx);
        tx.sign(privateKey);

        var serializedTx = tx.serialize();

        var responseData 

       await web3.eth.sendSignedTransaction('0x' + serializedTx.toString('hex'),function(err,data){
           console.log(err)
           console.log(data)
           if (err) {
               responseData = fail(err)
           }
       }).then(function (data){
           console.log(data)
           if (data) {
               responseData = success({
                   "blockHash": data.blockHash,
                   "transactionHash": data.transactionHash
               })
           }else {
               responseData  = fail("交易失败")
           }
       })

    }
}

(2) 修改前端页面

views/transaction.html




    转账
    
    
    
    



    
        
    
    
        发送以太币/Token
        
            
            Keystore File
            

            
            Private Key
            
            
                请选择KeyStore文件
                
                输入密码:
                
                

                

            

            
                请输入钱包私钥[请认准官网，防止钓鱼]
                
                
            
        

        
            
                
                    
                        对方地址
                        
                    
                    
                        发送金额
                        
                    
                    
                    
                    
                

            

            
            
                账户地址: 
            

            
                账户余额: 
            

            
                
                        交易Hash:
                        
                
                
                        Block Hash:

修改wallet.js文件

function saveKeystoreNext(){
    //隐藏保存keystore页面
    $("#save-keystore").hide()
    //显示保存private页面
    $("#save-privatekey").show()
}

function configAccountInfo(data) {
    $("#accountAddress").text(data.address)
    $("#accountBalance").text(data.balance + " ETH")
    // 隐藏
    $("#transaction0").hide()
    $("#transaction1").show()

    $("input[name=fromAddress]").val(data.address)
    $("input[name=privateKey]").val(data.privatekey)
}

function unlockAccountWithPK(){
    var privateKey = $("#inputAccountType1").val()
    console.log(privateKey)
    //将私钥传至服务端
    $.post("/unlockWithPK",`privatekey=${privateKey}`,function(res,status){
        console.log(status + JSON.stringify(res))
        //将服务端返回的账户信息显示到页面上
        if (res.code == 0){
            configAccountInfo(res.data)
        }
    })
}

function unlockAccountWithKS(){
    var filedata = $("#inputAccountType0").val()
    if (filedata.length <=0 ){
        alert("未选择文件，请选择文件上传!")
        return
    }
    //文件上传通过Formdata去存储文件的数据
    var data = new FormData()
    data.append("file", $("#inputAccountType0")[0].files[0])
    data.append("password",$("#inputAccountTypePassword").val())
    //提交到后端的路径
    var urlStr = "/unlockWithKS"
    $.ajax({
        url: urlStr,
        type: "post",
        dataType: "json",
        contentType : false,
        data :data,
        processData: false,
        success : function(res, status) {
            alert("解锁成功，可以使用该账户进行转账操作")
            if (res.code == 0) {
                configAccountInfo(res.data)
            }

        },
        error: function(res, status){
            alert("KeyStore文件与密码不匹配")

        }
    })

}

//转账 对元素的操作需要等文档加载完毕后才能调用成功
$(document).ready(function (){
    $("input[name=unlockAccountType]").change(function(){
        if (this.value == 0) {
            //如果点击keystore，则显示keystore操作
            $("#unlockAccount0").show()
            $("#unlockAccount1").hide()
        }else {
            $("#unlockAccount0").hide()
            $("#unlockAccount1").show()
        }   
    })

    $("#sendTransactionForm").validate({
        rules: {
            toAddress:{
                required:true,
            },
            amount:{
                required:true,
            },     
        },
        messages: {
            toAddress:{
                required:"请输入对方钱包地址",
            },
            amount:{
                required:"请输入转账金额",
            },
        },
        submitHandler: function(form)
        {
            var urlStr = "/sendtransaction"
            alert("urlStr:" +urlStr)
            $(form).ajaxSubmit({
                url:urlStr,
                type:"post",
                dataType:"json",
                success:function(res,status){
                    console.log(status + JSON.stringify(res))
                    if (res.code  == 0){
                        $("#transactionCompleteHash0").text(res.data.transactionHash)
                        $("#transactionCompleteHash1").text(res.data.blockHash)
                        $("#transactionComplete").show()
                    }
                },
                error:function(res,status){
                    console.log(status + JSON.stringify(res))

                }
            })
        }
    })

})

(3) 配置路由

router/router.js

var router = require("koa-router")();
var newAccount = require("../controllers/newAccount");
var transactionController = require("../controllers/transaction");
var accountController = require("../controllers/account")

router.get("/",newAccount.homeHtml);
//创建账号的页面
router.get("/newaccount.html",newAccount.newAccountHtml);
//提交创建账号表单
router.post("/newaccount",newAccount.newAccount);

//获取转账页面
router.get("/transaction.html",transactionController.transactionHtml);
router.post("/sendtransaction",transactionController.sendTransaction)
//通过私钥解锁账户
router.post("/unlockWithPK",accountController.unlockWithPK);
//通过配置文件解锁账户
router.post("/unlockWithKS",accountController.unlockWithKS);

module.exports = router

2. 交易信息查询

(1) 修改控制器

controller/transaction.js

var { success, fail } = require("../utils/myUtils")
var web3 = require("../utils/myUtils").getWeb3()
module.exports = {
    transactionHtml: async (ctx) => {
        await ctx.render("transaction.html")
    },
    sendTransaction: async (ctx) => {
        var { fromAddress, toAddress, amount, privateKey } = ctx.request.body
        var Tx = require('ethereumjs-tx');
        var privateKey = new Buffer(privateKey.slice(2), 'hex')
        var nonce = await web3.eth.getTransactionCount(fromAddress)
        var gasPrice = await web3.eth.getGasPrice()
        var amountToWei = web3.utils.toWei(amount, 'ether')

        var rawTx = {
            nonce: nonce,
            gasPrice: gasPrice,
            gasLimit: '0x2710',
            to: toAddress,
            value: amountToWei,
            data: '0x00'
        }
        //对交易的数据进行gas计算，然后将gas值设置到参数中
        var gas = await web3.eth.estimateGas(rawTx)
        rawTx.gas = gas

        var tx = new Tx(rawTx);
        tx.sign(privateKey);

        var serializedTx = tx.serialize();

        var responseData;

        await web3.eth.sendSignedTransaction('0x' + serializedTx.toString('hex'), function (err, data) {
            console.log(err)
            console.log(data)
            if (err) {
                responseData = fail(err)
            }
        }).then(function (data) {
            console.log(data)
            if (data) {
                responseData = success({
                    "blockHash": data.blockHash,
                    "transactionHash": data.transactionHash
                })
            } else {
                responseData = fail("交易失败")
            }
        })
        ctx.response.body = responseData

    },
    queryTransactionHtml: async (ctx) => {
        await ctx.render("queryTransaction.html")
    },
    queryTransaction: async (ctx) => {
        var txHash = ctx.request.body.txHash
        await web3.eth.getTransaction(txHash, function (err, res) {
            if (err) {
                responseData = fail(err)
            } 
        }).then(function(res){
            if (res) {
                responseData = success(res)
            }else {
                responseData = fail("查询失败")
            }
        })
        ctx.response.body = responseData

    }
}

(2) 创建前端页面

views/queryTransaction.html

修改wallet.js文件

function saveKeystoreNext() {
    //隐藏保存keystore页面
    $("#save-keystore").hide()
    //显示保存private页面
    $("#save-privatekey").show()
}

function configAccountInfo(data) {
    $("#accountAddress").text(data.address)
    $("#accountBalance").text(data.balance + " ETH")
    // 隐藏
    $("#transaction0").hide()
    $("#transaction1").show()

    $("input[name=fromAddress]").val(data.address)
    $("input[name=privateKey]").val(data.privatekey)
}

function unlockAccountWithPK() {
    var privateKey = $("#inputAccountType1").val()
    console.log(privateKey)
    //将私钥传至服务端
    $.post("/unlockWithPK", `privatekey=${privateKey}`, function (res, status) {
        console.log(status + JSON.stringify(res))
        //将服务端返回的账户信息显示到页面上
        if (res.code == 0) {
            configAccountInfo(res.data)
        }
    })
}

function unlockAccountWithKS() {
    var filedata = $("#inputAccountType0").val()
    if (filedata.length <= 0) {
        alert("未选择文件，请选择文件上传!")
        return
    }
    //文件上传通过Formdata去存储文件的数据
    var data = new FormData()
    data.append("file", $("#inputAccountType0")[0].files[0])
    data.append("password", $("#inputAccountTypePassword").val())
    //提交到后端的路径
    var urlStr = "/unlockWithKS"
    $.ajax({
        url: urlStr,
        type: "post",
        dataType: "json",
        contentType: false,
        data: data,
        processData: false,
        success: function (res, status) {
            alert("解锁成功，可以使用该账户进行转账操作")
            if (res.code == 0) {
                configAccountInfo(res.data)
            }

        },
        error: function (res, status) {
            alert("KeyStore文件与密码不匹配")

        }
    })

}

//转账 对元素的操作需要等文档加载完毕后才能调用成功
$(document).ready(function () {
    $("input[name=unlockAccountType]").change(function () {
        if (this.value == 0) {
            //如果点击keystore，则显示keystore操作
            $("#unlockAccount0").show()
            $("#unlockAccount1").hide()
        } else {
            $("#unlockAccount0").hide()
            $("#unlockAccount1").show()
        }
    })

    $("#sendTransactionForm").validate({
        rules: {
            toAddress: {
                required: true,
            },
            amount: {
                required: true,
            },
        },
        messages: {
            toAddress: {
                required: "请输入对方钱包地址",
            },
            amount: {
                required: "请输入转账金额",
            },
        },
        submitHandler: function (form) {
            var urlStr = "/sendtransaction"
            alert("urlStr:" + urlStr)
            $(form).ajaxSubmit({
                url: urlStr,
                type: "post",
                dataType: "json",
                success: function (res, status) {
                    console.log(status + JSON.stringify(res))
                    if (res.code == 0) {
                        $("#transactionCompleteHash0").text(res.data.transactionHash)
                        $("#transactionCompleteHash1").text(res.data.blockHash)
                        $("#transactionComplete").show()
                    }
                },
                error: function (res, status) {
                    console.log(status + JSON.stringify(res))

                }
            })
        }
    })

})

//查询交易详情
function queryTransaction() {
    var txHash = $("#txHash").val()
    $.post("/queryTransaction", "txHash=" + txHash, function (res, status) {
        console.log(status + JSON.stringify(res))
        if (res.code == 0) {
            alert("查询成功")
            $("#transactionInfo").text(JSON.stringify(res.data, null, 4))
        } else {
            alert("查询失败")
        }
    })
}

(3) 配置路由

router/router.js

var router = require("koa-router")();
var newAccount = require("../controllers/newAccount");
var transactionController = require("../controllers/transaction");
var accountController = require("../controllers/account")

router.get("/",newAccount.homeHtml);
//创建账号的页面
router.get("/newaccount.html",newAccount.newAccountHtml);
//提交创建账号表单
router.post("/newaccount",newAccount.newAccount);

//获取转账页面
router.get("/transaction.html",transactionController.transactionHtml);
//发送交易
router.post("/sendtransaction",transactionController.sendTransaction)
//查询交易详情
router.get("/queryTransaction.html",transactionController.queryTransactionHtml)
router.post("/queryTransaction",transactionController.queryTransaction)
//通过私钥解锁账户
router.post("/unlockWithPK",accountController.unlockWithPK);
//通过配置文件解锁账户
router.post("/unlockWithKS",accountController.unlockWithKS);

module.exports = router

(4) 阶段性测试

执行账户解锁

执行转账交易

以太坊私有链终端产生交易,执行挖矿

显示交易Hash以及区块Hash

通过交易Hash返回交易详情

3. 实现Token转账

以上内容，我们实现了对以太币的转账与查询功能，而现实情况中，我们很多区块链公司都会开发适用于以太坊与自己Token的钱包,本文直接沿用以太坊智能合约项目-Token合约开发与部署中编写的合约代码。

(1) 获取合约信息

获取Token的ABI

获取Token合约地址

通过Remix进行部署后获取地址:0xa77a5c71b9cf71e89215ceec9767c536e79ced68

(2) 创建控制器

controller/token.js


var { success, fail } = require("../utils/myUtils")
var web3 = require("../utils/myUtils").getWeb3()
var myContract = require("../models/contract").getContract()

module.exports = {
    sendTokenTransaction: async (ctx) => {
        var { fromAddress, toAddress, amount, privateKey } = ctx.request.body
        var Tx = require('ethereumjs-tx');
        var privateKey = new Buffer(privateKey.slice(2), 'hex')
        var nonce = await web3.eth.getTransactionCount(fromAddress)
        var gasPrice = await web3.eth.getGasPrice()
        //获取Token合约的decimals
        var decimals = await myContract.methods.decimals().call()
        var amountToWei = amount * Math.pow(10, decimals)

        var myBalance = await myContract.methods.balanceOf(fromAddress).call()
        if (myBalance < amountToWei) {
            ctx.response.body = fail("余额不足")
            return
        }
        var tokenData = await myContract.methods.transfer(toAddress, amountToWei).encodeABI()

        var rawTx = {
            nonce: nonce,
            gasPrice: gasPrice,
            gasLimit: '0x2710',
            to: myContract.options.address, //如果是发送token ,此处应该填写合约地址,此处需要注意
            value: amountToWei,
            // data: tokenData
            data: "0x00"
        }
        //对交易的数据进行gas计算，然后将gas值设置到参数中
        var gas = await web3.eth.estimateGas(rawTx)
        rawTx.gas = gas

        var tx = new Tx(rawTx);
        tx.sign(privateKey);

        var serializedTx = tx.serialize();

        var responseData;

        await web3.eth.sendSignedTransaction('0x' + serializedTx.toString('hex'), function (err, data) {
            console.log(err)
            console.log(data)
            if (err) {
                responseData = fail(err)
            }
        }).then(function (data) {
            console.log(data)
            if (data) {
                responseData = success({
                    "blockHash": data.blockHash,
                    "transactionHash": data.transactionHash
                })
            } else {
                responseData = fail("交易失败")
            }
        })
        ctx.response.body = responseData

    }
}

(3) 创建模型

models/contract.js

var web3 = require("../utils/myUtils").getWeb3()

module.exports = {
    getContract :(ctx)=> {
        var ABI = [
            {
                "constant": true,
                "inputs": [],
                "name": "name",
                "outputs": [
                    {
                        "name": "",
                        "type": "string"
                    }
                ],
                "payable": false,
                "stateMutability": "view",
                "type": "function"
            },
            {
                "constant": false,
                "inputs": [
                    {
                        "name": "_spender",
                        "type": "address"
                    },
                    {
                        "name": "_value",
                        "type": "uint256"
                    }
                ],
                "name": "approve",
                "outputs": [
                    {
                        "name": "success",
                        "type": "bool"
                    }
                ],
                "payable": false,
                "stateMutability": "nonpayable",
                "type": "function"
            },
            {
                "constant": true,
                "inputs": [],
                "name": "totalSupply",
                "outputs": [
                    {
                        "name": "",
                        "type": "uint256"
                    }
                ],
                "payable": false,
                "stateMutability": "view",
                "type": "function"
            },
            {
                "constant": false,
                "inputs": [
                    {
                        "name": "_from",
                        "type": "address"
                    },
                    {
                        "name": "_to",
                        "type": "address"
                    },
                    {
                        "name": "_value",
                        "type": "uint256"
                    }
                ],
                "name": "transferFrom",
                "outputs": [
                    {
                        "name": "success",
                        "type": "bool"
                    }
                ],
                "payable": false,
                "stateMutability": "nonpayable",
                "type": "function"
            },
            {
                "constant": true,
                "inputs": [],
                "name": "decimals",
                "outputs": [
                    {
                        "name": "",
                        "type": "uint8"
                    }
                ],
                "payable": false,
                "stateMutability": "view",
                "type": "function"
            },
            {
                "constant": true,
                "inputs": [
                    {
                        "name": "_owner",
                        "type": "address"
                    }
                ],
                "name": "balanceOf",
                "outputs": [
                    {
                        "name": "balance",
                        "type": "uint256"
                    }
                ],
                "payable": false,
                "stateMutability": "view",
                "type": "function"
            },
            {
                "constant": true,
                "inputs": [],
                "name": "symbol",
                "outputs": [
                    {
                        "name": "",
                        "type": "string"
                    }
                ],
                "payable": false,
                "stateMutability": "view",
                "type": "function"
            },
            {
                "constant": false,
                "inputs": [
                    {
                        "name": "_to",
                        "type": "address"
                    },
                    {
                        "name": "_value",
                        "type": "uint256"
                    }
                ],
                "name": "transfer",
                "outputs": [
                    {
                        "name": "success",
                        "type": "bool"
                    }
                ],
                "payable": false,
                "stateMutability": "nonpayable",
                "type": "function"
            },
            {
                "constant": true,
                "inputs": [
                    {
                        "name": "_owner",
                        "type": "address"
                    },
                    {
                        "name": "_spender",
                        "type": "address"
                    }
                ],
                "name": "allowance",
                "outputs": [
                    {
                        "name": "remaining",
                        "type": "uint256"
                    }
                ],
                "payable": false,
                "stateMutability": "view",
                "type": "function"
            },
            {
                "inputs": [
                    {
                        "name": "_name",
                        "type": "string"
                    },
                    {
                        "name": "_symbol",
                        "type": "string"
                    },
                    {
                        "name": "_decimals",
                        "type": "uint8"
                    },
                    {
                        "name": "_totalSupply",
                        "type": "uint256"
                    }
                ],
                "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"
            },
            {
                "anonymous": false,
                "inputs": [
                    {
                        "indexed": true,
                        "name": "_owner",
                        "type": "address"
                    },
                    {
                        "indexed": true,
                        "name": "_spender",
                        "type": "address"
                    },
                    {
                        "indexed": false,
                        "name": "_value",
                        "type": "uint256"
                    }
                ],
                "name": "Approval",
                "type": "event"
            }
        ]

        var contractAddress = "0xa77a5c71b9cf71e89215ceec9767c536e79ced68"
        var myContract = new web3.eth.Contract(ABI,contractAddress)
        return myContract

    }
}

(4) 修改控制器

controller/account.js

var web3 = require("../utils/myUtils").getWeb3()
var { success, fail } = require("../utils/myUtils")
var fs = require("fs")
var myContract = require("..//models/contract").getContract()

async function getAccountBalance(address) {
    var balance = await web3.eth.getBalance(address);
    var balanceEther = web3.utils.fromWei(balance, 'ether')
    return balanceEther;
}

async function setResponseData(account) {
    //配置返回给前端的数据:以太币跟Token的数据
    var balance = await getAccountBalance(account.address)
    console.log(balance)
    //获取Token数据
    var tokenBalance = await myContract.methods.balanceOf(account.address).call()
    var tokenSymbol = await myContract.methods.symbol().call()
    return success({
        balance: balance,
        address: account.address,
        privatekey: account.privateKey,
        tokenBalance: tokenBalance,
        tokenSymbol: tokenSymbol

    })

}

module.exports = {
    unlockWithPK: async (ctx) => {
        //1.获取私钥
        var privateKey = ctx.request.body.privatekey
        console.log(privateKey)
        //2.通过私钥解锁账户
        var account = web3.eth.accounts.privateKeyToAccount(privateKey);
        console.log(account)
        //3.获取账户余额
        var balance = await getAccountBalance(account.address)
        //将账户信息返回给前端 
        ctx.response.body = await setResponseData(account)
    },

    unlockWithKS: async (ctx) => {
        //获取前端传递的数据，password跟keystore
        var password = ctx.request.body.password
        console.log(password)
        var keystore = ctx.request.files.file
        console.log(keystore)
        //读取缓存文件中keystore的数据
        var keystoreData = fs.readFileSync(keystore.path, "utf8")
        console.log(keystoreData)
        // 通过keystore和密码解锁账户
        var account = web3.eth.accounts.decrypt(JSON.parse(keystoreData), password)
        console.log(account)
        //将账户信息返回给前端 
        ctx.response.body = await setResponseData(account)

    }
}

修改前端页面




    转账
    
    
    
    



    
        
    
    
        发送以太币/Token
        
            
            Keystore File
            

            
            Private Key
            
            
                请选择KeyStore文件
                
                输入密码:
                
                

                

            

            
                请输入钱包私钥[请认准官网，防止钓鱼]
                
                
            
        

        
            
                
                    
                        对方地址
                        
                    
                    
                        发送金额
                        
                    
                    
                    
                    
                

            

            
            
                账户地址: 
            

            
                账户余额: 
                

                
            

            
                
                        交易Hash:
                        
                
                
                        Block Hash:

修改wallet.js文件

function saveKeystoreNext() {
    //隐藏保存keystore页面
    $("#save-keystore").hide()
    //显示保存private页面
    $("#save-privatekey").show()
}

function configAccountInfo(data) {
    $("#accountAddress").text(data.address)
    $("#accountBalance").text(data.balance + " ETH")
    // 隐藏
    $("#transaction0").hide()
    $("#transaction1").show()

    $("input[name=fromAddress]").val(data.address)
    $("input[name=privateKey]").val(data.privatekey)

    $("#accountTokenInfo").text(data.tokenBalance + " " + data.tokenSymbol)
    $("#TokenSymbol").text(data.tokenSymbol)
}

function unlockAccountWithPK() {
    var privateKey = $("#inputAccountType1").val()
    console.log(privateKey)
    //将私钥传至服务端
    $.post("/unlockWithPK", `privatekey=${privateKey}`, function (res, status) {
        console.log(status + JSON.stringify(res))
        //将服务端返回的账户信息显示到页面上
        if (res.code == 0) {
            configAccountInfo(res.data)
        }
    })
}

function unlockAccountWithKS() {
    var filedata = $("#inputAccountType0").val()
    if (filedata.length <= 0) {
        alert("未选择文件，请选择文件上传!")
        return
    }
    //文件上传通过Formdata去存储文件的数据
    var data = new FormData()
    data.append("file", $("#inputAccountType0")[0].files[0])
    data.append("password", $("#inputAccountTypePassword").val())
    //提交到后端的路径
    var urlStr = "/unlockWithKS"
    $.ajax({
        url: urlStr,
        type: "post",
        dataType: "json",
        contentType: false,
        data: data,
        processData: false,
        success: function (res, status) {
            alert("解锁成功，可以使用该账户进行转账操作")
            if (res.code == 0) {
                configAccountInfo(res.data)
            }

        },
        error: function (res, status) {
            alert("KeyStore文件与密码不匹配")

        }
    })

}

//转账 对元素的操作需要等文档加载完毕后才能调用成功
$(document).ready(function () {
    $("input[name=unlockAccountType]").change(function () {
        if (this.value == 0) {
            //如果点击keystore，则显示keystore操作
            $("#unlockAccount0").show()
            $("#unlockAccount1").hide()
        } else {
            $("#unlockAccount0").hide()
            $("#unlockAccount1").show()
        }
    })

    $("#sendTransactionForm").validate({
        rules: {
            toAddress: {
                required: true,
            },
            amount: {
                required: true,
            },
        },
        messages: {
            toAddress: {
                required: "请输入对方钱包地址",
            },
            amount: {
                required: "请输入转账金额",
            },
        },
        submitHandler: function (form) {
            var urlStr
            var tokenType = $("#TokenType").val()
            if (tokenType == 0) {
                urlStr = "/sendtransaction"
            }else {
                urlStr = "/sendToken"
            }

            alert("urlStr:" + urlStr)
            $(form).ajaxSubmit({
                url: urlStr,
                type: "post",
                dataType: "json",
                success: function (res, status) {
                    console.log(status + JSON.stringify(res))
                    if (res.code == 0) {
                        $("#transactionCompleteHash0").text(res.data.transactionHash)
                        $("#transactionCompleteHash1").text(res.data.blockHash)
                        $("#transactionComplete").show()
                    }
                },
                error: function (res, status) {
                    console.log(status + JSON.stringify(res))

                }
            })
        }
    })

})

//查询交易详情
function queryTransaction() {
    var txHash = $("#txHash").val()
    $.post("/queryTransaction", "txHash=" + txHash, function (res, status) {
        console.log(status + JSON.stringify(res))
        if (res.code == 0) {
            alert("查询成功")
            $("#transactionInfo").text(JSON.stringify(res.data, null, 4))
        } else {
            alert("查询失败")
        }
    })
}

(5) 配置路由

var router = require("koa-router")();
var newAccount = require("../controllers/newAccount");
var transactionController = require("../controllers/transaction");
var accountController = require("../controllers/account")
var tokenController = require("../controllers/token")

router.get("/",newAccount.homeHtml);
//创建账号的页面
router.get("/newaccount.html",newAccount.newAccountHtml);
//提交创建账号表单
router.post("/newaccount",newAccount.newAccount);

//获取转账页面
router.get("/transaction.html",transactionController.transactionHtml);
//发送交易
router.post("/sendtransaction",transactionController.sendTransaction)
//查询交易详情
router.get("/queryTransaction.html",transactionController.queryTransactionHtml)
router.post("/queryTransaction",transactionController.queryTransaction)
//通过私钥解锁账户
router.post("/unlockWithPK",accountController.unlockWithPK);
//通过配置文件解锁账户
router.post("/unlockWithKS",accountController.unlockWithKS);

//token转账
router.post("/sendToken", tokenController.sendTokenTransaction)

module.exports = router

你可能感兴趣的:(以太坊Dapp项目-网页钱包开发手册)

关于沟通这件事，项目经理不需要每次都面对面进行流程大师兄
很多项目经理都会遇到这样的问题，项目中由于事情太多，根本没有足够的时间去召开会议，那在这种情况下如何去有效地管理项目中的利益相关者？当然，不建议电子邮件也不需要开会的话，建议可以采取下面几种方式来形成有效的沟通，这几种方式可以帮助你努力的通过各种办法来保持和各方面的联系。项目经理首先要问自己几个问题，项目中哪些利益相关者是必须要进行沟通的？可以列出项目中所有的利益相关者清单，同时也整理出项目中哪些
OC语言多界面传值五大方式 Magnetic_h ios ui 学习 objective-c 开发语言
前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
element实现动态路由+面包屑软件技术NINI vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
如何在 Fork 的 GitHub 项目中保留自己的修改并同步上游更新？github_fork_update iBaoxing github
如何在Fork的GitHub项目中保留自己的修改并同步上游更新？在GitHub上Fork了一个项目后，你可能会对项目进行一些修改，同时原作者也在不断更新。如果想要在保留自己修改的基础上，同步原作者的最新更新，很多人会不知所措。本文将详细讲解如何在不丢失自己改动的情况下，将上游仓库的更新合并到自己的仓库中。问题描述假设你在GitHub上Fork了一个项目，并基于该项目做了一些修改，随后你发现原作者对
抖音乐买买怎么加入赚钱?赚钱方法是什么测评君高省
你会在抖音买东西吗?如果会，那么一定要免费注册一个乐买买，抖音直播间，橱窗，小视频里的小黄车买东西都可以返佣金!省下来都是自己的，分享还可以赚钱乐买买是好省旗下的抖音返佣平台，乐买买分析社交电商的价值，乐买买属于今年难得的副业项目风口机会，2019年错过做好省的搞钱的黄金时期，那么2022年千万别再错过乐买买至于我为何转到高省呢？当然是高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自
Python教程：一文了解使用Python处理XPath 旦莫 Python进阶 python 开发语言
目录1.环境准备1.1安装lxml1.2验证安装2.XPath基础2.1什么是XPath？2.2XPath语法2.3示例XML文档3.使用lxml解析XML3.1解析XML文档3.2查看解析结果4.XPath查询4.1基本路径查询4.2使用属性查询4.3查询多个节点5.XPath的高级用法5.1使用逻辑运算符5.2使用函数6.实战案例6.1从网页抓取数据6.1.1安装Requests库6.1.2代
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
GitHub上克隆项目 bigbig猩猩 github
从GitHub上克隆项目是一个简单且直接的过程，它允许你将远程仓库中的项目复制到你的本地计算机上，以便进行进一步的开发、测试或学习。以下是一个详细的步骤指南，帮助你从GitHub上克隆项目。一、准备工作1.安装Git在克隆GitHub项目之前，你需要在你的计算机上安装Git工具。Git是一个开源的分布式版本控制系统，用于跟踪和管理代码变更。你可以从Git的官方网站（https://git-scm.
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
git - Webhook让部署自动化大猪大猪
我们现在有一个需求，将项目打包上传到gitlab或者github后，程序能自动部署，不用手动地去服务器中进行项目更新并运行，如何做到？这里我们可以使用gitlab与github的挂钩，挂钩的原理就是，每当我们有请求到gitlab与github服务器时，这时他俩会根据我们配置的挂钩地扯进行访问，webhook挂钩程序会一直监听着某个端口请求，一但收到他们发过来的请求，这时就知道用户有请求提交了，这时
每日算法&面试题，大厂特训二十八天——第二十天（树）肥学 ⚡算法题⚡面试题每日精进 java 算法数据结构
目录标题导读算法特训二十八天面试题点击直接资料领取导读肥友们为了更好的去帮助新同学适应算法和面试题，最近我们开始进行专项突击一步一步来。上一期我们完成了动态规划二十一天现在我们进行下一项对各类算法进行二十八天的一个小总结。还在等什么快来一起肥学进行二十八天挑战吧！！特别介绍小白练手专栏，适合刚入手的新人欢迎订阅编程小白进阶python有趣练手项目里面包括了像《机器人尬聊》《恶搞程序》这样的有趣文章
webpack图片等资源的处理 dmengmeng
需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
Faiss Tips：高效向量搜索与聚类的利器焦习娜Samantha
FaissTips：高效向量搜索与聚类的利器faiss_tipsSomeusefultipsforfaiss项目地址:https://gitcode.com/gh_mirrors/fa/faiss_tips项目介绍Faiss是由FacebookAIResearch开发的一个用于高效相似性搜索和密集向量聚类的库。它支持多种硬件平台，包括CPU和GPU，能够在海量数据集上实现快速的近似最近邻搜索（AN
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
冬天短期的暴利小生意有哪些？那些小生意适合新手做？一起高省
短期生意不失为创业的一个商机，不过短期生意的商机是转瞬即逝的，而且这类生意也很难作为长期的生意去做，那冬天短期暴利小生意查看更多关于短期暴利小生意的文章有哪些呢?给大家先推荐一个2023年风口项目吧，真很不错的项目，全程零投资，当做副业来做真的很稳定，不管你什么阶层的人，或多或少都网购吧？你们知道网购是可以拿提成，拿返利，拿分佣的吗？你们知道很多优惠券群里面，天天群主和管理发一些商品吗？他们其实在
高级 ECharts 技巧：自定义图表主题与样式 SnowMan1993 echarts 信息可视化数据分析
ECharts是一个强大的数据可视化库，提供了多种内置主题和样式，但你也可以根据项目的设计需求，自定义图表的主题与样式。本文将介绍如何使用ECharts自定义图表主题，以提升数据可视化的吸引力和一致性。1.什么是ECharts主题？ECharts的主题是指定义图表样式的配置项，包括颜色、字体、线条样式等。通过预设主题，你可以快速更改图表的整体风格，而自定义主题则允许你在此基础上进行个性化设置。2.
01-Git初识 Meereen Git git
01-Git初识概念：一个免费开源，分布式的代码版本控制系统，帮助开发团队维护代码作用：记录代码内容。切换代码版本，多人开发时高效合并代码内容如何学：个人本机使用：Git基础命令和概念多人共享使用：团队开发同一个项目的代码版本管理Git配置用户信息配置：用户名和邮箱，应用在每次提交代码版本时表明自己的身份命令：查看git版本号git-v配置用户名gitconfig--globaluser.name
Faiss：高效相似性搜索与聚类的利器网络·魚大数据 faiss
Faiss是一个针对大规模向量集合的相似性搜索库，由FacebookAIResearch开发。它提供了一系列高效的算法和数据结构，用于加速向量之间的相似性搜索，特别是在大规模数据集上。本文将介绍Faiss的原理、核心功能以及如何在实际项目中使用它。Faiss原理：近似最近邻搜索：Faiss的核心功能之一是近似最近邻搜索，它能够高效地在大规模数据集中找到与给定查询向量最相似的向量。这种搜索是近似的，
果然只有离职的时候，才有人敢说真话！ return2ok
今天公司出了神贴。今天中午吃饭，同事问我看了论坛上的神贴了吗？什么帖子？我问。同事显得很惊讶，你居然没看，现在那个帖子可能会成为年度最佳帖子。这么厉害？我等不及了，饭没吃完就快速的奔向办公室，打开公司论坛，我要一睹这个帖子的神奇。写这帖子的童鞋胆儿真肥。这哪里是一个帖子，这是很多个帖子，组成了一个系列。某人从公司文化、管理、人事、项目管理等多个方面分析了公司的概况，并抨击了公司的各种弊端，并提出了
如何选择最适合你的项目研发管理软件？TAPD卓越版全面解析北京云巴巴信息技术有限公司产品经理需求分析
在当今快速发展的科技时代，项目研发管理软件已成为企业不可或缺的重要工具。面对市场上琳琅满目的产品，如何选择一款适合自己团队的项目研发管理软件呢？本文将围绕项目研发管理软件的选择标准，重点介绍TAPD卓越版的特点、优势以及使用体验，让你更好地理解和选择适合自己的项目研发管理软件。项目研发管理软件的选择标准在选择项目研发管理软件时，我们需要考虑以下几个方面的因素：功能全面性：软件是否覆盖了从需求管理、
OPENAIGC开发者大赛企业组AI黑马奖 | AIGC数智传媒解决方案 RPA中国人工智能 AIGC 传媒
在第二届拯救者杯OPENAIGC开发者大赛中，涌现出一批技术突出、创意卓越的作品。为了让这些优秀项目被更多人看到，我们特意开设了优秀作品报道专栏，旨在展示其独特之处和开发者的精彩故事。无论您是技术专家还是爱好者，希望能带给您不一样的知识和启发。让我们一起探索AIGC的无限可能，见证科技与创意的完美融合！创未来AI应用赛-企业组AI黑马奖作品名称：AIGC数智传媒解决方案参赛团队：深圳市三象智能技术
insert into select 主键自增_mybatis拦截器实现主键自动生成 weixin_39521651 insert into select 主键自增 mybatis delete返回值 mybatis insert返回主键 mybatis insert返回对象 mybatis plus insert返回主键 mybatis plus 插入生成id
前言前阵子和朋友聊天，他说他们项目有个需求，要实现主键自动生成，不想每次新增的时候，都手动设置主键。于是我就问他，那你们数据库表设置主键自动递增不就得了。他的回答是他们项目目前的id都是采用雪花算法来生成，因此为了项目稳定性，不会切换id的生成方式。朋友问我有没有什么实现思路，他们公司的orm框架是mybatis，我就建议他说，不然让你老大把mybatis切换成mybatis-plus。mybat
我在大学遇到的兼职坑2 竹音小居
不要存在侥幸，天上不会掉馅饼上一次我讲述了我在某宝刷单遇到的坑，今天我就来讲讲比某宝刷单更坑的兼职，不，这应该不是兼职了，是被骗。我因为在某宝刷单交了会费，最后连本金都没有挣回来，就想找一个不用交本金的刷单平台，然后我就上网搜了一下“有没有不用交钱的兼职”，没成想还真有，我打开网页链接，看人家上面写的文案，确实很心动，不用交钱，加一下客服的qq就可以接单，而且网页上还有很多别人挣钱的截图，佣金非常
快乐春节 Lilywo
春节肯定是大多小朋友都喜欢的节日吧，因为春节的娱乐项目可多啦，下面我就带大家去看一看某些娱乐项目吧！第一件肯定就是穿新衣啦！因为辞旧迎新，一年过去了，要迎来新的一年。所以过年穿新衣也是一项习俗吧；第二件，收压岁钱。压岁钱大家都知道吧，过年的时候，小朋友们肯定都会受到大人们的压岁钱吧，对啦！大家知道为什么亲人们会给我们压岁钱呢？答案是因为亲人们希望我们在新的一年里可以健健康康、平平安安，幸福福的生活
spring如何整合druid连接池？惜.己 spring spring junit 数据库 java idea 后端 xml
目录spring整合druid连接池1.新建maven项目2.新建mavenModule3.导入相关依赖4.配置log4j2.xml5.配置druid.xml1)xml中如何引入properties2)下面是配置文件6.准备jdbc.propertiesJDBC配置项解释7.配置druid8.测试spring整合druid连接池1.新建maven项目打开IDE（比如IntelliJIDEA,Ecl
Java爬虫框架（一）--架构设计狼图腾-狼之传说 java 框架 java 任务 html解析器存储电子商务
一、架构图那里搜网络爬虫框架主要针对电子商务网站进行数据爬取，分析，存储，索引。爬虫：爬虫负责爬取，解析，处理电子商务网站的网页的内容数据库：存储商品信息索引：商品的全文搜索索引Task队列：需要爬取的网页列表Visited表：已经爬取过的网页列表爬虫监控平台：web平台可以启动，停止爬虫，管理爬虫，task队列，visited表。二、爬虫1.流程1)Scheduler启动爬虫器，TaskMast
Java：爬虫框架 dingcho Java java 爬虫
一、ApacheNutch2【参考地址】Nutch是一个开源Java实现的搜索引擎。它提供了我们运行自己的搜索引擎所需的全部工具。包括全文搜索和Web爬虫。Nutch致力于让每个人能很容易,同时花费很少就可以配置世界一流的Web搜索引擎.为了完成这一宏伟的目标,Nutch必须能够做到:每个月取几十亿网页为这些网页维护一个索引对索引文件进行每秒上千次的搜索提供高质量的搜索结果简单来说Nutch支持分
vue项目element-ui的table表格单元格合并酋长哈哈 vue.js elementui javascript 前端
一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'
android 更改窗口的层次,浮窗开发之窗口层级 Ms.Bu android 更改窗口的层次
最近在项目中遇到了这样的需求：需要在特定的其他应用之上悬浮自己的UI交互(拖动、输入等复杂的UI交互)，和九游的浮窗类似，不过我们的比九游的体验更好，我们越过了很多授权的限制。浮窗效果很多人都知道如何去实现一个简单的浮窗，但是却很少有人去深入的研究背后的流程机制，由于项目中浮窗交互比较复杂，遇到了些坑查看了很多资料，故总结浮窗涉及到的知识点：窗口层级关系(浮窗是如何“浮”的)？浮窗有哪些限制，如何
面向对象面向过程 3213213333332132 java
面向对象：把要完成的一件事，通过对象间的协作实现。面向过程：把要完成的一件事，通过循序依次调用各个模块实现。我把大象装进冰箱这件事为例，用面向对象和面向过程实现，都是用java代码完成。 1、面向对象 package bigDemo.ObjectOriented; /** * 大象类 * * @Description * @author FuJian
Java Hotspot: Remove the Permanent Generation bookjovi HotSpot
openjdk上关于hotspot将移除永久带的描述非常详细，http://openjdk.java.net/jeps/122 JEP 122: Remove the Permanent Generation Author Jon Masamitsu Organization Oracle Created 2010/8/15 Updated 2011/
正则表达式向前查找向后查找,环绕或零宽断言 dcj3sjt126com 正则表达式
向前查找和向后查找 1. 向前查找：根据要匹配的字符序列后面存在一个特定的字符序列(肯定式向前查找)或不存在一个特定的序列(否定式向前查找)来决定是否匹配。.NET将向前查找称之为零宽度向前查找断言。对于向前查找，出现在指定项之后的字符序列不会被正则表达式引擎返回。 2. 向后查找：一个要匹配的字符序列前面有或者没有指定的
BaseDao 171815164 seda
import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException; import java.sql.PreparedStatement; import java.sql.ResultSet; public class BaseDao { public Conn
Ant标签详解--Java命令 g21121 Java命令
这一篇主要介绍与java相关标签的使用终于开始重头戏了，Java部分是我们关注的重点也是项目中用处最多的部分。 1
[简单]代码片段_电梯数字排列 53873039oycg 代码
今天看电梯数字排列是9 18 26这样呈倒N排列的,写了个类似的打印例子，如下: import java.util.Arrays; public class 电梯数字排列_S3_Test { public static void main(S
Hessian原理云端月影 hessian原理
Hessian 原理分析一．远程通讯协议的基本原理网络通信需要做的就是将流从一台计算机传输到另外一台计算机，基于传输协议和网络 IO 来实现，其中传输协议比较出名的有 http 、 tcp 、 udp 等等， http 、 tcp 、 udp 都是在基于 Socket 概念上为某类应用场景而扩展出的传输协
区分Activity的四种加载模式----以及Intent的setFlags aijuans android
在多Activity开发中，有可能是自己应用之间的Activity跳转，或者夹带其他应用的可复用Activity。可能会希望跳转到原来某个Activity实例，而不是产生大量重复的Activity。这需要为Activity配置特定的加载模式，而不是使用默认的加载模式。加载模式分类及在哪里配置 Activity有四种加载模式： standard singleTop
hibernate几个核心API及其查询分析 antonyup_2006 html .net Hibernate xml 配置管理
(一) org.hibernate.cfg.Configuration类读取配置文件并创建唯一的SessionFactory对象.(一般,程序初始化hibernate时创建.) Configuration co
PL/SQL的流程控制百合不是茶 oracle PL/SQL编程循环控制
PL/SQL也是一门高级语言,所以流程控制是必须要有的,oracle数据库的pl/sql比sqlserver数据库要难,很多pl/sql中有的sqlserver里面没有流程控制; 分支语句 if 条件 then 结果 else 结果 end if ; 条件语句 case when 条件 then 结果; 循环语句 loop
强大的Mockito测试框架 bijian1013 mockito 单元测试
一.自动生成Mock类在需要Mock的属性上标记@Mock注解，然后@RunWith中配置Mockito的TestRunner或者在setUp()方法中显示调用MockitoAnnotations.initMocks(this);生成Mock类即可。二.自动注入Mock类到被测试类 &nbs
精通Oracle10编程SQL(11)开发子程序 bijian1013 oracle 数据库 plsql
/* *开发子程序 */ --子程序目是指被命名的PL/SQL块，这种块可以带有参数，可以在不同应用程序中多次调用 --PL/SQL有两种类型的子程序：过程和函数 --开发过程 --建立过程：不带任何参数 CREATE OR REPLACE PROCEDURE out_time IS BEGIN DBMS_OUTPUT.put_line(systimestamp); E
【EhCache一】EhCache版Hello World bit1129 Hello world
本篇是EhCache系列的第一篇，总体介绍使用EhCache缓存进行CRUD的API的基本使用，更细节的内容包括EhCache源代码和设计、实现原理在接下来的文章中进行介绍环境准备 1.新建Maven项目 2.添加EhCache的Maven依赖 <dependency> <groupId>ne
学习EJB3基础知识笔记白糖_ bean Hibernate jboss webservice ejb
最近项目进入系统测试阶段，全赖袁大虾领导有力，保持一周零bug记录，这也让自己腾出不少时间补充知识。花了两天时间把“传智播客EJB3.0”看完了，EJB基本的知识也有些了解，在这记录下EJB的部分知识，以供自己以后复习使用。 EJB是sun的服务器端组件模型，最大的用处是部署分布式应用程序。EJB (Enterprise JavaBean)是J2EE的一部分，定义了一个用于开发基
angular.bootstrap boyitech AngularJS AngularJS API angular中文api
angular.bootstrap 描述：手动初始化angular。这个函数会自动检测创建的module有没有被加载多次，如果有则会在浏览器的控制台打出警告日志，并且不会再次加载。这样可以避免在程序运行过程中许多奇怪的问题发生。使用方法： angular .
java-谷歌面试题-给定一个固定长度的数组，将递增整数序列写入这个数组。当写到数组尾部时，返回数组开始重新写，并覆盖先前写过的数 bylijinnan java
public class SearchInShiftedArray { /** * 题目：给定一个固定长度的数组，将递增整数序列写入这个数组。当写到数组尾部时，返回数组开始重新写，并覆盖先前写过的数。 * 请在这个特殊数组中找出给定的整数。 * 解答： * 其实就是“旋转数组”。旋转数组的最小元素见http://bylijinnan.iteye.com/bl
天使还是魔鬼？都是我们制造 ducklsl 生活教育情感
----------------------------剧透请原谅，有兴趣的朋友可以自己看看电影，互相讨论哦！！！从厦门回来的动车上，无意中瞟到了书中推荐的几部关于儿童的电影。当然，这几部电影可能会另大家失望，并不是类似小鬼当家的电影，而是关于“坏小孩”的电影！自己挑了两部先看了看，但是发现看完之后，心里久久不能平
[机器智能与生物]研究生物智能的问题 comsci 生物
我想,人的神经网络和苍蝇的神经网络,并没有本质的区别...就是大规模拓扑系统和中小规模拓扑分析的区别.... 但是,如果去研究活体人类的神经网络和脑系统,可能会受到一些法律和道德方面的限制,而且研究结果也不一定可靠,那么希望从事生物神经网络研究的朋友,不如把
获取Android Device的信息 dai_lm android
String phoneInfo = "PRODUCT: " + android.os.Build.PRODUCT; phoneInfo += ", CPU_ABI: " + android.os.Build.CPU_ABI; phoneInfo += ", TAGS: " + android.os.Build.TAGS; ph
最佳字符串匹配算法（Damerau-Levenshtein距离算法）的Java实现 datamachine java 算法字符串匹配
原文：http://www.javacodegeeks.com/2013/11/java-implementation-of-optimal-string-alignment.html------------------------------------------------------------------------------------------------------------
小学5年级英语单词背诵第一课 dcj3sjt126com english word
long 长的 show 给...看，出示 mouth 口，嘴 write 写 use 用，使用 take 拿，带来 hand 手 clever 聪明的 often 经常 wash 洗 slow 慢的 house 房子 water 水 clean 清洁的 supper 晚餐 out 在外 face 脸，
macvim的使用实战 dcj3sjt126com mac vim
macvim用的是mac里面的vim, 只不过是一个GUI的APP, 相当于一个壳 1. 下载macvim https://code.google.com/p/macvim/ 2. 了解macvim :h vim的使用帮助信息 :h macvim
java二分法查找蕃薯耀 java二分法查找二分法 java二分法
java二分法查找 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年6月23日 11:40:03 星期二 http:/
Spring Cache注解+Memcached hanqunfeng spring memcached
Spring3.1 Cache注解依赖jar包：  <dependency> <groupId>com.google.code.simple-spring-memcached</groupId> <artifactId>simple-s
apache commons io包快速入门 jackyrong apache commons
原文参考 http://www.javacodegeeks.com/2014/10/apache-commons-io-tutorial.html Apache Commons IO 包绝对是好东西，地址在http://commons.apache.org/proper/commons-io/，下面用例子分别介绍： 1）工具类 2
如何学习编程 lampcy java 编程 C++c
首先,我想说一下学习思想.学编程其实跟网络游戏有着类似的效果.开始的时候,你会对那些代码,函数等产生很大的兴趣,尤其是刚接触编程的人,刚学习第一种语言的人.可是,当你一步步深入的时候,你会发现你没有了以前那种斗志.就好象你在玩韩国泡菜网游似的,玩到一定程度,每天就是练级练级,完全是一个想冲到高级别的意志力在支持着你.而学编程就更难了,学了两个月后,总是觉得你好象全都学会了,却又什么都做不了,又没有
架构师之spring-----spring3.0新特性的bean加载控制@DependsOn和@Lazy nannan408 Spring3
1.前言。如题。 2.描述。 @DependsOn用于强制初始化其他Bean。可以修饰Bean类或方法，使用该Annotation时可以指定一个字符串数组作为参数，每个数组元素对应于一个强制初始化的Bean。 @DependsOn({"steelAxe","abc"}) @Comp
Spring4+quartz2的配置和代码方式调度 Everyday都不同代码配置 spring4 quartz2.x 定时任务
前言：这些天简直被quartz虐哭。。因为quartz 2.x版本相比quartz1.x版本的API改动太多，所以，只好自己去查阅底层API…… quartz定时任务必须搞清楚几个概念： JobDetail——处理类 Trigger——触发器，指定触发时间，必须要有JobDetail属性，即触发对象 Scheduler——调度器，组织处理类和触发器，配置方式一般只需指定触发
Hibernate入门 tntxia Hibernate
前言使用面向对象的语言和关系型的数据库，开发起来很繁琐，费时。由于现在流行的数据库都不面向对象。Hibernate 是一个Java的ORM（Object/Relational Mapping）解决方案。 Hibernte不仅关心把Java对象对应到数据库的表中，而且提供了请求和检索的方法。简化了手工进行JDBC操作的流程。如
Math类 xiaoxing598 Math
一、Java中的数字（Math）类是final类，不可继承。 1、常数 PI：double圆周率 E：double自然对数 2、截取（注意方法的返回类型） double ceil(double d) 返回不小于d的最小整数 double floor(double d) 返回不大于d的整最大数 int round(float f) 返回四舍五入后的整数 long round

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他