自学Vue开发Dapp去中心化钱包（一）

全能打工人

已于 2022-08-12 11:22:07 修改

阅读量4.3k

点赞数 2

分类专栏：区块链 Vue 文章标签：去中心化区块链 Vue ethers.js Metamask

于 2022-08-12 11:20:51 首次发布

本文链接：https://blog.csdn.net/xieedeni/article/details/126298589

版权

Vue 同时被 2 个专栏收录

6 篇文章 4 订阅

订阅专栏

区块链

4 篇文章 4 订阅

订阅专栏

文章目录

前言

此文章记录本人自学Vue前端知识历程，并实践参与去中心化钱包门户开发（含以太坊链上操作）。所谓自学，那以下内容对于大佬来说就是小菜一碟，读到不对或者小儿科的地方，大家勿怪，请多多指教。

一、需求背景

突然接到公司领导旨意，公司开了一个web3的项目，现在缺少一个门户开发，也参与门户的后端开发。领导找到我，让我自学下Vue用于门户开发。

涉及的Web3钱包为以下二类：
中心化Web3钱包：整合在金融APP中，钱包证书由平台方统一管理；
去中心化Web3钱包：可以采用市面上常用的数字货币钱包，例如Metamask、imToken等热钱包，以及Ledger等冷钱包，钱包证书由钱包持有者自行管理。

二、名词学习

1.web3

web3是什么

web1时代，是静态页面时代，人机交换少；

web2是用户互联时代，其中中心化寡头控制着用户的所有数据，比如TX；

web3是一个自由、安全，由用户共同治理的互联网。概念是去中心化，意味着没有中心化服务器，主要存在于区块链中。虽然目前在概念阶段，但在国外非常吸金，看看比特币就明白了，1个比特币的价值确是实打实的真金白银，对于投资者也是很热门的。

2.去中心化钱包

去中心化钱包，所谓去中心化就是没有中心服务者管理的钱包，目前比较主流的有很多，Coinbase，imToken，AToken，HyperPay，TokenPocket，比特派，Jaxx钱包，Blockchain这些都是。

去中心化钱包，私钥保存在用户自己的手里，资产存储在区块链上，用户是真正的数字货币的持有者，钱包只是帮助用户管理链上资产和读取数据的一个工具。

因此去中心化的钱包很难被黑客集中攻击，用户也不必担心钱包服务商的自我窃取或者跑路，因为只要创建钱包的时候自己把私钥保管好，你的资产依然在链上，换个钱包一样可以显示出来的。

3.中心化钱包

也称链下钱包（Offchain），完全依赖运行这个钱包的公司和服务器，存在交易所里的比特币就是中心化钱包（链下钱包）里保存的。私钥不属于用户所有，但在中心化服务器托管链中的钱包项目端，通常资金也委托给服务器。

4.区块链

它是一个共享数据库，存储于其中的数据或信息，具有“不可伪造”“全程留痕”“可以追溯”“公开透明”“集体维护”等特征。源自于比特币。

区块是一个一个的存储单元，记录了一定时间内各个区块节点全部的交流信息。

各个区块之间通过随机散列(也称哈希算法)实现链接，后一个区块包含前一个区块的哈希值，随着信息交流的扩大，一个区块与一个区块相继接续，形成的结果就叫区块链。

5.ethers.js

ethers.js库旨在为以太坊区块链及其生态系统提供一个小而完整的 JavaScript API 库。与web3.js相比ethers.js接口API相对简单，便于学习和使用。API地址：Documentation

6.Vue

vue是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架；Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。

7.以太坊

以太坊是一个可编程、可视化、更易用的区块链，它允许任何人编写智能合约和发行代币ETH。就像比特币一样，以太坊是去中心化的，由全网共同记账，账本公开透明且不可窜改。与比特币不同的是，以太坊是可编程的区块链，它提供了一套图灵完备的脚本语言，因此，开发人员可以直接用C语言等高级语言编程，转换成汇编语言。这里要了解合约和代发币概念。

8.小狐狸钱包

MetaMask在谷歌浏览器Chrome上使用的插件类型的一款以太坊钱包，这种钱包是不用进行下载的，只用在谷歌浏览器添加对应的扩展程序就可以了，而且它是轻量级的，用起来就会很方便。它还有像 Mist 那样的钱包功能，可以让用户管理自己的账户，通过 Web3 JavaScript API，让 DApp 与以太坊区块链进行交互。

三、技术选型

1.前端门户

使用Vue，没有啥理由，主流。

2.以太坊交换

选择ethers.js，理由是ethers.js用法简单，文档API也还算清晰。

3.交换钱包

目前选择Metamask小狐狸钱包，文档

Getting Started | MetaMask Docs

4.后端框架

公司自建，springcloud基础上封装得biz-sip框架。

小结

此文章仅记录Vue和ethers.js的学习和使用，不涉及后端开发知识。

门户选择使用Vue开发。然本人Vue几乎零经验。好在本人之前做全栈，js,jquery,css,html也都做过，想到这也就释然了，既然让我做，那就代表领导是接收我首先是学习的阶段，可以学习新知识，有什么不可以的呢（ps 本人一直有意想学Vue，但总是下不下来决心）。本人作为java后端工程师，目前学了大数据相关组件，现在学个前端不是小意思嘛？（Waiting hit face!）

待续