Express 与 web3.js 构建简易网页钱包教程

在区块链技术日益普及的今天，掌握如何构建一个去中心化网页钱包成为开发者的一项重要技能。本教程将引导你使用 Express 框架和 web3.js 库，从零开始搭建一个功能完备的简易网页钱包，支持账户管理、余额查询和代币转账等核心功能。

环境准备与项目创建

在开始编码之前，需要配置相应的开发环境。以下步骤将帮助你安装必要的工具和依赖。

安装基础环境

确保你的系统已安装以下组件：

GCC 编译器：用于编译本地模块
Golang 语言环境：部分以太坊工具依赖 Go
Go-Ethereum 客户端：连接以太坊网络的基础
Node.js 运行环境：执行 JavaScript 代码

安装开发依赖

通过 npm 安装项目所需的 JavaScript 包：

npm install express
npm install web3
npm install ejs

Express 作为 Web 服务器框架，web3.js 用于与以太坊区块链交互，EJS 则负责渲染前端页面。

核心代码实现

接下来是实现钱包功能的核心代码部分。主程序文件 main.js 包含了所有的后端逻辑。

初始化 Express 应用

首先引入必要的模块并初始化 Web3 实例：

var express = require('express');
var app = express();
app.use(express.static('public'));
app.set("view engine","ejs");
app.set('views', __dirname + '/views');
var Web3 = require('web3');
var web3 = new Web3('/home/ethereum/.ethereum/geth.ipc', net);

这里设置了静态文件目录，配置 EJS 为模板引擎，并创建了与本地以太坊节点通信的 Web3 实例。

定义路由处理函数

应用包含多个路由端点，处理各种钱包操作：

首页路由：渲染欢迎页面
账户列表：获取并显示所有账户地址
创建账户：通过密码生成新账户
余额查询：显示账户的 ETH 和代币余额
转账功能：处理 ETH 和代币的转账交易

app.get('/account.html', function (req, res) {
 web3.eth.getAccounts(function(err, acc) {
 res.render("account",{"accounts":acc});
 });
});

每个路由都调用 web3.js 的相应方法与区块链交互，然后使用 EJS 模板渲染结果页面。

智能合约交互

为了处理代币交易，需要加载代币合约的 ABI 并创建合约实例：

const abi = fs.readFileSync( __dirname + '/abi/NKC.abi', 'utf-8');
const contractAddress = "0x5F75DA091aBb25e055B91172C04371Ff4Dd563a0";

var contract = new web3.eth.Contract(JSON.parse(abi), contractAddress, { from: coinbase , gas: 100000});

合约实例可用于查询余额、调用转账方法等操作。

👉 查看实时区块链交互工具

前端页面设计

前端使用 EJS 模板生成动态 HTML 页面，每个模板对应一个功能模块。

账户管理页面

account.ejs 模板显示所有账户地址，并提供创建新账户的表单：

<% accounts.forEach(function(account, index){ %>
 <%= index %>, <%= account %>
<% }) %>

余额查询页面

balance.ejs 提供账户选择下拉菜单，用户可选择要查询余额的账户：

<select name="account">
 <% accounts.forEach(function(account, index){ %>
 <option value="<%= account %>"><%= account %></option>
 <% }) %>
</select>

转账功能页面

transfer.ejs 包含完整的转账表单，支持选择发送方、接收方、转账金额和币种：

<select name="from">
 <% accounts.forEach(function(account, index){ %>
 <option value="<%= account %>"><%= account %></option>
 <% }) %>
</select>

应用部署与测试

完成编码后，启动 Node.js 服务器：

node main.js

服务器启动后，在浏览器中访问 http://localhost:8080/ 即可使用钱包功能。

功能测试流程

访问首页：确认服务器正常运行
查看账户：点击账户页面查看现有账户列表
创建新账户：使用密码表单生成新账户
查询余额：选择账户查看 ETH 和代币余额
执行转账：在账户间进行 ETH 或代币转账

常见问题

如何连接其他以太坊网络？

默认配置连接到本地节点。要连接主网或测试网，只需修改 Web3 实例的提供商URL即可。例如，使用 Infura 节点服务：

var web3 = new Web3('https://mainnet.infura.io/v3/你的项目ID');

如何处理交易手续费？

以太坊上的每笔交易都需要支付 gas 费用。web3.js 会自动估算 gas 用量，但你也可以手动设置 gas 限额和价格。转账时确保账户有足够的 ETH 支付手续费。

如何增强钱包安全性？

本示例为教学目的简化了安全措施。在生产环境中，应考虑以下增强措施：

使用 HTTPS 加密通信
实施更安全的密码存储机制
添加交易确认步骤
考虑使用硬件钱包集成

为什么需要 ABI 文件？

ABI（应用程序二进制接口）定义了如何与智能合约交互的规范。它包含了合约的方法、参数和返回值信息，web3.js 需要 ABI 才能正确编码和解码与合约的交互数据。

如何自定义代币支持？

要支持其他代币，只需替换合约地址和 ABI 文件即可。确保新的 ABI 与目标合约的实际方法兼容，特别是余额查询和转账方法的签名。

交易失败有哪些常见原因？

交易可能因多种原因失败，包括：

账户余额不足（用于支付手续费或转账金额）
Gas 限额设置过低
非挖矿账户发起交易
网络拥堵导致交易超时

通过本教程，你已经掌握了使用 Express 和 web3.js 构建简易网页钱包的基本方法。这个基础框架可以进一步扩展，添加更多高级功能如交易历史查询、多链支持和更复杂的智能合约交互。